前端开发者们最需要关注的技术之一，便是使用 ES9 的 Rest/Spread Properties 来处理函数参数。这项技术可以让你更好地利用 JavaScript 的强大功能，从而解决许多处理函数参数的问题。本文将对 Rest/Spread Properties 进行详细介绍，并给出一些常见的使用场景和示例代码以指导读者更好地掌握其应用技巧。
什么是 Rest/Spread Properties？
Rest/Spread Properties 是 ECMAScript 9 （ES9）中的一项新功能，它允许你使用三个句点（...）来操作对象和数组。这些句点可以用于处理可变参数、展开对象与数组以及实现许多有用的功能。本文将介绍两项使用 Rest/Spread Properties 的技术。
Rest Properties
Rest Properties 是指在函数定义中接收任意数量的参数，并将它们存储在一个数组中。你可以使用 Rest Properties 来接收多个参数或者指定只接收某些参数。例如：
function foo(...args) { console.log(args); } foo(1, 2, 3); // 输出 [1, 2, 3]
Rest Properties 意味着你可以在函数的定义中使用三个句点 ...，在参数末尾添加它使类数组对象 arguments 变为真正的数组。
Spread Properties
Spread Properties 是指使用句点 ... 将数组或者对象的所有属性展开，以便将它们插入到新的数组或对象中。例如：
const a = [1, 2, 3]; const b = [4, 5, 6]; const c = [...a, ...b]; console.log(c); // 输出 [1, 2, 3, 4, 5, 6]
上述代码将旧的数组 a 和 b 展开，然后用三个句点展开操作符合并两个数组为一个新数组 c。
如何使用 Rest/Spread Properties？
Rest/Spread Properties 可以被用于许多不同的场景，下面将以函数参数为例介绍几个常见的用法。
1. Rest Parameters
你可以使用 Rest Properties 接收任意数量的参数，并将它们存储在一个数组中。这种技巧在处理可变参数时非常有用，例如一个函数调用，你需要在其中传递不同数量的参数。Rest Parameters 可以让你用最简单的方式编写此类函数，并且让代码更易于阅读和理解。
function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3)); // 输出 6 console.log(sum(4, 5, 6, 7)); // 输出 22
上述代码中的 sum() 函数含有 Rest Properties，可以接收任意数量的参数数组并将它们存储在一个名为 numbers 的数组中。
2. Spread Operator
Spread Operator 可以用于展开数组或对象。你可以将数组中的所有元素，或者对象中的所有属性都展开到函数调用或新的对象中。使用 Spread Operator 时，可以更容易地合并所有必要的内容，而且代码更容易阅读和理解。
2.1. 两个数组合并
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // 输出 [1, 2, 3, 4, 5, 6]
2.2. 复制数组
const arr = [1, 2, 3]; const copy = [...arr]; console.log(copy); // 输出 [1, 2, 3]
2.3. 展开对象
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- -- -- ----- ------- - - -------- ------ ----------------- -- --------------------- -- -- - ----- ------ ---- --- ------ ------------------展开代码
2.4. 合并对象
-- -------------------- ---- ------- ----- ----- - - ----- ------ ---- -- -- ----- ----- - - ------ ----------------- -- ----- ------- - - --------- -------- -- --------------------- -- -- - ----- ------ ---- --- ------ ------------------展开代码
3. 参数默认值
Rest/Spread Properties 可以用作参数默认值，这使得代码更易于管理和调试。在下面的示例中，我们为该功能指定一个默认值：
function greet(name = 'World', ...messages) { console.log(`Hello ${name}!`); console.log(messages); } greet(); // 输出 "Hello World!" greet('Tom', 'How are you?', 'Goodbye!'); // 输出 "Hello Tom!" 和 "['How are you?', 'Goodbye!']"
上述代码中，greet() 函数接收一个 name 参数，并给此参数默认值为 "World"。如果没有 name 参数，则默认输出 Hello World 信息。Rest Properties 则用于接收任意参数数目并将多余的参数存储在数组 messages 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c25fa0314edc2684b91415
