学习笔记（四）—— ECMAScript 新特性

let / const 与块级作用域

• 作用域
  • 全局作用域
  • 函数作用域
  • 块级作用域
    • 使用 let / const 定义变量
    • {} 括起来的胃块级作用域
• let不会像var出现变量提升
• const
  • 声明时必须初始化
  • 只读
    • 不允许重新赋值（改变内存指向）
    • 但是可以改变引用类型的属性值（堆内存内的内容）

数组的解构

• 根据数组位置匹配提取
• 可以使用...rest获取剩余内容，得到一个剩余元素组成的数组
• 没匹配到的成员会返回undefined，可以指定默认值，只在undefined时生效

对象的解构

• 根据属性名匹配提取
• 没匹配到的成员会返回undefined，可以指定默认值，只在undefined时生效
• 可以对提取的属性进行重命名
  • 在属性名后添加冒号，冒号后面接重命名的内容
  • const {a : b} = object，提取object.a属性，并重命名为b

模板字符串

• 使用反引号括起来
• 支持直接换行
• 可以使用 ${} 嵌入变量或者JS表达式

标签模板

用于对模板字符串进一步加工

• 函数名标签 + 模板字符串
• 函数接收的第一个参数为 模板字符串经过 ${} 表达式分割后的字符串数组
• 函数剩余的其他参数，依次是模板字符串中${} 表达式的值
• 标签模板的返回值为标签函数对应的返回值

字符串的扩展方法

• includes
• startsWith
• endsWith
• ...

参数默认值

• 参数 = xxx 方式设置默认值
• 参数接收到的值为undefined时生效（未传值）
• 提供默认值的参数需在最后

剩余参数

• ...rest 获取剩余参数
  • 得到剩余参数组成的一个数组
  • 未传参数时获得一个空数组[]
• 只能出现在参数最后
• 只能使用一次

展开操作

• ...array 展开数组
• ...object 展开对象
• 浅拷贝
  • [...array]
  • {...object}

箭头函数

• () => ()
• this指向函数定义时所在的对象，不会随调用改变

对象字面量的增强

• 变量名与属性名一致，可以省略变量名与冒号
• 属性值为函数，可以简化为 fn() {}
• 计算属性名
  • 属性名使用方括号[]
  • 方括号中可以使用表达式，动态设置属性名

Object.assign(target, source1, source2, ...)

• 从后向前依次合并多个源对象属性到目标对象
• 返回目标对象（即第一个参数，返回对象与第一个对象相等===）
• 应用场景
  • 创建一个属性相同的新对象 Object.assign({}, object)，等同于{...object}
  • 赋默认值 Object.assign(options, defaultOptions)

Object.is(value1, value2)

• +0 与 -0
  • +0 === -0 // true
  • Object.is(+0, -0) // false
• NaN
  • NaN === NaN // false
  • Object.is(NaN, NaN) // true

Proxy 代理器

• new Proxy(targetObject, handlerObject)
• 可以但不限于捕获对象的数据访问（get、set），实现数据响应及双向数据绑定
• 对比Object.defineProperty()
  • 可以监视除读取、写入外更多的对象操作
  • 更好的支持数组对象的监视
  • 以非侵入的方式监管了对象的操作

Reflect

统一对象的API操作

• 静态对象，不能使用new 创建
• 封装了对对象的底层操作
• 与Proxy可以代理的操作一一对应
• 可以使用Reflect在Proxy中调用对象的默认行为

Promise

解决传统异步编程中回调函数嵌套过深的问题

class类

类似面向对象语言中的类定义

• 实例方法 vs 静态方法
  • 实例方法
    • 由new返回的实例调用
    • this指向实例
  • 静态方法
    • 由类直接调用
    • static关键字声明
    • this指向类本身
• 继承
  • ES2015之前使用原型模拟实现继承
  • ES2015 class使用extends继承
  • 使用super关键字访问父类的属性、方法与构造函数

Set

存放不重复的数据的集合，可以用来去重

• 使用add添加，delete删除，clear清除
• 可以链式调用
• 可以使用size获取集合大小
• 遍历
  • 可以使用for...of遍历（意味着实现了Iterator）
  • 可以使用forEach
  • 可以使用展开操作...

Map

• Key-Value 键值对结构数据集合
• 可以使用任意类型作为Key，Object只能使用String类型作为Key
• 使用set设值、get取值、delete删除、clear清除
• 遍历类似Set

Symbol

新类型，用于创建唯一值

• 不使用new创建，直接Symbol()直接创建
• Symbol() === Symbol() // false
• 可以传入描述字符串 Symbol('aaa')
• 可以作为对象的key
  • 用来实现对象的私有成员
• Symbol.for
  • 接收一个字符串，返回一个全局注册的Symbol，如果传入的不是字符串，会toString转换为字符串
  • Symbol.for(true) === Symbol.for('true') // true
• Symbol会被Object.keys()、JSON.stringify()等忽略
• 可以使用Object.getOwnPropertySymbols()、等访问Object中的Symbol类型的Key

for...of循环

作为遍历所有数据结构的统一方式

• 可以遍历所有实现了Iterator迭代器接口的对象
  • Array
  • Map
  • Set
  • Object.keys()/Object.values()/Object.entries()
• 其他遍历方法
  • forEach遍历无法中断
  • for...in 只能遍历对象
  • for
  • while
  • array.map
  • ...展开操作

实现迭代器接口

const obj = {
    store: [1, 2, 3],
    [Symbol.iterator](){
        const self = this
        let index = 0
        return {
            next() {
                return {
                    value: self.store[index],
                    done: index++ >= self.store.length
                }                
            }
        }
    }
}

迭代器模式

提供统一的数据遍历接口，只需要实现Iterator接口

Generator生成器

• 使用生成器函数实现Iterator迭代器接口

  const obj = {
      store: [1, 2, 3],
      [Symbol.iterator]: function * (){
          const self = this
          for (const item of self.store) {
              yield item
          }
      }
  }
  

ES Modules

ES2015 模块化标准

ES2016

• Array.prototype.includes
• 指数运算符 **

ES2017

• Object.values()
• Object.entries()
• Object.getOwnPropertyDescriptor
• String.prototype.padStart
• String.prototype.padEnd
• 允许函数参数添加尾逗号
• async / await