17370845950

展开运算符（...）是JavaScript中将可迭代对象或对象展开为独立元素的语言特性，用于数组复制拼接、对象合并解构、函数参数传递等，但不可展开null/undefined，且仅浅拷贝。

展开运算符（Spread Operator）是 JavaScript 中的 ...，它能把可迭代对象（如数组、字符串、类数组）或对象“展开”成独立的元素，常用于复制、合并、解构等场景。它不是语法糖，而是有明确语义和运行时行为的语言特性。

数组展开：快速复制与拼接

用 [...arr] 可以浅拷贝数组，避免引用污染；多个数组还能直接拼接，比 concat() 更直观。

• 复制数组：const newArr = [...oldArr];（注意：只深拷贝第一层）
• 合并数组：const all = [...a, ...b, 100]; —— 支持在任意位置插入值

• 转类数组为真数组：[...document.querySelectorAll('div')] 或 [...arguments]（ES5 中常用）

对象展开：解构赋值与属性覆盖

对象展开写法是 {...obj}，常用于创建新对象、默认值填充、状态更新等，顺序决定属性是否被覆盖。

• 合并对象：const user = {...defaults, ...overrides}; —— 后面的同名属性会覆盖前面的
• 剔除指定属性：const {id, ...rest} = user; 配合展开，轻松实现“除某字段外全部保留”
• 函数参数默认值兜底：function create({name = 'anonymous', ...opts} = {}) { ... }

函数调用：替代 apply 的简洁写法

把数组“打散”传给函数，尤其适合 Math 方法、构造函数或需要多参数的 API。

• 找数组最大值：Math.max(...numbers)（Math.max.apply(null, numbers) 的现代写法）
• 动态 new 实例：new Date(...[2025, 0, 1])（需确保参数个数和类型匹配）
• 批量传参给函数：someFn(...argsArray)，比循环 push 再 call 清晰得多

常见陷阱与注意事项

展开运算符方便但不万能，理解边界才能少踩坑。

• 不能展开 null/undefined —— 会直接报错 TypeError，建议先做存在性判断或提供默认空数组/对象
• 只做浅拷贝 —— 嵌套对象或数组仍共享引用，深层结构需用递归或结构化克隆（如 structuredClone）
• 对象展开不支持动态键表达式 —— {...obj, [key]: value} 是合法的，但 {...obj, key: value} 中的 key 是字面量，不是变量