JavaScript - 剩余运算符(Rest Operator)

有时，我们想要向函数传递任意数量的参数，或者想要从数组或对象中单独获取特定元素。在这种情况下，我们可以使用剩余运算符。

什么是剩余运算符?

剩余运算符 () 允许我们调用带有任意数量参数的函数，然后将多余的参数作为数组访问。剩余运算符还允许我们解构数组或对象。

带有函数参数的剩余运算符

定义函数时，可以使用剩余运算符获取数组中所有剩余的参数。此过程帮助我们传递任意数量的参数，而无需知道它们的数量。

代码片段

下面是在函数参数中使用剩余运算符的示例代码片段。我们将对传递给函数的所有数字求和。

function sum(...args) {
  let total = 0;
  for (let i of args) {
     total += i;
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5));  // 15
console.log(sum(1, 2, 3));  // 6

输出

15
6

剩余运算符与数组解构

如果您给定了一个数组，并且希望单独获取特定元素，并将其余元素放在一个单独的数组中，则可以使用剩余运算符。剩余运算符也有助于我们解构数组。

代码片段

下面是一个使用剩余运算符与数组解构的示例代码片段，用于分别获取第一个和第二个元素，并将其余元素放在一个单独的数组中。

let arr = [1, 2, 3, 4, 5];
let [first, second, ...rest] = arr;

console.log(first);  // 1
console.log(second);  // 2
console.log(rest);  // [3, 4, 5]

输出

1
2
[3, 4, 5]

剩余运算符与对象解构

现在，如果您希望将特定属性单独使用，并将其余属性放在单独的对象中，则可以使用剩余运算符来实现。剩余运算符也有助于我们解构对象。

代码片段

以下是使用剩余运算符与对象解构的示例代码片段，用于分别拥有第一个和第二个属性，并将其余属性放在单独的对象中。

let obj = { name: "Aish", age: 21, city: "Hyderabad", country: "India" };
let { name, age, ...rest } = obj;

console.log(name);  //  Aish
console.log(age);  // 21
console.log(rest);  // { city: "Hyderabad", country: "India" }

输出

Aish
21
{ city: "Hyderabad", country: "India" }