在 ECMAScript 2015 引入了 Rest/Spread 操作符，这是一个非常有用的特性，它可以在函数的参数列表中使用，在扩展对象字面量和数组字面量中使用，它使得代码更加简洁易懂，同时也使函数更加的灵活。本文将深入介绍 Rest/Spread 操作符的用法及其在函数中的应用。
Rest 操作符
Rest 操作符使用三个点（...）表示，在函数参数列表中使用 Rest 操作符，可以将一个函数的参数集合展开成一个数组。例如：
function sum(...numbers) {
return numbers.reduce((prev, curr) => prev + curr);
}
console.log(sum(1, 2, 3, 4)); //10
console.log(sum(5, 6)); //11在上面的代码中，我们定义了一个名为 sum 的函数，使用 Rest 操作符接收一个不确定数量的参数，内部使用 reduce 方法对这些参数进行累加运算，返回最终结果。
函数参数中的 Rest 操作符可以用来代替 arguments 对象，它的优点在于它可以将一个参数列表转换为数组，并且可以使用数组的方法，例如 reverse() 和 sort()。
function order(...items) {
console.log(items.reverse());
}
order(1, 2, 3, 4); //[4, 3, 2, 1]Spread 操作符
Spread 操作符也使用三个点（...）表示，可以在构建数组和对象的字面值中使用，它就像是 Rest 操作符的反操作，将一个数组或类似数组的对象展开成各个独立的元素。
let numbers = [1, 2, 3]; let newNumbers = [...numbers, 4, 5, 6]; console.log(newNumbers); //[1, 2, 3, 4, 5, 6]
在上面的代码中，我们定义了一个名为 numbers 的数组，使用 Spread 操作符将其展开后再与 [4, 5, 6] 数组进行合并，生成一个新的数组 newNumbers，包含了 [1, 2, 3, 4, 5, 6]。
当然，我们也可以使用 Spread 操作符对对象字面量进行扩展：
let person = {
firstName: "John",
lastName: "Doe"
};
let newPerson = { ...person, age: 30 };
console.log(newPerson); //{ firstName: "John", lastName: "Doe", age: 30 }在上面的代码中，我们定义了一个 person 对象，使用 Spread 操作符将其展开后再与新的 { age: 30 } 对象进行合并，生成一个新的对象 newPerson，包含了 { firstName: "John", lastName: "Doe", age: 30 }。
在函数参数中使用 Rest 和 Spread 操作符
Rest/Spread 操作符的最大优点就是可以在函数参数列表中使用，我们可以很容易地通过 Rest 操作符将参数列表转换为一个数组，在函数内部使用。
function greet(...names) {
return names.map((name) => "Hello " + name);
}
console.log(greet("Alice", "Bob", "Charlie"));
//["Hello Alice", "Hello Bob", "Hello Charlie"]在这个例子中，我们定义了一个 greet 函数，在函数参数列表中使用 Rest 操作符将所有的参数转换成一个数组 names，在函数内部使用 map 方法对每个参数进行拼接，并且返回最终结果。
我们也可以在调用函数时使用 Spread 操作符来展开一个数组，并且将其传递给函数。
function sum(x, y, z) {
return x + y + z;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers)); //6在上面的代码中，我们定义了一个 sum 函数，使用三个参数进行累加运算，然后使用 Spread 操作符将一个数组 [1, 2, 3] 展开，并且将其作为函数的参数传递。
总结
Rest/Spread 操作符是 ECMAScript 2018 的新特性，它可以使你在定义和调用函数时更加灵活和简洁，同时也可以在构建数组和对象时更加方便。使用 Rest/Spread 操作符可以使你的代码更加易于理解和维护，因此我们应该尽可能地使用它。
以上就是 Rest/Spread 操作符在函数中的用法及指导意义，希望本文对你有所帮助。
示例代码：
-- -------------------- ---- ------- -- ---- --- -------- --------------- - ------ --------------------- ----- -- ---- - ------ - ------------------ -- -- ---- ---- ------------------ ---- ---- -------- --------------- - ----------------------------- - -------- -- -- --- ----- -- -- -- -- ------ --- --- ------- - --- -- --- --- ---------- - ------------ -- -- --- ------------------------ ----- -- -- -- -- -- --- ------ - - ---------- ------- --------- ----- -- --- --------- - - ---------- ---- -- -- ----------------------- --- ---------- ------- --------- ------ ---- -- - -- -------- ---- - ------ --- -------- --------------- - ------ ---------------- -- ------ - - ------ - -------------------------- ------ ------------ --------- ------- ------ ----- ------ --------- -------- ------ -- -- - ------ - - - - -- - --- ------- - --- -- --- ----------------------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664c6f8ad3423812e4b43084