ES6新特性

作者: amanohina | 来源:发表于2020-12-22 00:34 被阅读0次

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的基础上增加了一个【只读】效果

<script>
    const name = "zsd";
    name = "ls";
  </script>

会报错，报错内容为：

改变量也不可再更改了

    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);

对应的结果

对象的解构

<script>
    // 对象解构
    const obj = { name: 'zs', age: 18 };
    // const { name } = obj;
    // console.log(name);

    const name = "tom";
    // 避免冲突，使用一个新的变量名去接受数据
    const { name:newName = "jack"} = obj; //要是对象里没有name的数据，这个jack才会起效
    console.log(newName);
    console.log(name);
    // 使用解构的好处就是避免了代码书写的重复性麻烦，比如：
    const { log } = console;
    log("hello?");
  </script>

结果

模板字符串

<script>
    // 模板字符串
    const str = `this is 
    a \`string`
    console.log(str)

    const name = "tom"
    // 插值表达式，$(值)
    const str1 = `hey, ${name},${1 + 1},${Math.random()}`
    console.log(str1)

  </script>

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

模板字符串标签函数

<script>
    // 模板字符串标签函数
    const name = "zs"
    const gender = true
    function myTagFunc(strings, name, gender) {
      console.log(strings,name,gender)
      // 处理一下 性别
      const sex = gender ? "man" : "woman"
      return strings[0] + name + strings[1] + sex + strings[2]
    }
    const str = myTagFunc`hi, ${name} is a ${gender}`
    console.log(str)
  </script>

函数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

参考默认值

  <script>
    // 函数参数的默认值
    function foo(bar,enable = true){
      // enable = enable || true;
      // enable = enable === undefined ? true : enable;
      console.log('foo invoked enable:')
      console.log(enable);
    }
    foo('bar');
  </script>

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

剩余操作符

...操作符

<script>
    // 剩余参数
    function fun(n,...args) {
      console.log(args)
    }
    fun(1,2,3,4)
  </script>

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)

展开数组

箭头函数

<script>
    // 箭头函数 

    const plus = (a, b) => {
      console.log('plus invoked')
      return a + b
    }
    console.log(plus(1,2))
    
    const arr = [1,2,3,4,5,6,7]
    // const arr1 = arr.filter(function (item) {
    //   return item % 2
    // })
    // 用箭头函数制作数组筛选函数
    const arr1 = arr.filter(i => i % 2)
    console.log(arr1)
  </script>

结果

箭头函数的this

<script>
    // 箭头函数与 this
    const person = {
      name: "tom",
      // 当实际书写时，遇到了需要书写替换this的变量的时候，可以用箭头函数进行避免
      sayHi : function(){
        setTimeout(() => {
            console.log(`hi,my name is ${this.name}`)
        }, 1000);
      }
    }
    person.sayHi()
  </script>

对象字面量的增强

 <script>
    // 对象字面量增强
    // 可以在外面定义属性值，对象里面直接声明就可以用，属性值也存在
    const bar = "bar";
    const age = "age";
    const obj = {
      name : "tom",
      // bar : bar,
      bar,
      // 对象内部函数里的this是指向的对象本身
      sayHi() {
        console.log("hi");
        console.log(this);
      },
      // 也可以用中括号新建属性到对象字面量里，中括号内部是属性名，也可以用来更改属性值
      age,
      [age] : 18,
      [1+2] : 18
    }
    console.log(obj);
    obj.sayHi();
  </script>

结果

对象拓展方法

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

判断两个值是否相等

 <script>
    // 对象扩展方法
    // Object.is 方法
    console.log(
      Object.is(+0,-0),
      Object.is(NaN,NaN)
    )
  </script>

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

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)