JavaScript三个点运算符与rest参数: 告别arguments的束缚

2023-10-26 22:34:41

当涉及到函数中的参数传递时，JavaScript提供了一种强大的方式，即使用三个点运算符(...)，也称为展开运算符(spread operator)和剩余参数(rest parameters)。这不仅简化了代码，还提高了函数的可读性和灵活性。告别arguments对象的时代，这些新语法让函数参数处理变得更加优雅。

从arguments对象的束缚中解脱出来

在探索三个点运算符和剩余参数的妙处之前，让我们先回顾一下arguments对象。arguments是一个内置对象，它包含了传递给函数的所有参数。虽然arguments对象在某些情况下很有用，但它也有明显的缺点：

硬编码的名称。arguments是一个内置名称，不能被覆盖或重新赋值，这使得在函数内部访问外层函数的参数变得困难。
类数组对象。arguments是一个类数组对象，这意味着它拥有类似数组的属性和方法，但它不是一个真正的数组。这导致一些操作变得麻烦，例如，不能直接使用.map()或.forEach()方法。

三个点运算符和剩余参数的引入解决了这些痛点，使参数处理更加灵活和易用。

展开运算符（...）的魔法

展开运算符（...）可以将一个数组或对象展开为一组独立的参数。它可以用于函数调用或作为数组或对象的解构赋值。

举个例子：

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

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 输出: 6

在这个例子中，我们使用展开运算符将numbers数组展开为三个独立的参数，然后传递给sum()函数。这种写法比使用apply()方法或arguments对象更简洁。

剩余参数（...）的威力

剩余参数（...）用于收集传递给函数的多余参数。它必须是函数参数列表中的最后一个参数。

function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出: 15