扩展运算符是什么_它有哪些实用的场景【教程】

扩展运算符...是解构动作，用于打散可迭代对象或对象属性；支持数组浅拷贝、函数传参、对象合并、字符串转数组，但不深拷贝、不处理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 或手动递归，不能无脑 ...。