扩展运算符...是解构动作，用于打散可迭代对象或对象属性；支持数组浅拷贝、函数传参、对象合并、字符串转数组，但不深拷贝、不处理null/undefined、不兼容Map/Set等。
... 是 JavaScript 中的扩展运算符，它不是“语法糖”或“炫技工具”，而是一个明确的**解构动作**：把可迭代对象（如数组、字符串、Set）或对象的可枚举属性，“打散”成独立元素或键值对，再参与后续构造。
它不负责深拷贝、不自动处理 null 或 undefined、也不兼容所有对象——用错地方会直接报错或产生意外引用。下面说几个你真正在写代码时会遇到的问题点。
数组合并和浅拷贝：别再用 concat 和 slice
当你想复制一个数组或拼接多个数组时，[...arr] 比 arr.slice() 或 arr.concat(b) 更直观，也更少出错。
- 复制数组：
const newArr = [...oldArr]—— 新数组与原数组地址不同，修改newArr不影响oldArr - 合并数组：
const merged = [...a, 'middle', ...b]—— 支持中间插入任意值，concat做不到 - ⚠️ 注意：只浅拷贝一层。如果
oldArr里有对象，比如[[1,2], {x: 1}]，那么newArr[0]和oldArr[0]仍指向同一数组
函数调用传参：替代 apply 的安全写法
很多内置函数（如 Math.max、Promise.all）不接受数组，但你要传的是数组变量。这时候 ... 就是唯一自然解法。
-
Math.max(...numbers)等价于Math.max(1, 2, 3)；写成Math.max(numbers)会返回NaN - 自定义函数也一样：
sum(...[10, 20])→sum(10, 20) - ⚠️ 错误用法：
sum(...[10, undefined, 20])会把undefined当作实参传入，可能触发非预期逻辑
对象合并与状态更新：Redux/Vue/React 中最常踩坑的地方
在不可变更新场景下（比如 Redux reducer），{...state, count: state.count + 1} 是标准写法，但它有几个隐性约束：
- 只能展开普通对象（有
Symbol.iterator或可枚举属性），Map、Set、类实例不能直接展开 - 同名属性后写的覆盖前面的：
{...a, ...b}中若a.x = 1、b.x = 2，结果是x: 2 - ⚠️ 最容易忽略：嵌套对象仍是引用。比如
user.profile.name改了，user整体用扩展运算符复制后，profile还是同一个对象，没真正隔离
字符串和类数组转换：方便但有性能代价
你可以用 [...'hello'] 得到 ['h','e','l','l','o']，也能把 arguments、NodeList 转成真数组。
- ✅ 正确：
const arr = [...document.querySelectorAll('div')] - ⚠️ 性能警告：对超大
NodeList（比如上万 DOM 节点），[...list]比Array.from(list)慢，V8 对后者做了专门优化 - ❌ 报错场景：
[...null]、[...undefined]直接抛TypeError: null is not iterable
Array.isArray、structuredClone 或手动递归，不能无脑 ...。 
