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:将状态从
未完成
变为失败
,在异步操作失败时调用,并将异步操作的错误作为参数传递出去
- resolve:将状态从
-
方法
-
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
的理由,变成后续方法的参数