ES9 之数组扩展操作符-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 之前，我们通常使用 concat() 方法将多个数组合并成一个数组。然而，ES6 和 ES7 引入了更强大的数组操作功能，在 ES9 中，扩展操作符也被添加到了数组中。

扩展操作符 (Spread Operator)

扩展操作符（...）允许在函数调用中和构造数组和对象字面量时, 将数组表达式或者字符串在语法上展开，以便将其拆分为单个元素，并将这些元素插入到另一个数组中。

在函数调用中使用扩展操作符

使用扩展操作符（...）可以将一个数组展开为单独的参数：

function sum(x, y, z) {
  return x + y + z;
}

const array = [1, 2, 3];
console.log(sum(...array)); // Output: 6

在上面的例子中，sum() 函数期望传入三个参数，但我们传递了一个数组，使用扩展操作符将数组展开为单独的参数传递给 sum() 函数。这就是函数调用中使用扩展操作符的语法。

构建数组时使用扩展操作符

使用扩展操作符（...）还可以创建新的包含所有从其他数组和额外项中提取的元素的数组：

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e'];
const newArray = [...array1, ...array2, 'f', 'g'];

console.log(newArray); // Output: ["a", "b", "c", "d", "e", "f", "g"]

在上面的例子中，我们从两个数组 array1 和 array2 取出所有元素，然后添加了额外的 'f' 和 'g'。使用扩展操作符将它们合并为一个新的数组。

剩余操作符 (Rest Operator)

剩余操作符（...）与扩展操作符（...）的语法非常相似，通常在函数参数中使用。而不是将数组展开为单独的值，剩余操作符可以将任意数量的参数收集到数组中。这使得我们可以轻松地编写可接受多个参数的函数。

// javascriptcn.com 代码示例
function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(4, 5, 6, 7, 8)); // Output: 30

在上面的例子中，sum() 函数使用剩余操作符将所有传入的参数收集到 numbers 数组。然后通过遍历该数组并计算总和返回结果。

指导意义

使用扩展操作符和剩余操作符可以大幅简化编写代码的工作，提高代码效率和可读性。这对于前端开发人员来说特别重要，因为在网站或应用程序中经常需要处理各种类型的数据集合。掌握数组扩展操作符的使用方法有助于编写更简洁高效的代码。

总结

在本文中，我们学习了 ES9 中的两个新概念 —— 扩展操作符和剩余操作符。扩展操作符可以将数组表达式或字符串在语法上展开，以拆分为单个元素，并将这些元素插入到另一数组中。剩余操作符可将任意数量的参数收集到数组中。这些概念可以使我们编写更简洁高效的代码，特别是在处理大量数据时。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652912d87d4982a6ebba4e2e