ES6常用特性

ES6常用特性

ES6简介：

ES6是ECMA为JavaScript制定的第6个标准版本，ECMAscript 2015是在2015年6月发布ES6的第一个版本。以此类推，ECMAscript 2016是ES6的第二个版本，每年6月发布一版。ES6目前涵盖了ES2015(ES6.0)、ES2016(ES6.1)、ES2017(ES6.2)、ES2018(ES6.3)、ES2019(ES6.4)。

ES6更新的主要内容：

表达式：声明、解构赋值

内置对象：字符串扩展、数值扩展、对象扩展、数组扩展、函数扩展、正则扩展、Symbol(符号)、Set、Map、Proxy（代理）、Reflect（映射）

语句与运算：Class、Module、Iterator（迭代）

异步编程：Promise、Generator（发生器）、Async（异步）

声明

• const命令：声明常量 只能是唯一的

• let命令：声明变量

• 作用域

  • 全局作用域
  • 函数作用域：function() {}
  • 块级作用域：{}

• 作用范围

  • var命令在全局代码中执行
  • const命令和let命令只能在代码块中执行

• 赋值使用

  • const命令声明常量后必须立马赋值
  • let命令声明变量后可立马赋值或使用时赋值

const命令和let命令不存在变量提升

扩展运算符(…)：转换数组为用逗号分隔的参数序列 es2018也可以作用于对象了

扩展应用

• 克隆数组：const arr = [...arr1]
• 合并数组：const arr = [...arr1, ...arr2]
• 拼接数组：arr.push(...arr1)
• 代替apply：Math.max.apply(null, [x, y]) => Math.max(...[x, y])
• 转换字符串为数组：[..."hello"]
• 转换类数组对象为数组：[...Arguments, ...NodeList]
• 转换可遍历对象为数组：[...String, ...Set, ...Map, ...Generator]
• 与数组解构赋值结合：const [x, ...rest/spread] = [1, 2, 3]
• 计算Unicode字符长度：Array.from("hello").length => [..."hello"].length

箭头函数：

无参数：() => {}

单个参数：x => {}

多个参数：(x, y) => {}

解构参数：({x, y}) => {}

嵌套使用：部署管道机制

this指向固定化

• 并非因为内部有绑定this的机制，而是根本没有自己的this，导致内部的this就是外层代码块的this
• 因为没有this，因此不能用作构造函数

Set

• 定义：类似于数组的数据结构，成员值都是唯一且没有重复的值
• 声明：const set = new Set(arr)
• 入参：具有Iterator接口的数据结构
• 属性
  • constructor：构造函数，返回Set
  • size：返回实例成员总数
• 方法
  • add()：添加值，返回实例
  • delete()：删除值，返回布尔值
  • has()：检查值，返回布尔值
  • clear()：清除所有成员
  • keys()：返回以属性值为遍历器的对象
  • values()：返回以属性值为遍历器的对象
  • entries()：返回以属性值和属性值为遍历器的对象
  • forEach()：使用回调函数遍历每个成员

应用场景

• 去重字符串：[...new Set(str)].join("")
• 去重数组：[...new Set(arr)]或Array.from(new Set(arr))
• 集合数组
  • 声明：const a = new Set(arr1)、const b = new Set(arr2)
  • 并集：new Set([...a, ...b])
  • 交集：new Set([...a].filter(v => b.has(v)))
  • 差集：new Set([...a].filter(v => !b.has(v)))
• 映射集合
  • 声明：let set = new Set(arr)
  • 映射：set = new Set([...set].map(v => v * 2))或set = new Set(Array.from(set, v => v * 2))

Map

• 定义：类似于对象的数据结构，成员键可以是任何类型的值
• 声明：const set = new Map(arr)
• 入参：具有Iterator接口且每个成员都是一个双元素数组的数据结构
• 属性
  • constructor：构造函数，返回Map
  • size：返回实例成员总数
