ES9中的扩展运算符和Rest参数-JavaScript中文网-JavaScript教程资源分享门户

JavaScript的ES9版本引入了一些新功能，其中扩展运算符和Rest参数是值得学习的两个功能。本文将介绍这两个功能及其用法。

扩展运算符

扩展运算符是一个用于操作数组或对象的三个点(...), 它可以将数组或对象展开解构成多个独立的变量或元素。以下是它的语法：

...iterable

其中iterable是一个可迭代对象，如数组或字符串。使用扩展运算符可以避免使用传统的for循环来处理数组或对象的每个元素，而是将数组或对象展开成一个压平的序列，并在其中进行操作。

在数组中使用扩展运算符可以将数组展开成多个独立的元素。以下是一个简单的例子，演示如何将两个数组合并：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3); // Output: [1, 2, 3, 4, 5, 6]

如上所示，我们将arr1和arr2合并成一个新的数组arr3，我们可以使用扩展运算符将两个数组压成一个单一的数组。

在对象中使用扩展运算符常常用于复制或合并对象。以下是一个示例：

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // Output: { x: 1, y: 2, z: 3 }

如上所示，我们将obj1和obj2合并成一个新的对象obj3，我们可以使用扩展运算符将两个对象合并成一个。

Rest参数也是由三个点(...)表示的，但它是用于处理函数参数的。在函数声明中，Rest参数允许您从调用函数时提供的所有参数中提取一个数组，以下是Rest参数的语法：

function myFunction(...args) {
  // Rest参数用于提取参数列表中的所有参数到一个数组中
}

以下是一个基本的例子，演示如何使用Rest参数：

function sum(...numbers) {
  return numbers.reduce((total, element) => total + element);
}

console.log(sum(1, 2, 3)); // Output: 6

如上所示，我们定义了一个名为sum的函数来计算传递给它的所有参数的总和。使用Rest参数将所有参数捆绑到一个数字数组中，然后对它们进行加总。

如果您使用Rest参数，它必须是最后一个参数声明，这是因为Rest参数会将所有参数收集到一个数组中，因此不能同时存在多个Rest参数。

function myFunction(x, ...rest, y) {
  // 抛出 SyntaxError，因为Rest参数必须在参数列表的最后
}

扩展运算符和Rest参数是两个非常有用的功能，它们使我们能够更轻松地操作数组和对象，并使我们的代码更易读和维护。而学习这两个控制流程将让你更容易的理解如何进行解构和重新组装，因此能够更快速和优雅的重构你的代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6475bee4968c7c53b02c00de