Rest 参数(剩余参数)

Rest 参数（剩余参数语法）可以把一个不定数量的参数表示为一个数组。

函数的最后一个命名参数以三个点...为前缀，则它就会成为一个由剩余参数组成的真数组。

例如，我们需要把所有的参数都放到数组 args 中：

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

或者获取前面几个参数作为变量，并将剩余的参数收集起来。：

function(a, b, ...theArgs) {
  // ...
}

注意!!!

Rest 参数必须放到参数列表的末尾

Rest 参数会收集剩余的所有参数，因此下面这种用法没有意义，并且会导致错误：

function f(arg1, ...rest, arg2) { // arg2 在 ...rest 后面？！
  // error
}

...rest 必须处在最后。

Rest 参数和 arguments 的区别

在过去，JavaScript 中没有 rest 参数，而使用 arguments 是获取函数所有参数的唯一方法。

但缺点是，尽管 arguments 是一个类数组，也是可迭代对象，但它终究不是数组。它不支持数组方法，因此我们不能调用 arguments.map(…) 等方法。

Spread 语法(展开语法)

Spread 语法(展开语法) 可以将数组表达式或者string在语法层面展开；将对象表达式按key-value的方式展开。

以 Math.max 为例：

let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5（spread 语法把数组转换为参数列表）

还可以通过这种方式传递多个可迭代对象：

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

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

// 连接多个数组
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

构造字面量对象时使用展开语法

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }

参考

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters
• https://zh.javascript.info/rest-parameters-spread#spread-syntax
• https://www.yuque.com/cuggz/interview/vgbphi#4fa0a3b12c5a4057fa65ef2ce55eb7fa