ES6拓展运算符的常用场景

之前在学习vuex的辅助函数mapState时候，开始看了一下拓展运算符，当时理解的过于浅显，并写了一片浅显的文章

最近项目空闲期，想认真总结一下这个语法糖/三个点/拓展运算符

拓展运算符的含义

将一个数组转为用逗号分隔的参数序列

该运算符主要用于函数调用。

从最浅显的外表来看，就是脱掉数组的外套（数组的

[]

就很像外套吧。。。），只留下里面的内容，用法就是把里面的内容混淆到其他对象中去；

比如：

var a =[{d:1}]//去掉外套就是 {d:1}
var b = {...a,e:2}
//b  ={{d:1},{e:2}}

好了，下面开始正式的去上实例：

伪数组/类数组转为真正的数组

var divs = document.getElementsByClassName('.div');
//大家都知道divs是一个伪数组
var divArray = [...divs]

注意： 对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。

比如：

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
//这样的就不行，这时，可以改为使用Array.from方法将arrayLike转为真正的数组。

克隆数组

var a=[1,2]
var b =[...a]
//b    (2) [1, 2]

合并数组，或者将a数组混入到b数组中去

var a=[1,2]
var b = [8,...a,9]
//b   (4) [8, 1, 2, 9]

字符串转数组

var s = 'nice'
var a = [...s]
//a   (4) ["n", "i", "c", "e"]

与解构赋值结合，生成数组

const [a,...b]=[1,2,3]
//a=1,b=[2,3]

或者在函数里面某个参数没有传值的情况下，就赋值空数组

function a ([m,...n]){console.log(m,n)}
a([1])
//打印出  1 []

具有 Iterator 接口的对象:Map 和 Set 结构，Generator 函数

扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。