持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

JavaScript中有一个分水岭ES6，ES6不止ES6，所有ES6之后的(包含ES6)都统称为ES6，ES6的新特性共有以下这些：

• const/let
• 解构赋值
• 模板字符串
• 箭头函数
• 对象扩展
• Set、Map数据结构
• Promise、async/await、Generator
• Class
• Symbol
• 模块化Module
• rest运算符
• 扩展运算符

这里，我们挑扩展运算符跟rest运算符来讲一讲，说说他们之间的区别！

扩展运算符-> ...

以函数add为例，如果我们有一个函数接受三个形参，并将他们相加

function add(a,b,c){
    return a+b+c;
}

当我们的实参是一个包含三个元素的数组时，以下分别是ES5的调用方式跟ES6使用扩展运算符的方式:

const arr = [1,2,3]

//es5方案一
console.log(add(arr[0],arr[1],arr[2])); // 6

//es5方案二
console.log(add.apply(null,arr));


//es6的扩展运算符
console.log(add(...arr)); //6

这里我们可以明显的看出扩展运算符的好处，无需我们从数组内一个一个取出，自动的将数组解构出来了。

扩展运算符还可以用在数组或对象的拷贝

var obj1 = {
    a: 1,
    b: 2
};

var obj2 = {...obj1};

console.log(obj1 === obj2); // false

obj2.c = 3; // 修改obj2不会影响obj1
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2, c: 3}

这里需要注意的点: 扩展运算符拷贝是浅拷贝，只对数组或对象的第一层结构起作用

rest运算符

rest运算符与扩展运算符都是...，但是使用起来却不一样，可以简单的理解为剩余运算符和扩展运算符是相反的，扩展运算符是把数组或对象进行展开，而剩余运算符是把多个元素‘合并’起来。

rest运算符主要用在函数的形参上，用于不定参数时使用，可以理解为arguments的替代品，因此ES6开始不再使用arguments对象

const add = (...args) => args.reduce((a, b) => a + b);

add(1,2,3) //6

rest运算符搭配解构赋值

var [one, ...arr] = [1, 2, 3, 4];

// 这里把...arr整体看成一个元素
console.log(one) // 1
console.log(...arr) // [2, 3, 4]

总结

... 既是rest运算符又是扩展运算符，总结起来就是：三点放在形参或者等号左边为rest运算符;放在实参或者等号右边为扩展运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。