ES6新特性

ECMAScript 概述

• JavaScript是ECMAScript的拓展语言
• ECMAScript只是提供了最基本的语法
• JavaScript语言本身就是ECMAScript
• 2015年起ES就保持了每年一个版本的迭代
• ES2015就是被称之为ES6

ECMAScript 2015

• 最新代表版本ES2015
• 用ES6来泛指所有的新标准
• 要注意分辨用ES6是特指还是泛指

http://www.ecma-international.org/ecma-262/6.0/

官方网站

• ES2015弥补了一些缺陷：
  1.解决原有语法的一些问题或者缺陷
  2.对原有语法进行增强
  3.全新的对象，全新的方法，全新的功能
  4.全新的数据类型，数据结构

准备工作

VScode安装插件：

• Debugger for Chrome
• Live Server
• Browser Preview

let与块级作用域

• 在ES2015之前只有全局作用域和函数作用域
• let定义的变量在块级作用域能够被访问到
• 非常适合设置在for循环中的循环变量
• 通过let定义变量，只在自己的循环中生效

 // 循环实际上有两层作用域
    for(let i = 0;i<10;i++){
      let i = "foo";
      console.log(i);
    }

不会输出循环内的i，而是同一块级下定义的字符串

另外和var有另外一个区别，let不会进行变量声明提升

报错：不能在声明之前调用

const常量

• 特点：在let的基础上增加了一个【只读】效果

会报错，报错内容为：

改变量也不可再更改了

    const name;
    name = "zs";

报错：
Uncaught SyntaxError: Missing initializer in const declaration（丢失了初始值，所以定义const常量的时候要同时进行赋值）
当定义的是一个对象的时候，其内部的属性值是可以进行更改的，但是当对变量本身进行修改就是不行的

如上所述

最佳实践：不用var，主要用const，配合let

数组的解构

// 数组解构

    const arr1 = [100,200,300];
    const [foo1,bar1,baz1] = arr1;
    console.log(foo1,bar1,baz1);

    const arr2 = [100,200,300];
    const[, , baz2] = arr2;
    console.log(baz2);

    const arr3 = [100,200,300];
    const [foo3,...rest] = arr3;
    console.log(rest);

    const arr4 = [100,200,300];
    const [foo4,bar4,baz4,more4] = arr4;
    console.log(more4);

    const arr5 = [100,200,300];
    const [foo5,bar5,baz5 = 400, more5 = 123] = arr5;
    console.log(more5);
    console.log(baz5);

    const path = "foo/bar/baz";
    const [,,a] = path.split("/");
    console.log(a);

对应的结果

对象的解构

结果

模板字符串

插值表达式可以多个插入，中间用逗号，每一项都是$（）

模板字符串标签函数

函数myTagFunc中，strings是个数组，分别有三项
1.'hi '
2.' is a '
3.''
传入的参数，name，gender，分别加入就可
得到结果应该为：
hi, zs is a man

字符串拓展方法

• includes()
• endsWith()
• startsWith()

 // 字符串扩展方法
    const msg = 'Error: foo is not defined.'
    console.log(msg.startsWith('Error'))    //以xxx为开头
    console.log(msg.endsWith('.'))          //以xxx结尾
    console.log(msg.includes('foo'))        //是否包含xxx

参考默认值

如果有多个参数的话，设置了默认值的那个属性应该尽量往后拿，避免程序出现错误

剩余操作符

• ...操作符

args接受了2,3,4,三个参数，可以当成数组来用

// 展开数组操作
    const arr = ['foo', 'bar', 'baz']
    // console.log(arr[0],arr[1],arr[2])
    // console.log.apply(console,arr)

    console.log(...arr)

展开数组

箭头函数

结果

箭头函数的this

对象字面量的增强

结果

对象拓展方法

Object.assign

• 将多个源对象的属性复制到一个目标对象中

 // 对象扩展方法
    // Object.assign 方法
    const sourse1 = {
      a : 123,
      b : 123
    }
    const target = {
      a : 456,
      b : 789
    }
    const sourse2 = {
      b : 678,
      c : 789
    }
    // // 后面的参数如果有相同的属性会将前一个参数的对应属性覆盖掉，第一个参数是接收属性的对象
    const result = Object.assign(target,sourse1,sourse2);
    console.log(target);
    // 判断是否是同一个对象，结果的确是同一个
    console.log(target === result);

• 复制一个对象单独存储对象的复制内容，不更改原对象的任何数据

// 复制对象
    function fun(obj){
      // 内部更改时，不要更改掉外部的对象
      const newObj = Object.assign({},obj)
      newObj.name = 'tom';
      console.log(newObj);
    }
    const obj = {
      name : 'jack',
      age : 18
    }
    fun(obj)
    console.log(obj)

• 应用实例：接收对象数据options

    // 应用，在options对象接收参数的时候可以简化
    function Block(options) {
      Object.assign(this,options)
    }
    const block1 = new Block({width:100,height:100,x:1,y:1});
    console.log(block1);

直接通过Object.assign方法将数据传入this，可以直接读取出来

Object.is

• 判断两个值是否相等

了解为主，编程中主要还是使用==和===

Class类

class Person{
      constructor (name,age){
        this.name = name;
        this.age = age;
      }
      sayHi (){
        console.log(`hi,my name is ${this.name}`)
      }
    }
    const p1 = new Person("ii",18);
    console.log(p1);
    p1.sayHi();

