ES6的扩展运算符（...）---数组篇

哈喽，大家好，又一周过去了，时间过得好快，各位宝宝这一周有没有进步呢？有没有更了解自己呢？嗯哼，我有点心虚……o(╯□╰)o

speak in cheap!

接着上周的ES6的扩展运算符，我们这周主题是数组与扩展运算符（...）;

与数组一起扩展运算符的作用其实就是将数组转换成用逗号分隔的参数序列；

let a =[1,2,...[3,4,5]]
//a =[1,2,3,4,5];

用于函数的参数；

let a=[1,2,3]
a.push(...[4,5,6]);
// a = [1,2,3,4,5,6]

根据它的特性，扩展运算符可用于：

1.数组的解构赋值

const [first,...rest] = [1,2,3,4,5];
first //1
rest //[2,3,4,5]

const [first,...rest] = [];
first //undefined
rest //[]
const [first,...rest] = ['foo'];
first //'foo'
rest //[]

注意：

扩展运算符必须放在最后，否则报错

const [...a,b] = [1,2,3,4,5,6];
//报错
const [first ,...middle,last] = [1,2,3,4,5];
//报错

2.数组的合并

// ES5
[2,3].concat([7,8]);
// ES6
[2,3,...[7,8]];

3.将字符串转成真正的数组

var a = [...'hello']
// a =[ "h", "e", "l", "l", "o" ]

使用上面的写法可以正确识别32位Unicode字符串的长度；

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

4.将具有Iterator接口的对象，转为真正的数组。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

nodeList是一个类数组，使用扩展运算符可以将类数组转换成真正的数组；

原型部署了iterator的数据有数组、类似数组的对象、Map、Set;

为什么对象没有部署iterator接口呢？原因如下：

对象的属性哪个先遍历，哪个后遍历，需要操作者手动指定;遍历遍历器是一种线性处理，给对象部署iterator接口相当于对非线性数据结构进行一种线性转换；还有就是给对象部署iterator接口不是很必要，因为Map有iterator接口可以弥补这一点。

总之...和数组一起有三种用法：

(1) 展开运算；例如数组合并、作为函数参数、字符串转数组

(2) 剩余运算；数组的解构赋值

(3) 转数组：将具有iterator接口的对象转换成真正的数组

所以关于扩展运算符，到这里只是了解了而已，之后还需要深入学习，共同进步吧，各位宝宝们！

愿我们有能力不向生活缴械投降---Lin