展开运算符（...）仅执行一层浅拷贝，数组拼接时元素依次铺开、对象合并时同名属性后者覆盖前者，嵌套结构均不递归处理；混合展开需明确类型分离，避免引用共享应手动克隆关键嵌套项。
JavaScript 中展开运算符（...）本身只做一层浅拷贝，它在合并数组和对象时行为不同，但都不递归处理嵌套结构。混合使用时需明确目标：是拼接数组、覆盖/合并对象属性，还是组合两者？关键在于理解展开位置和优先级。
数组合并：按顺序拼接，原数组引用不变
展开多个数组会生成一个新数组，元素依次铺开。内部对象或数组仍为浅拷贝——即只复制引用，不深克隆。
const arr1 = [1, { x: 1 }];
const arr2 = [2, { y: 2 }];
const merged = [...arr1, ...arr2];
// 结果：[1, { x: 1 }, 2, { y: 2 }]
// 注意：merged[1] 和 arr1[1] 指向同一对象
merged[1].x = 99;
console.log(arr1[1].x); // 99 ← 原数组也被影响
- 适合扁平化拼接，不适用于需要隔离嵌套对象的场景
- 若要避免引用共享，对嵌套项需单独深拷贝（如用
structuredClone或 JSON 方案）
对象合并：同名属性后覆盖前，嵌套对象仍共享引用
展开对象时，属性被逐个提取并合并到新对象中。若多个对象有相同 key，后者覆盖前者；但嵌套对象本身不会被合并，只是整个引用被替换或保留。
const obj1 = { a: 1, nested: { p: 1 } };
const obj2 = { b: 2, nested: { q: 2 } };
const merged = { ...obj1, ...obj2 };
// 结果：{ a: 1, b: 2, nested: { q: 2 } }
// obj1.nested 被完全替换成 obj2.nested，不是 { p: 1, q: 2 }
- 展开无法实现“深层合并”（deep merge），仅是浅层键值覆盖
- 如需嵌套合并，必须手动处理（例如递归函数）或借助工具库（如 Lodash 的
merge）
混合数组与对象：按语法位置决定结构，不能直接混展
展开运算符不能跨类型自动融合——你不能写 { ...arr, ...obj } 得到合理结构，因为数组展开后是数字索引键（0, 1, 2...），而对象展开是字符串键，二者共存于同一对象中会导致键名冲突或语义混乱。
立即学习“Java免费学习笔记（深入）”；
const arr = ['a', 'b'];
const obj = { x: 1, y: 2 };
// ❌ 不推荐：产生稀疏对象，索引变成字符串键
const bad = { ...arr, ...obj };
// → { '0': 'a', '1': 'b', x: 1, y: 2 }
// ✅ 推荐：明确意图，分别处理
const good = {
items: [...arr],
config: { ...obj }
};
// → { items: ['a', 'b'], config: { x: 1, y: 2 } }
- 避免将数组和对象直接混展进同一个字面量对象
- 用嵌套结构清晰区分数据类型，提升可读性和维护性
- 若真需扁平化混合（如日志参数、API payload），先转成统一格式（如全为键值对）再展开
安全处理嵌套结构的小技巧
当必须保留浅拷贝简洁性又想缓解引用风险时，可结合解构与简单克隆：
const source = {
id: 1,
data: [ { name: "A" }, { name: "B" } ],
meta: { tag: "old" }
};
// 浅拷贝主层 + 对关键嵌套项做轻量克隆
const safeCopy = {
...source,
data: source.data.map(item => ({ ...item })), // 每个对象浅拷一份
meta: { ...source.meta } // 单层对象也展开一次
};
- 对已知结构的嵌套数组/对象，用
.map(...)或{...}显式展开一层 - 不要依赖展开运算符解决所有拷贝问题，该用
structuredClone()时就用（现代环境支持） - 注意
JSON.parse(JSON.stringify(x))的局限性（丢失函数、undefined、Date 等）
