学习笔记（四）—— 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