1、扩展运算符与剩余操作符都是以三点开头的操作符，二者长的很像，只是在用法上有些差别。它们已经被 ES6 数组支持，能解决很多之前 arguments 解决起来很麻烦的问题。

2、扩展运算符

这三个点(…)在 React 干嘛用的？

主题: React
难度: ⭐⭐⭐
... 在React（使用JSX）代码中做什么？它叫什么？

<Modal {...this.props} title='Modal heading' animation={false}/>
这个叫扩展操作符号或者展开操作符，例如，如果this.props包含a：1和b：2，则

<Modal {...this.props} title='Modal heading' animation={false}>
等价于下面内容：

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

• 扩展语法允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展

• 字面量的扩展

//数组字面量扩展
let test = [3,4,5],
    copyTest = [...test], // copyTest [3,4,5]
    extTest = [1,2,...test]; //extTest [1,2,3,4,5]
//对象字面量扩展
let obj = {a: 1, b: 2},
    copyObj = {...obj}, //
    extObj = {...obj, c: 3};

• 函数调用 作为实参

 function myFunction(x, y, z) {
    return x+y+z;
 }
var args = [0, 1, 2];
myFunction(...args); //3

• 替代apply方法的参数使用数组的形式

Array.prototype.push.apply(arr) //=>// Array.prototype.push(...arr)

• 合并数组、对象

let array1 = [1,2,3], array2 = [4,5,6],array3 = [...array1, ...array2];

3、rest剩余参数（rest parameter）

• 剩余参数（rest parameter）语法允许我们将一个不定数量的参数表示为一个数组,

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}
 

alert(sortRestArgs(5,3,7,1)); // 弹出 1,3,5,7

听起来感觉和arguments他有点相似：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments 对象不是一个真实的数组,而剩余参数是真实的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach，pop。
• arguments 对象对象还有一些附加的属性 (比如callee属性)。
  还可以和结构赋值一起使用

var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]

4、扩展运算和rest参数注意

• 对于三个点号…，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。
  注意

• 在等号赋值或for循环中，如果需要从数组或对象中取值，尽量使用解构。

• 在自己定义函数的时候，如果调用者传来的是数组或对象，形参尽量使用解构方式，优先使用对象解构，其次是数组解构。代码可读性会很好。

• 在调用第三方函数的时候，如果该函数接受多个参数，并且你要传入的实参为数组，则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。

• rest运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用。