• 方法
  • get()：返回键值对
  • set()：添加键值对，返回实例
  • delete()：删除键值对，返回布尔值
  • has()：检查键值对，返回布尔值
  • clear()：清除所有成员
  • keys()：返回以键为遍历器的对象
  • values()：返回以值为遍历器的对象
  • entries()：返回以键和值为遍历器的对象
  • forEach()：使用回调函数遍历每个成员

重点难点

• 遍历顺序：插入顺序
• 对同一个键多次赋值，后面的值将覆盖前面的值
• 对同一个对象的引用，被视为一个键
• 对同样值的两个实例，被视为两个键
• 键跟内存地址绑定，只要内存地址不一样就视为两个键
• 添加多个以NaN作为键时，只会存在一个以NaN作为键的值
• Object结构提供字符串—值的对应，Map结构提供值—值的对应

Promise

• 定义：包含异步操作结果的对象

• 状态

  • 进行中：pending
  • 已成功：resolved
  • 已失败：rejected

• 特点

  • 对象的状态不受外界影响
  • 一旦状态改变就不会再变，任何时候都可得到这个结果

• 声明：new Promise((resolve, reject) => {})

• 出参

  • resolve：将状态从未完成变为成功，在异步操作成功时调用，并将异步操作的结果作为参数传递出去
  • reject：将状态从未完成变为失败，在异步操作失败时调用，并将异步操作的错误作为参数传递出去

• 方法

  • then()

    ：分别指定resolved状态和rejected状态的回调函数

    • 第一参数：状态变为resolved时调用
    • 第二参数：状态变为rejected时调用(可选)

  • catch()：指定发生错误时的回调函数

  • Promise.all()

    ：将多个实例包装成一个新实例，返回全部实例状态变更后的结果数组(

    齐变更再返回

    )

    • 入参：具有Iterator接口的数据结构
    • 成功：只有全部实例状态变成resolved，最终状态才会变成resolved
    • 失败：其中一个实例状态变成rejected，最终状态就会变成rejected

  • Promise.race()：将多个实例包装成一个新实例，返回全部实例状态优先变更后的结果(先变更先返回)

  • Promise.resolve()

    ：将对象转为Promise对象(等价于

    new Promise(resolve => resolve())
    

    )

    • Promise实例：原封不动地返回入参
    • Thenable对象：将此对象转为Promise对象并返回(Thenable为包含then()的对象，执行then()相当于执行此对象的then())
    • 不具有then()的对象：将此对象转为Promise对象并返回，状态为resolved
    • 不带参数：返回Promise对象，状态为resolved

  • Promise.reject()：将对象转为状态为rejected的Promise对象(等价于new Promise((resolve, reject) => reject()))

应用场景

• 加载图片
• AJAX转Promise对象

重点难点

• 只有异步操作的结果可决定当前状态是哪一种，其他操作都无法改变这个状态
• 状态改变只有两种可能：从pending变为resolved、从pending变为rejected
• 一旦新建Promise对象就会立即执行，无法中途取消
• 不设置回调函数，内部抛错不会反应到外部
• 当处于pending时，无法得知目前进展到哪一个阶段
• 实例状态变为resolved或rejected时，会触发then()绑定的回调函数
• resolve()和reject()的执行总是晚于本轮循环的同步任务
• then()返回新实例，其后可再调用另一个then()
• then()运行中抛出错误会被catch()捕获
• reject()的作用等同于抛出错误
• 实例状态已变成resolved时，再抛出错误是无效的，不会被捕获，等于没有抛出
• 实例状态的错误具有冒泡性质，会一直向后传递直到被捕获为止，错误总是会被下一个catch()捕获
• 不要在then()里定义rejected状态的回调函数(不使用其第二参数)
• 建议使用catch()捕获错误，不要使用then()第二个参数捕获
• 没有使用catch()捕获错误，实例抛错不会传递到外层代码，即不会有任何反应
• 作为参数的实例定义了catch()，一旦被rejected并不会触发Promise.all()的catch()
• Promise.reject()的参数会原封不动地作为rejected的理由，变成后续方法的参数