推荐答案
展开运算符（Spread Operator）和剩余参数（Rest Parameters）都使用三个点 (...) 语法，但它们的用法和作用完全不同。
展开运算符 (...)
- 作用: 将一个可迭代对象（如数组、字符串、Set、Map等）“展开”成独立的元素。
- 场景:
- 数组或对象字面量创建: 可以方便地创建新的数组或对象，同时包含现有数组或对象的元素/属性。
- 函数调用: 可以将数组的元素作为函数的独立参数传递。
- 浅拷贝: 用于创建数组或对象的浅拷贝。
剩余参数 (...)
- 作用: 将不定数量的函数参数打包成一个数组。
- 场景:
- 函数定义: 允许函数接收任意数量的参数，并将它们收集到一个数组中。
区别:
| 特性 | 展开运算符 (...) |
剩余参数 (...) |
|---|---|---|
| 用途 | 展开可迭代对象 | 收集函数参数 |
| 位置 | 数组/对象字面量中，函数调用时 | 函数定义的参数列表中 |
| 结果 | 将元素展开为独立的项 | 将参数收集为数组 |
| 作用对象 | 可迭代对象（数组、字符串等） | 函数接收的参数 |
本题详细解读
展开运算符 (...) 的用法
数组展开:
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; // arr2: [1, 2, 3, 4, 5] const str = "hello"; const chars = [...str]; // chars: ['h', 'e', 'l', 'l', 'o']
对象展开 (ES2018):
const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; // obj2: { a: 1, b: 2, c: 3 } const obj3 = { a: 1, b: 2, c: 3 }; const obj4 = { ...obj3, b: 4}; // obj4: { a: 1, b: 4, c: 3 } 后面的覆盖前面的同名属性函数调用:
function sum(a, b, c) { return a + b + c; } const numbers = [1, 2, 3]; const result = sum(...numbers); // result: 6浅拷贝:
-- -------------------- ---- ------- ----- ------------- - --- -- --- ----- ----------- - ------------------- ----------------------------------- -------------------- -- --- -- -- -- -------------------------- -- --- -- -- ----- ----------- - --------- ----- --------- - ---------------- ------------------------------- ----------- - -- ------------------------ -- - -- -- -- - - ------------------- ----- ----------- - --- ------- ----- --------- - ----------------- -------------- - -- ------------------------ -- - -- - -- - - -
剩余参数 (...) 的用法
函数参数收集:
-- -------------------- ---- ------- -------- --------- -- -------- - --------------- -- ----- --------------- -- ----- ------------------ -- -------- - --------- -- -- -- --- -- --- -- - -- - -- --- -- --与解构结合
-- -------------------- ---- ------- -------- ------------ -- ----------- - ----------------------- - ---------------- -- - - --- -- -- ----- --- - --------- ----- --------------- - ---- ------------------ -- - ----------------- -- -------
重要区别总结
展开运算符和剩余参数的关键区别在于其使用场景和目的：
- 展开运算符主要用于将已有的数组/对象“展开”为独立的元素/属性，常用于创建新的数组/对象、函数调用等。
- 剩余参数主要用于将函数传入的不定数量的参数收集到一个数组中，方便函数内部处理。
它们虽然都使用三个点 ... ，但在代码中的位置和作用完全不同，需要区分使用。