优化了构造函数，可以用class的方法直接定义一个构造函数，对象里的函数方法也可以直接声明，不需要放在外面用原型声明

静态方法static

• ES2015中添加了新的关键词static

 // 静态方法
    class Person {
      constructor (name, age) {
        this.name = name;
        this.age = age;
      }
      sayHi () {
        console.log(`hi,my name is ${this.name}`)
      } 
      static create (name,age) {
        // console.log(this) //类型里的静态方法的this指向的是类型自己
        return new Person(name,age)
      }     
    }
    const p1 = Person.create("zs",19)
    console.log(p1)

可以将构造函数下的创建实例写作静态方法写在类型里面，如上所示，在外面直接调用就行了，注意的是类型里的静态方法的this指向的是类型自己

类的继承

// 类之间的继承
    class Person {
      constructor (name, age) {
        this.name = name;
        this.age = age;
      }
      sayHi () {
        console.log(`hi,my name is ${this.name}`)
      }   
    }
    class Student extends Person {
      constructor(name,age,number){
        super(name,age);//从父类继承的属性
        this.number = number;
      }
      hello(){
        super.sayHi();
        console.log(`学号是 ${this.number}`);
      }
    }
    const s1 = new Student("li",18,101);
    s1.hello();

constructor内部要用父类的属性时，要用super来调用

Set全新数据结构

• 添加数据到Set集合

 const s = new Set();
    // add本身返回的就是自身，所以可以进行链式调用，另外
    // ，Set内要是有重复的值就会被直接忽略掉
    s.add(1).add(2).add(3).add(4).add(2);
    console.log(s);

• 遍历集合的数据

// 遍历集合的数据
    s.forEach(i => console.log(i));
    for (let i of s) {
      console.log(i);
    }

• 查看集合长度有多少

    console.log(s.size)

• 查看集合中是否有指定的值

    console.log(s.has(4));

• 删除掉某个值，成功返回true，失败返回false

    console.log(s.delete(3));
    console.log(s);

• 删除所有，清空集合

    s.clear()
    console.log(s);

• 数组去重，去重原理是set不含重复的数据
  去重完毕之后转回数组也有俩个办法

 const arr = [1,2,3,3,4,5,6,6,7,7,8];
    // 转回数组
    // const b = Array.from(new Set(arr));
    // 通过...展开数组
    const b = [...new Set(arr)];
    console.log(b);

Map数据结构

 //一一对应
    const map = new Map();
    const a = { a : 1 };
    const b = { b : 2};
    map.set(a,100);
    map.set(b,200)
    console.log(map);
    console.log(map.get(a));

    // 遍历map
    map.forEach((value,key) =>{
      console.log(key,value);
    })
    // map.has(); //判断有没有某个键
    console.log(map.has(a));
    console.log(map.has(b));
    // map.delet(); //删除某个键
    console.log(map.delete(a));
    console.log(map);
    // map.clear(); //清空所有
    map.clear()
    console.log(map);

Symbol数据类型

• 为了解决命名重复冲突的问题，Symbol出现了，作用就是表示一个独一无二的值
• 还有的作用就是给对象添加一个外面不可访问到的私有属性，对象添加属性，都用Symbol()作为属性名是不会出现覆盖现象的
  
  
  最主要的作用就是为对象添加独一无二的属性标识符

Symbol补充

• Symbol内置一个for方法，内置的参数一旦相同，两个变量就会是一样的数据

// Symbol内有个for方法，内置的参数一旦相同，就不再是独一无二的变量了
    // 另外参数如果不是字符串类型，就会自动转为字符串类型
    const a = Symbol.for(true)
    const b = Symbol.for('true')
    console.log(a === b)

• toStringTag常量

 const obj = {
      [Symbol.toStringTag]: "XObject"
    }
    console.log(obj.toString())

自定义symbol的tostring的内容

• getOwnPropertySymbols()方法
  for in这个循环是拿不到symbol的值，object.keys也不行，JSON.stringify也拿不到symbol的数据，但是getOwnPropertySymbols可以拿到，但是只能拿到symbol，拿不到普通属性名

console.log(Object.getOwnPropertySymbols(obj))

for of遍历

• 将来就是遍历所有数据结构的统一方式
• 遍历普通数组

    const arr = [100, 200, 300, 400]

    // for(const item of arr){
    //   console.log(item)
    // }

    // 能够打断遍历，自定义打断位置，forEach不行
    for(const item of arr){
      console.log(item)
      if(item >= 200){
        break;
      }

• 遍历Set集合

    // 遍历Set
    const s = new Set(['foo','bar','baz'])
    for (const item of s){
      console.log(item);
    }

• 遍历Map

    const m = new Map()
    m.set("foo",1)
    m.set("bar",2)
    for(const [key,value] of m){
      console.log(key,value);
    }

现阶段不建议使用for of遍历对象

ES2015其他内容

• 可迭代接口
• 迭代器模式
• 生成器
• Proxy 代理对象
• Reflect 统一的对象操作 API
• Promise 异步解决方案
• ES Modules 语言层面的模块化标准
  后面会逐一解锁对应的内容

ES2016

• 更新了数组的includes()方法，判断某个数据在数组中是否存在

    const arr = [1,true,NaN,23,'hello']
    console.log(arr.includes(NaN))

结果

• 更新了指数运算符**

console.log(2 ** 10)