在 ECMAScript 2017 (ES8) 中，引入了 Rest 和 Spread 参数，它们可以让我们更方便地处理函数的参数和数组/对象的元素。本文将详细介绍 Rest 和 Spread 参数的使用方式，包括它们的语法、示例代码和常见用法。
Rest 参数
Rest 参数可以让我们在函数中使用不定数量的参数，这些参数会被封装成一个数组。它的语法是在函数定义时使用三个点（...）加上一个参数名，例如：
-- -------------------- ---- -------
-------- --------------- -
--- ------ - --
--- ---- ------ -- -------- -
------ -- -------
-
------ -------
-
------------------ -- ---- -- -
------------------ -- -- ---- -- --上面的代码中，我们定义了一个名为 sum 的函数，它使用 Rest 参数 ...numbers 来接收不定数量的数字参数。在函数体中，我们使用了 for...of 循环来遍历 numbers 数组，将所有数字相加后返回结果。
除了在函数定义时使用 Rest 参数，我们还可以在调用函数时使用 Rest 参数来传递一个数组的元素。例如：
let numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6
上面的代码中，我们使用了 Spread 参数 ...numbers 来将数组 numbers 的元素传递给函数 sum。注意，我们使用了 Spread 参数而不是 Rest 参数，因为在函数调用时需要将数组展开成多个参数。
Rest 参数还有一个有用的特性，就是可以用于获取函数的剩余参数。例如：
function log(first, second, ...others) {
console.log(first); // 1
console.log(second); // 2
console.log(others); // [3, 4, 5]
}
log(1, 2, 3, 4, 5);上面的代码中，我们定义了一个名为 log 的函数，它有三个参数 first、second 和 others，其中 others 使用了 Rest 参数来获取函数的剩余参数。在函数调用时，我们传递了五个参数，但只有前两个参数会被赋值给 first 和 second，剩余的参数会被封装成一个数组，赋值给 others。
Spread 参数
Spread 参数可以让我们展开一个数组或对象，将它们的元素/属性作为函数的参数/对象的属性。它的语法是在数组/对象前面使用三个点（...）来展开它们的元素/属性，例如：
let numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3
let person = { name: 'Alice', age: 30 };
let clone = { ...person };
console.log(clone); // { name: 'Alice', age: 30 }上面的代码中，我们分别使用了 Spread 参数 ...numbers 和 ...person 来展开数组和对象。在第一个例子中，我们将数组 numbers 的元素展开成多个参数，传递给 console.log 函数。在第二个例子中，我们将对象 person 的属性展开成一个新对象，赋值给 clone 变量。
除了在函数调用和对象赋值时使用 Spread 参数，我们还可以在数组/对象字面量中使用 Spread 参数来合并多个数组/对象。例如：
-- -------------------- ---- ------- --- -------- - --- -- --- --- -------- - --- -- --- --- ------ - ------------- ------------- -------------------- -- --- -- -- -- -- -- --- ------- - - ----- ------- -- --- ------- - - ---- -- -- --- ------ - - ----------- ---------- -- -------------------- -- - ----- -------- ---- -- -
上面的代码中，我们分别使用了 Spread 参数 ...numbers1 和 ...numbers2 来合并两个数组，以及 Spread 参数 ...person1 和 ...person2 来合并两个对象。在合并数组时，我们需要使用数组字面量 [...] 将展开后的元素包裹起来。在合并对象时，我们不需要使用对象字面量 {...}，因为它会自动创建一个新对象。
常见用法
Rest 和 Spread 参数有许多常见的用法，下面列举了其中一些：
1. 函数参数默认值
Rest 和 Spread 参数可以和函数参数默认值一起使用，来定义更灵活的函数。例如：
-- -------------------- ---- -------
-------- ---------- - -------- ---------- -
------------------- -----------
-- -------------- - -- -
-------------------- ---------------- ------
-
-
-------- -- ------ ------
-------------- ------ ----------- -- ------ ------ ------- ---- -------上面的代码中，我们定义了一个名为 greet 的函数，它有一个参数 name 和一个 Rest 参数 ...others，并且 name 的默认值为 'World'。在函数体中，我们首先输出问候语 Hello, ${name}!，然后判断是否有其他参数传递进来，如果有则输出它们的值。在第一个例子中，我们没有传递任何参数，所以输出的是默认值 'World'。在第二个例子中，我们传递了三个参数，所以输出的是第一个参数 'Alice'，以及其他参数 'Bob' 和 'Charlie'。
2. 数组/对象拷贝
Rest 和 Spread 参数可以用来拷贝数组和对象，生成新的数组/对象。例如：
let numbers = [1, 2, 3];
let copy = [...numbers];
let person = { name: 'Alice', age: 30 };
let clone = { ...person };上面的代码中，我们分别使用了 Spread 参数 ...numbers 和 ...person 来拷贝数组和对象。在拷贝数组时，我们需要使用数组字面量 [...] 将展开后的元素包裹起来。在拷贝对象时，我们不需要使用对象字面量 {...}，因为它会自动创建一个新对象。
3. 函数参数传递
Rest 和 Spread 参数可以用来传递函数的参数，或者将函数的返回值展开成多个值。例如：
-- -------------------- ---- ------- -------- ------ -- -- - ------ - - - - -- - --- ------- - --- -- --- ----------------------------- -- - -------- --------- -- - ------ ------------- - --- - - --- - --- ------ - ---------- --- -------------------- -- --- -- --- ---------- ---------- - ---------- --- ---------------------- -- - ----------------------- -- -
上面的代码中，我们分别使用了 Spread 参数 ...numbers 来将数组 numbers 的元素传递给函数 sum，以及使用了数组解构 [quotient, remainder] = divide(10, 3) 来将函数 divide 的返回值展开成两个变量 quotient 和 remainder。
总结
Rest 和 Spread 参数是 ECMAScript 2017 (ES8) 中的新特性，它们可以让我们更方便地处理函数的参数和数组/对象的元素。在本文中，我们详细介绍了 Rest 和 Spread 参数的使用方式，包括它们的语法、示例代码和常见用法。我们希望读者能够通过本文了解 Rest 和 Spread 参数的基本用法，并在实际开发中灵活应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f555502b3ccec22fd79e8b