ES6常用特性

ES6常用特性

ES6简介:

ES6ECMAJavaScript制定的第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时,无法得知目前进展到哪一个阶段
  • 实例状态变为resolvedrejected时,会触发then()绑定的回调函数
  • resolve()reject()的执行总是晚于本轮循环的同步任务
  • then()返回新实例,其后可再调用另一个then()
  • then()运行中抛出错误会被catch()捕获
  • reject()的作用等同于抛出错误
  • 实例状态已变成resolved时,再抛出错误是无效的,不会被捕获,等于没有抛出
  • 实例状态的错误具有冒泡性质,会一直向后传递直到被捕获为止,错误总是会被下一个catch()捕获
  • 不要在then()里定义rejected状态的回调函数(不使用其第二参数)
  • 建议使用catch()捕获错误,不要使用then()第二个参数捕获
  • 没有使用catch()捕获错误,实例抛错不会传递到外层代码,即不会有任何反应
  • 作为参数的实例定义了catch(),一旦被rejected并不会触发Promise.all()catch()
  • Promise.reject()的参数会原封不动地作为rejected的理由,变成后续方法的参数

你可能感兴趣的:(ES6常用特性)