ES6学习笔记二

1. set

ES6提供的新的数据结构。类似于数组，但成员的值是唯一的，集合实现iterator接口。所以可以使用扩展运算符和`for...of...`进行遍历

1） set的声明和api

     //声明set
    let set1=new Set();
    let set2=new Set(['黑猫','白猫','胖猫','瘦猫']);
    //元素个数
    console.log(set2.size)
    //添加元素
    set2.add('橘猫');
    //删除元素
    set2.delete('白猫');
    //检测
    console.log(set2.has('白猫'));
    //清空
    // set2.clear();

    //遍历
    for(let a of set2){
      console.log(a)
    }

2） set实现数组的去重、交集、并集、差集

     //使用set来实现数组的去重、交集、差集、并集
    let arr1=[1,1,1,2,2,4,4,5,5]
    //实现数组的去重
    let result=[...new Set(arr1)];
    console.log(result);

    //实现数组的交集
    let arr2=[2,4,6,7];
    let result2=[...new Set(arr1)].filter(item => new Set(arr2).has(item))
    //去重结果
    console.log(result2)

    //实现数组的差集 求arr1对arr2的差集，结果是1，5
    let result3=[...new Set(arr1)].filter(item => !new Set(arr2).has(item))
    console.log(result3)

    //实现数组的并集
    let result5=new Set([...arr1,...arr2]);
    console.log(result5)

2. map

ES6提供了Map数据结构。类似于对象，是键值对的组合。键值不限于字符串，各种类型的值都可以当键。同样Map也实现了iterator接口，可以使用扩展运算符和`for...of`进行遍历。

map的声明和api

    let m=new Map();
    m.set('name','xiaojiang');
    m.set('change',function () {
      console.log('i am xiaojiang')
    })
    let key={
      school:'霍格沃兹'
    }
    m.set(key,['北京','上海','广州']);
    //大小
    console.log(m.size);
    //删除
    // console.log(m.delete('name'))
    //获取
    console.log(m.get('change'))
    console.log(m.get(key))
    //清空
    // m.clear();
    //遍历
    for(let n of m){
      console.log(n)
    }

3. class类

ES6提供了更接近传统语言的写法，引入了Class (类)这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

1） class构造方法

    class Phone{
      //构造方法，名字不能修改
      constructor(brand, price){
        this.brand=brand;
        this.price=price;
      }

      //函数必须以以下语法，不能使用es6对象完整形式
      call(){
        console.log('我可以打电话')
      }

    }
    let onePlus=new Phone('1+',9999)
    console.log(onePlus)

2） 静态成员属于类，不属于实例化对象

    class App{
      static name='youtube'
    }
    let app=new App();
    console.log(app.name);  //undefined

4. 构造方法继承

    //es5构造函数实现继承
    function phone(brand,size) {
      this.brand=brand;
      this.size=size;
    }

    phone.prototype.call=function () {
      console.log('我可以打电话')
    }

    //智能手机
    function smartPhone(brand, size, color, price) {
      phone.call(this,brand,price);
      this.color=color
      this.size=size;
    }
    //设置子级构造函数的原型
    smartPhone.prototype=new phone;
    smartPhone.prototype.constructor=smartPhone;

    //声明子类的方法
    smartPhone.prototype.phone=function () {
      console.log('我可以打电话')
    }

    const chuizi=new smartPhone('锤子','5.5inch','pink','1999')
    console.log(chuizi)

5. class类继承

 class Phone{
      constructor(brand,price){
        this.brand=brand;
        this.price=price
      }
      //父类的成员属性
      call(){
        console.log('我可以打电话')
      }
    }

    class SmartPhone extends Phone{
      constructor(brand,price,size,color){
        super(brand,price)
        this.color=color
        this.size=size
      }


      phone(){

      }


      playGame(){

      }

      call(){
        //对父类方法的重写
        console.log('我可以视频电话')
      }
    }

    const xiaoMi=new SmartPhone('小米',799,'550','pink')
    console.log(xiaoMi)

6. class中getter和setter设置

    class Phone{
      get price(){
        console.log('价格属性被读取')
        return '5r/kg'
      }
      set price(value){
        console.log('价格属性被修改')
      }
    }

    let a=new Phone();
    console.log(a.price);  //读取价格
    a.price='6r/kg'      //set修改价格
    console.log(a.price)

7. ES6数值扩展

    //0 Number.EPSILON是JavaScript表示的最小精度
    function equal (a,b) {
      if(Math.abs(a-b)<Number.EPSILON){
        return true
      }else {
        return false
      }
    }

    //1. 二进制 、 八进制、 十进制、 十六进制
    let b=0b1010;
    let o=0o777;
    let d=100;
    let x=0xff;

    //2.Number.isFinite 检测一个数值是否是有限数
    console.log(Number.isFinite(Infinity))
    
    //3. Number.isNaN 检测一个数是否是NaN
    console.log(Number.isNaN(123))
    
    //4. Number.parseInt 字符串转整数  Number.parseFloat 字符串转浮点数
    console.log(Number.parseInt('520iloveyou'))
    console.log(Number.parseFloat('3.1415神奇'))
    
    //5. Number.isInteger 判断是否是整数
    console.log(Number.isInteger(2.5))
    
    //6. Math.trunc 将整数的小数部分抹掉
    console.log(Math.trunc(2.5))
    
    //7. Math.sign 判断一个数是正数、负数或者0
    console.log(Math.sign(2.5))

