展开运算符和剩余运算符

ES6中（…）三个点的含义：展开运算符和剩余运算符

都是ES2015新增的运算符

展开运算符（…）

展开运算符可将数组展开置于目标数组

let arr = ['1','哈哈哈','good'];
console.log(arr);
console.log(...arr);
console.log(0,'hi',...arr);

输出得到结果：
[ '1', '哈哈哈', 'good' ]
1 哈哈哈 good
0 hi 1 哈哈哈 good

1、在函数调用时，在参数中，将具有Iterator接口的对象展开。

2、在数组创建时，将具有Iterator接口的对象展开。

3、创建对象直接量时，将对象直接量按照键值对方式展开（ES2018新增）；其实进行了键值对拷贝操作（数组和对象的拷贝都属于浅拷贝，只会遍历一层）

剩余运算符（…）

参数是函数参数上下文中的一个名词，但是剩余运算符并非只用在函数参数上下文，在函数中通过剩余运算符可以构成剩余参数，但是不能说所有剩余运算符构成的都是剩余参数。
剩余运算符是将剩余多个值压缩收集起来生成一个数组作为参数数组置于目标数组，而不是展开置于目标数组。

function fn(a,b,...arr){
    console.log(a);
    console.log(b);
    console.log(arr);
}
fn(1,2,3,4);

输出结果：
1
2
[ 3, 4 ]

如果将剩余运算符置于中间，则会出现如下报错。根据报错提示可以看到，剩余参数必须是最后一个参数

function fn(a,...arr,b){
    console.log(a);
    console.log(b);
    console.log(arr);
}
fn(1,2,3,4);

输出结果：
function fn(a,...arr,b){
                    ^
SyntaxError: Rest parameter must be last formal parameter

剩余运算符应用于对象结构赋值中。
这是ES2018对剩余运算符功能得扩展，在此之前只能压缩生成数组，不能生成对象。

以上就是展开运算符和剩余运算符的简单用法。