在最新的 EcmaScript 9 中，我们可以使用 Rest/Spread 属性来极大地简化我们的前端开发工作。Rest/Spread 属性可以让我们轻松地处理数组/对象，像是传递参数、合并数组/对象等等。在本文中，我们将介绍 Rest/Spread 属性的基本概念以及如何使用它们来提高我们的前端开发效率。
Rest 属性
Rest 属性是一个三个点 (...) 加上一个变量名，它可以把指定范围内的所有参数都收集起来，然后以一个数组的形式放到指定的变量中。它通常用于函数定义时的参数声明，例如：
function myFunc(...args) {
console.log(args);
}
myFunc(1, 2, 3); // 输出 [1, 2, 3]在上面的例子中，我们使用了 Rest 属性来声明一个名为 args 的数组，用于存储传递给 myFunc 函数的所有参数。当我们调用 myFunc 函数时，Rest 属性会把所有参数都放到 args 数组中，并打印出来。
除了可以用于函数定义时的参数声明，Rest 属性还可以用于数组和对象的操作。例如：
const myArr = [1, 2, 3, 4, 5]; const [a, b, ...rest] = myArr; console.log(a); // 输出 1 console.log(b); // 输出 2 console.log(rest); // 输出 [3, 4, 5]
在上面的例子中，我们使用了 Rest 属性来收集 myArr 数组中的前两个元素并赋值给变量 a 和 b，同时将剩下的元素都收集起来放到 rest 数组中，并打印出来。
Spread 属性
Spread 属性是一个三个点 (...) 加上一个变量名，它可以把数组/对象打散，把它们的元素展开并放入到新的数组/对象中。它通常用于函数调用时的参数传递，例如：
function myFunc(a, b, c) {
console.log(a + b + c);
}
const myArr = [1, 2, 3];
myFunc(...myArr); // 输出 6在上面的例子中，我们使用了 Spread 属性来将 myArr 数组中的元素展开并传递给 myFunc 函数。这样，myFunc 函数就可以轻松地处理这些元素并打印出它们的和。
除了可以用于函数调用时的参数传递，Spread 属性还可以用于数组和对象的操作。例如：
const myArr1 = [1, 2, 3]; const myArr2 = [4, 5, 6]; const mergedArr = [...myArr1, ...myArr2]; console.log(mergedArr); // 输出 [1, 2, 3, 4, 5, 6]
在上面的例子中，我们使用了 Spread 属性来展开 myArr1 和 myArr2 数组，并把它们的元素放到一个新的数组 mergedArr 中，并打印出来。
在对象中使用 Rest/Spread 属性
除了可以在数组中使用 Rest/Spread 属性，我们还可以在对象中使用它们。例如：
-- -------------------- ---- ------- ----- ----- - - -- -- -- -- -- - -- ----- - -- ------- - - ------ --------------- -- -- - ------------------ -- -- - -- -- -- - -
在上面的例子中，我们使用了 Rest 属性来收集 myObj 对象中除了 a 以外的所有属性，并放到一个新的对象 rest 中，并打印出来。
除了可以使用 Rest 属性来收集对象中的属性，我们还可以使用 Spread 属性来合并多个对象的属性。例如：
-- -------------------- ---- ------- ----- ------ - - -- -- -- - -- ----- ------ - - -- -- -- - -- ----- --------- - - ---------- --------- -- ----------------------- -- -- - -- -- -- -- -- -- -- - -
在上面的例子中，我们使用了 Spread 属性来将 myObj1 和 myObj2 对象打散，并把它们的所有属性都合并到一个新的对象 mergedObj 中，并打印出来。
总结
在本文中，我们介绍了 Rest/Spread 属性的基本概念和用法，并给出了例子代码来说明它们的各种用法。Rest/Spread 属性可以大大提高我们的前端开发效率，让我们能够更加轻松地处理数组和对象，并更加高效地编写我们的代码。在你的下一个项目中，使用 Rest/Spread 属性并发挥它们的威力吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486d26548841e9894561c1d