JavaScript展开运算符使用方法及数组合并优化技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript展开运算符怎么用？数组合并还有更优方法吗》，聊聊，我们一起来看看吧！

Spread语法可合并数组但有局限：仅浅拷贝、不支持类数组直接展开、大数组内存开销大；concat()更兼容且性能优；超大数组宜用循环push；去重或深度合并需额外逻辑。

Spread 语法（...）能合并数组，但不是万能解法；它在浅拷贝、函数调用、解构等场景好用，但在大数组或需深度合并时反而拖慢性能或出错。

用 ... 合并数组的正确写法和限制

最常见写法是 [...arr1, ...arr2]，它把两个数组的元素逐个展开成新数组。

• 只做一层展开：如果 arr1 = [1, [2, 3]]，[...arr1] 得到 [1, [2, 3]]，不会递归扁平化
• 不能直接用于类数组对象（如 arguments 或 DOM NodeList），需先转成真数组（Array.from() 或 [...nodeList] 在支持环境下可行）
• 内存开销明显：合并两个各含 10 万项的数组，会新建一个 20 万项的新数组，GC 压力大

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b]; // [1, 2, 3, 4]

Array.prototype.concat() 还值得用吗？

它比 Spread 更老，但仍有不可替代之处：不创建中间数组、支持任意数量参数、可链式调用。

• concat() 返回新数组，原数组不变，语义清晰
• 性能略优于 Spread（V8 引擎对 concat 有专门优化，尤其多段拼接）
• 兼容性更好：IE9+ 即支持，而 Spread 需要 ES6+ 环境
• 注意：arr.concat(1, 2) 和 arr.concat([1, 2]) 行为不同——后者会把整个数组当一个元素推入

const a = [1, 2];
const b = [3, 4];
const merged = a.concat(b); // [1, 2, 3, 4]
// 多数组：a.concat(b, c, d)

超大数组合并别硬拼，试试 push.apply() 或 Array.prototype.push() + ...

如果目标是往一个已有数组末尾追加大量元素（比如日志批量写入），push() 比构造新数组更省内存。

• target.push(...source) 最简洁，但 source 超过约 10 万项可能触发 “maximum call stack size exceeded” 错误（因展开后参数过多）
• 安全兜底用 Array.prototype.push.apply(target, source)，它不依赖参数展开，但已不推荐（apply 也有限制，且写法晦涩）
• 真正稳健的做法是分块：用 for 或 for...of 循环调用 push()

const target = [1, 2];
const source = [3, 4, 5];

// ✅ 推荐：明确、可控、无栈溢出风险
for (const item of source) {
  target.push(item);
}

// ⚠️ 小心：source 太大会崩
// target.push(...source);

需要去重或深度合并？Spread 和 concat() 都不解决

它们只是拼接工具，不处理逻辑。比如合并两个对象数组并按 id 去重，或合并嵌套结构，就得自己写逻辑或借助库。

• 去重合并常用：[...new Set([...a, ...b])] —— 仅适用于原始值；对象需用 Map 或 filter() + findIndex()
• 深度合并（如配置覆盖）必须用 Object.assign()、structuredClone()（新 API）、或 Lodash 的 merge()
• 不要试图用 JSON.parse(JSON.stringify()) 深拷贝再合并——丢失函数、undefined、Date 等类型

// 原始值去重
const a = [1, 2];
const b = [2, 3];
const unique = [...new Set([...a, ...b])]; // [1, 2, 3]

真正麻烦的从来不是“怎么拼”，而是“拼完要不要去重、要不要深拷、要不要保持引用、要不要异步分批”。这些细节一漏，线上就容易出静默错误。

终于介绍完啦！小伙伴们，这篇关于《JavaScript展开运算符使用方法及数组合并优化技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！