spread和剩余参数rest的区别

当我们在代码中看到 "..." 时，它要么是 rest 参数，要么就是 spread 语法。

有一个简单的方法可以区分它们：

• 若 ... 出现在函数参数列表的最后，那么它就是 rest 参数，它会把参数列表中剩余的参数收集到一个数组中。
• 若 ... 出现在函数调用或类似的表达式中，那它就是 spread 语法，它会把一个数组展开为列表。

使用场景：

• Rest 参数用于创建可接受任意数量参数的函数。

  例如，我们需要把所有的参数都放到数组 args 中：（Rest 参数必须放到参数列表的末尾）

function sumAll(...args) { // 数组名为 args
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

 

• Spread 语法用于将数组传递给通常需要含有许多参数的列表的函数。

      例如，我们需要把数组元素传递给Math.max()函数作为函数的参数列表

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

 spread 语法还可以与常规值结合使用（不必像剩余参数一定得放在最后面）：

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

还可以使用 spread 语法将字符串转换为字符数组：

let str = "Hello";

alert( [...str] ); // H,e,l,l,o

spread 语法也可以进行浅拷贝。（和Object.assign()做着同一件事情）

let arr = [1, 2, 3];
let arrCopy = [...arr]; // 将数组 spread 到参数列表中
                        // 然后将结果放到一个新数组

// 两个数组中的内容相同吗？
alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true

// 两个数组相等吗？
alert(arr === arrCopy); // false（它们的引用是不同的）

// 修改我们初始的数组不会修改副本：
arr.push(4);
alert(arr); // 1, 2, 3, 4
alert(arrCopy); // 1, 2, 3

也可以通过相同的方式来复制一个对象：

let obj = { a: 1, b: 2, c: 3 };
let objCopy = { ...obj }; // 将对象 spread 到参数列表中
                          // 然后将结果返回到一个新对象

// 两个对象中的内容相同吗？
alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true

// 两个对象相等吗？
alert(obj === objCopy); // false (not same reference)

// 修改我们初始的对象不会修改副本：
obj.d = 4;
alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}

这种方式比使用 let arrCopy = Object.assign([], arr); 来复制数组，或使用 let objCopy = Object.assign({}, obj); 来复制对象写起来要短得多。因此，只要情况允许，我们更喜欢使用它。