扩展运算符合并数组/对象均为浅拷贝,不递归处理嵌套,不支持null/undefined,大数组易栈溢出,需依场景选用concat、flat、Object.assign等替代方案。

用 [...array] 合并数组,但要注意浅拷贝和嵌套问题
扩展运算符合并数组本质是展开后拼接,不是“深合并”。比如:
const a = [1, 2];看起来没问题,但若
const b = [3, [4, 5]];
const c = [...a, ...b]; // [1, 2, 3, [4, 5]]
b[3] 是个引用对象,修改它会同时影响原数组。常见误用是以为 [...a, ...b] 能递归扁平化——它不能,[...b] 只展开一层。
需要扁平化时得配合 flat():
const nested = [1, [2, 3], [4, [5]]];
const flatOnce = [...nested.flat(1)]; // [1, 2, 3, 4, [5]]
const deepFlat = [...nested.flat(Infinity)]; // [1, 2, 3, 4, 5]
- 不能直接用
[...a, ...b]替代a.concat(b)来处理null或undefined—— 会报TypeError: undefined is not iterable - 大数组(>10万项)用扩展运算符可能触发栈溢出,此时应改用
push.apply或循环 -
Array.from()比扩展运算符更健壮,支持类数组(如arguments、NodeList)
用 {...obj} 合并对象,同名属性会被后者覆盖
对象扩展是浅拷贝+覆盖式合并,顺序决定优先级:
const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };
const merged = { ...a, ...b }; // { x: 1, y: 3, z: 4 }注意:...b 写在后面,它的 y 就会覆盖 a.y;反过来写就是 a 覆盖 b。
遇到嵌套对象,不会递归合并:
const a = { user: { name: 'A' } };
const b = { user: { age: 25 } };
const bad = { ...a, ...b }; // { user: { age: 25 } } ← a.user 整个被替换立即学习“Java免费学习笔记(深入)”;
- 想做深层合并,必须手动递归或用
Object.assign()配合工具函数(如 Lodash 的merge) -
...obj会跳过原型链上的属性,只拷贝自身可枚举属性 - Symbol 键会被保留,但不可枚举的属性(如
Object.defineProperty设为enumerable: false)会被丢弃
合并数组和对象混搭时,别混淆语法层级
常见错误是把数组当对象展开,或在对象中错误使用数组扩展:
const arr = [1, 2];
const obj = { a: 3 };
// ❌ 错误:试图把数组展开进对象字面量顶层
// { ...arr, ...obj } → 语法错误,因为 arr 展开后是 1, 2,不是键值对
// ✅ 正确:要么全数组,要么对象里包数组
const combinedArr = [...arr, obj]; // [1, 2, { a: 3 }]
const combinedObj = { ...obj, items: arr }; // { a: 3, items: [1, 2] }
- 不能在对象字面量中直接写
[...arr]作为属性值而不带键名——那只是表达式,不是合法属性定义 - 如果想把数组元素转成对象键(如
['a','b'] → {a: true, b: true}),得用Object.fromEntries()配合map,不能靠扩展运算符 - Vue/React 中用扩展运算符更新 state 时,确保新对象/数组与旧引用不同,否则视图可能不响应
替代方案:什么时候不该用扩展运算符
扩展运算符不是万能胶。遇到这些情况,换方法更稳:
// 大数组合并(避免栈溢出)
const bigA = new Array(200000).fill(1);
const bigB = new Array(200000).fill(2);
// ❌ 危险
// const huge = [...bigA, ...bigB];
// ✅ 安全
const huge = bigA.concat(bigB); // 或用 Array.prototype.push.apply([], ...)
- 需要保留
undefined元素时,Array.from({ length: 3 })比[...Array(3)]更可靠(后者生成三个empty槽位) - 合并含 getter/setter 的对象时,
{...obj}会执行 getter 并固化结果,丢失响应性;此时该用Object.assign或自定义克隆逻辑 - Node.js 早期版本(











