扩展运算符「spread」的交谈

原文连接 - 航洋无声 - Github

扩展运算符，看起来和 rest 参数 外观类似，也是三个点「...」，
不过和 rest 参数功能但是不同呢

扩展运算符号，分二种状况

1. iterable「通常状况为数组」
2. enumerable「通常状况为对象」

在标准的 ES2015 中，只有针对 iterable 数据实现了扩展运算符
它把 iterable 数据的数据序列转换为用 逗号分割的参数序列

好比：

let array = [5, 12]
let arrayCopy = [11, ...array]
// 此行代码相似于：let arrayCopy = [11, 5, 12]
// arrayCopy ==> [11, 5, 12]

console.log(...[5, 12])
console.log(5, 12)
// 上面 2 行代码意义同样
// 输出结果都是是：5 12

通过上面的 2 个列子，
应该能更好的理解「扩展运算符的结果是 逗号分隔的参数序列」的含义

不过有个须要注意的点：
非 iterable 数据执行扩展运算符，会报错

在 ES7 的 某个提案 中，
讲扩展运算符引入 enumerable 数据

好比：

let obj = {name: 'hangyangws'}
let objCopy = {...obj}
console.log(objCopy) // 输出：{name: 'hangyangws'}

其实 enumerable 数据的扩展运算符底层实现是利用了 Object.assign

Object.assign(target, ...sources) 咱们比较熟悉，有 2 个特色：

1. sources 参数若是是「原始类型」会被包装为「对象」
2. sources 参数若是是 null 和 undefined 会被忽略

好比：

Object.assign({}, null) // 结果为：{}
Object.assign({}, undefined) // 结果为：{}

Object.assign({}, 0) // 结果为：{}
Object.assign({}, 'FJ') // 结果为：{0: "F", 1: "J"}
// 因此有个点能够注意一下：
// 只有字符串的包装对象才可能有自身可枚举属性
// 对于「数字」，结果和 null、undefined 相似

既然扩展运算符有 2 种状况，那么 JS 解释器怎么知道使用哪种？
因此扩展运算符会根据代码的具体的 执行上下文 判断

好比：

let test = [...null]
// 报错：null is not iterable

let test = {...null}
// test ===> {}