8. ES6对象方法扩展

    //1. Object.is 判断两个值是否相等
    console.log(Object.is(NaN,NaN))

    //2. Object.assign 对象的合并
    const config1={
      host:'localhost',
      port:3306,
      username:'root',
      password:'1234',
      test:'test'
    }

    const config2={
      host:'local',
      port:3308,
      username:'root',
      password:'1234',
      test2:'test'
    }

    console.log(Object.assign(config1,config2))

    //3. Object.setPrototypeOf 设置原型对象 Object.etPrototypeOf 获取原型对象
    const school={
      name:'霍格沃兹'
    }
    const city={
      xiaoqu:['格兰芬多','赫奇帕奇','拉文克劳','斯莱特林']
    }
    Object.setPrototypeOf(school,city);
    console.log(Object.getPrototypeOf(school))
    console.log(school)

9. 模块化

1) 模块化理解

a.  模块化是将一个大的程序文件，拆分成许多小的文件，然后小文件组合起来

b. 优势

代码复用、防止命名冲突、高维护性

c. 模块化规范

CommonJS => NodeJS、Browserify

AMD=>requireJS

CMD=>seaJS

2) 模块化初体验

暴露数据语法汇总

分别暴露、统一暴露、默认暴露

//分别暴露
export let school1='斯莱特林'

export function mofa1() {
    console.log('我们强大冷静，我们优雅自持，我们从不后悔，我们是斯莱特林')
}

//统一暴露
let school2='格兰芬多'

function mofa2() {
    console.log('我们英勇无畏，我们奋不顾身，我们胆识过人，我们是格兰芬多')
}

export{school2,mofa2}

//默认暴露
export default {
    school3: '赫奇帕奇',
    change:function () {
        console.log('我们正直善良，我们坚忍诚实，我们热爱干饭，我们是赫奇帕奇')
    }
}

引入模块数据语法汇总

  //1. 通用的导入方式
  import * as t1 from './js/test'
  // 2. 解构赋值形式
  //分别暴露
  import {school1,mofa1} from "./js/test";
  //默认暴露
  import {default as a} from "./js/test";
  //3. 简便形式（针对默认暴露）
  import m from './js/test'

使用script标签引入（不支持），项目中一般不会使用该方法

<script src="./js/app.js" type="module"></script>

在app.js中引入所有的js文件

import * as test1 from './test'
import * as test2 from './test2'

10 babel

对ES6模块化代码转化，有些浏览器可能不支持ES6一些新的语法，就可以使用babel进行代码转化。

1）安装依赖(开发依赖)，发布生产时不会打包进去

npm i babel-cli babel-preset-env browserify -D

2）将ES6语法转为CommonJS语法

npx babel src/js -d src/babel/js --presets=babel-preset-env

3） 打包

npx browserify src/babel/js/app.js -o src/babel/bundle.js
 

11 ES7新特性

//新特性一： **
function test() {
    console.log(2**10)
    console.log(Math.pow(2,10))
}
test()  //1024

//新特性二：检测数组是否含有某元素
function test2() {
    const mingzhu=['西游','红楼','三国']
    console.log(mingzhu.includes('西游'))  //true
}
test2()

12 ES8 新特性

1）asyns函数

该函数返回promise对象，promise对象结果由asyns函数执行的返回值决定

const a=async  function fn() {
    //返回字符串 返回的结果就是成功Promise对象 fulfilled
    // return '哈利波特'
    //返回结果不是Promise类型的对象，返回的结果就是成功Promise对象 fulfilled
    // return;
    //抛出错误，返回结果是一个失败的Promise  rejected
    // throw new Error('出错了')
    //返回一个promise对象 rejected
    return new Promise((resolve,reject)=>{
        //fulfilled
        // resolve("成功")
        reject('出错')
    })
}
a.then(value=>{
    console.log(value)
},reason=>{
    console.log(reason)
})
export default a;

2） await表达式

await表达式必须写在asyns函数中

await右侧表达式一般是promise对象

await返回promise对象成功的值

await的promise失败了会抛出异常，通过try...catch捕获处理

//创建promise
const p=new Promise((resolve, reject)=>{
    // resolve('成功值')
    reject('失败了')
})
export default async function main() {
    try {
        let result = await p;
        //返回成功值
        console.log(result)
    } catch (e) {
        console.log(e)
    }
}

3） asyns和await结合读文件

const fs = require('fs')
function readFs() {
    return new Promise((resolve, reject)=>{
        fs.readFile('./test.txt',(err,data)=>{
            if(err) reject(err)
            resolve(data)
        })
    })
}

 async function main() {
    //await后面是promise
    let read=await readFs()
    console.log(read.toString())
}
main()

4） asyns和await结合发送ajax请求

 function sendAJAX(url) {
    return new Promise(((resolve, reject) => {
        //1 创建对象
        const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

        const x = new XMLHttpRequest();
        //2 初始化
        x.open('GET',url)
        //3 发送
        x.send()
        //4 事件绑定
        x.onreadystatechange=function () {
            if(x.readyState===4){
                if(x.status>=200&&x.status<300){
                    resolve(x.response)
                }else{
                    reject(x.status)
                }
            }
        }
    }))
}

async function main() {
    let result=await sendAJAX('https://api.apiopen.top/getJoke')
    console.log(result)
}

5） ES8对象方法扩展

const school={
    name:'霍格沃兹',
    cities:['北京','上海','广州']
}

//获取所有的键
console.log(Object.keys(school))
//获取对象所有值
console.log(Object.values(school))
//entries
console.log(Object.entries(school))
//创建Map
const m=new Map(Object.entries(school))
console.log(m.get('cities'))

//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school))

const obj=Object.create(null,{
    name:{
        value:'霍格沃兹',
        writable:true,
        configurable:true,
        enumerable:true
    }
})