JavaScript 数组合并：深入解析 concat 与 push 的选择

理解数组合并的需求

在开发过程中，我们经常需要将一个或多个数组的元素添加到另一个数组中。JavaScript提供了多种方法来实现这一点，其中最常用且容易混淆的是 Array.prototype.concat() 和利用展开语法 (...) 结合 Array.prototype.push()。虽然它们表面上都能达到合并数组的目的，但其内部机制和适用场景却大相径庭。理解这些差异对于编写健壮、高效且可维护的代码至关重要。

1. 数组的变异性与返回值：concat vs push

这是两种方法最核心的区别之一。

Array.prototype.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的元素。

• 非变异性 (Immutable): concat() 不会修改调用它的原始数组。它始终返回一个包含所有合并元素的新数组。
• 返回值: 返回一个新数组。

示例：

立即学习“Java免费学习笔记（深入）”；

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

const arr1 = [1, 2];
const arr2 = [3, 4];

const newArr = arr1.concat(arr2);

console.log(arr1);    // [1, 2] - 原始数组未改变
console.log(arr2);    // [3, 4] - 原始数组未改变
console.log(newArr);  // [1, 2, 3, 4] - 返回一个新数组

这种非变异性在函数式编程范式中非常有用，例如在使用 map() 或 reduce() 等方法时，你需要生成一个新数组而不影响原始数据。

Array.prototype.push() 结合展开语法 (...)

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。当结合展开语法 (...) 使用时，它能将另一个数组的所有元素作为独立参数推入目标数组。

• 变异性 (Mutable): push() 会直接修改调用它的原始数组。
• 返回值: 返回修改后数组的新长度。

示例：

立即学习“Java免费学习笔记（深入）”；

const arrA = [1, 2];
const arrB = [3, 4];

const newLength = arrA.push(...arrB);

console.log(arrA);        // [1, 2, 3, 4] - 原始数组 arrA 被修改
console.log(arrB);        // [3, 4] - 原始数组 arrB 未改变
console.log(newLength);   // 4 - 返回新长度

如果你的目标是直接修改一个现有数组，并且不需要保留原始数组的副本，那么 push() 是一个高效的选择。

2. 处理大型数组时的限制：参数数量上限

这是 push(...array) 方法的一个潜在陷阱。

JavaScript引擎对函数调用可以接受的参数数量通常有一个上限。当使用 push(...array) 语法时，展开运算符 (...) 会将 array 中的所有元素解构为独立的参数传递给 push() 方法。如果 array 非常大（例如，包含数十万个元素），这可能会超出JavaScript引擎的参数限制，导致运行时错误。

示例（概念性，实际错误可能因引擎而异）：

// 假设这是在某些环境中会抛出错误的场景
// const largeArr = Array(150000).fill(0); // 创建一个包含15万个元素的数组
// const targetArr = [];
// targetArr.push(...largeArr); // 可能会抛出 "Maximum call stack size exceeded" 或类似错误

相比之下，concat() 方法只接收一个或少数几个数组作为参数，而不是将所有元素展开。因此，它在处理大型数组时更为健壮，不会受到参数数量上限的限制。

示例：

立即学习“Java免费学习笔记（深入）”；

const largeArr = Array(150000).fill(0); // 创建一个包含15万个元素的数组
const targetArr = [];
const resultArr = targetArr.concat(largeArr); // 正常工作
console.log(resultArr.length); // 150000

注意事项： 对于需要合并大量数据的场景，concat() 是更安全的选择，因为它避免了潜在的参数堆栈溢出问题。

3. 性能考量：迭代次数

虽然在大多数现代JavaScript引擎中，微小的性能差异通常可以忽略不计，但了解其内部工作原理有助于更深入地理解。

• push(...array): 当使用展开语法时，JavaScript引擎首先需要迭代一次 array 以将其元素解构为独立的参数。然后，push() 方法内部会再次迭代这些参数，将它们添加到目标数组中。这实际上是两次迭代。
• concat(): concat() 方法通常会进行一次内部迭代，遍历传入的数组，并将元素复制到新创建的数组中。

因此，从理论上讲，concat() 可能在迭代次数上略有优势。然而，实际性能会受到引擎优化、数组大小和具体操作等多种因素的影响。对于大多数非极端情况，这种差异通常不会成为性能瓶颈。

4. 稀疏数组的处理

稀疏数组是JavaScript中一个特殊的概念，它包含未定义的或“空”的槽位。concat() 和 push(...array) 在处理这些空槽位时表现出不同的行为。

• push(...sparseArray): 当展开一个稀疏数组时，展开运算符 (...) 会将稀疏数组中的“空”槽位转换为 undefined 值。这意味着，原本的稀疏性会被填充为 undefined。

示例：

立即学习“Java免费学习笔记（深入）”；

const sparseArr = Array(3); // 这是一个稀疏数组，例如：[empty × 3]
const targetArr = [];

targetArr.push(...sparseArr); // 展开后变为：targetArr.push(undefined, undefined, undefined);
console.log(targetArr); // [undefined, undefined, undefined]

• concat(sparseArray): concat() 方法在合并稀疏数组时，会保留其稀疏性。它会将空槽位保持为“空”，而不是将其转换为 undefined。

示例：

立即学习“Java免费学习笔记（深入）”；

const sparseArr = Array(3); // 这是一个稀疏数组，例如：[empty × 3]
const targetArr = [];

const resultArr = targetArr.concat(sparseArr);
console.log(resultArr); // [empty × 3] - 稀疏性被保留

注意事项： 如果你的应用需要精确处理稀疏数组的特性，并希望保留其空槽位，那么 concat() 是正确的选择。

总结与最佳实践

何时选择 concat()：

1. 需要保持原始数组不变性时： 这是 concat() 最主要的优势，尤其是在函数式编程或需要避免副作用的场景中。
2. 处理大型数组时： 避免 push(...array) 可能遇到的参数上限问题，更安全可靠。
3. 需要保留稀疏数组的稀疏性时： 如果你的数据包含稀疏数组且需要保持其空槽位特性。
4. 清晰地表达“创建新集合”的意图时。

何时选择 push(...array)：

1. 明确需要修改现有数组时： 如果你的目标是直接向一个数组中添加元素，并且不需要原始数组的副本。
2. 处理小型且非稀疏的数组时： 在这种情况下，push 的性能通常足够好，且语法简洁。
3. 对参数数量上限没有顾虑时： 确保你合并的数组不会大到触发引擎的参数限制。

结论：

虽然 push(...array) 在语法上可能更简洁，但 concat() 在大多数场景下，特别是涉及数据不变性、大型数据集或稀疏数组时，提供了更安全、更可预测且更符合最佳实践的数组合并方案。在选择时，应根据具体的需求和场景权衡两种方法的优缺点。通常，优先考虑 concat() 能够帮助你编写更健壮和易于理解的代码。

以上就是JavaScript 数组合并：深入解析 concat 与 push 的选择的详细内容，更多请关注php中文网其它相关文章！