在 javascript 中，将一个数组的内容添加到另一个数组有多种方法，其中最常见的两种是使用 array.prototype.push() 结合扩展运算符（...），例如 array1.push(...array2)，以及使用 array.prototype.concat() 方法，例如 array1.concat(array2)。尽管它们在表面上都能实现数组内容的合并，但在底层机制、性能、行为特性和适用场景上存在显著差异。理解这些差异对于编写高质量的 javascript 代码至关重要。
1. 参数限制与堆栈溢出风险
使用 push() 方法结合扩展运算符 ... 时，JavaScript 引擎会将第二个数组 array2 的所有元素解构为独立的参数传递给 push() 方法。这意味着如果 array2 是一个非常大的数组（例如，包含数十万个元素），那么 push() 方法将尝试接收同样数量的参数。然而，大多数 JavaScript 引擎对函数可接受的参数数量存在硬性限制。当参数数量超出这个限制时，会导致“Maximum call stack size exceeded”或类似的错误。
示例：
立即学习“Java免费学习笔记（深入）”；
const largeArr = Array(150000).fill(0); // 创建一个包含15万个元素的数组
const targetArr1 = [];
try {
targetArr1.push(...largeArr); // 在某些环境下可能会抛出错误
console.log('push(...largeArr) 成功，长度:', targetArr1.length);
} catch (e) {
console.error('push(...largeArr) 发生错误:', e.message); // Chrome 等浏览器会在此处报错
}相比之下，concat() 方法在处理数组时，只需要将整个数组作为单个参数传递。它不会尝试将数组元素解构为独立的参数，因此不会受到参数数量限制的影响。
示例：
立即学习“Java免费学习笔记（深入）”；
const largeArr = Array(150000).fill(0);
const targetArr2 = [];
const resultArr = targetArr2.concat(largeArr); // 正常执行
console.log('concat(largeArr) 成功，长度:', resultArr.length); // resultArr 是一个包含15万个0的新数组从这个角度看，concat() 在处理大型数组拼接时，拥有更高的鲁棒性。
2. 性能考量与迭代次数
当使用 push(...array) 时，实际上涉及了两个潜在的迭代过程：
- 扩展运算符的迭代： ...array 会首先迭代 array 的所有元素，将它们提取出来作为独立的参数。
- push() 内部的迭代： push() 方法在接收到这些参数后，会再次迭代这些参数，并将它们逐一添加到目标数组中。
虽然现代 JavaScript 引擎通常对这种操作进行了高度优化，但在理论上，这可能导致两次迭代的开销。
而 concat() 方法则通常只需要一次内部迭代来创建新的数组并复制元素。对于性能敏感的应用，尤其是在处理大量数据时，concat() 可能在某些场景下表现出更优的性能。
3. 数组变异性与返回值
这是 concat() 和 push() 之间最核心的设计差异之一：
-
Array.prototype.push()：
- 修改原数组： push() 方法会直接修改调用它的数组（即目标数组），向其末尾添加元素。
- 返回值： 它返回的是修改后数组的新长度。
- 适用场景： 当你需要就地修改一个数组，并且关心其新长度时，push() 是一个合适的选择。
-
Array.prototype.concat()：
- 不修改原数组： concat() 方法不会修改调用它的数组，而是返回一个包含原数组和所有传入数组元素的新数组。
- 返回值： 它返回的是一个全新的数组。
- 适用场景： 当你需要生成一个新数组而不改变原始数据时，concat() 是首选。这在函数式编程范式中尤为重要，因为它避免了副作用，使得代码更易于理解、测试和维护，特别是在 .map() 或 .reduce() 等需要生成新数组的方法链中。
示例：
立即学习“Java免费学习笔记（深入）”；
const arrA = [1, 2];
const arrB = [3, 4];
// 使用 push()
const pushResult = arrA.push(...arrB);
console.log('push() 修改后的 arrA:', arrA); // [1, 2, 3, 4] (原数组被修改)
console.log('push() 返回值 (新长度):', pushResult); // 4
const arrC = [5, 6];
const arrD = [7, 8];
// 使用 concat()
const concatResult = arrC.concat(arrD);
console.log('concat() 后的 arrC:', arrC); // [5, 6] (原数组未被修改)
console.log('concat() 返回值 (新数组):', concatResult); // [5, 6, 7, 8]4. 稀疏数组的处理差异
稀疏数组（Sparse Array）是指数组中存在未被赋值的“空槽”（empty slots），而不是包含 undefined 值的数组。concat() 和 push(...array) 在处理这类数组时行为截然不同。
-
push(...array)： 当使用扩展运算符 ... 展开稀疏数组时，数组的迭代器会被调用。JavaScript 数组的默认迭代器在遇到空槽时，会将其视为 undefined 值。因此，稀疏数组中的空槽会被填充为 undefined。
示例：
立即学习“Java免费学习笔记（深入）”；
const sparseArr = Array(3); // 创建一个稀疏数组，例如：[empty × 3] const targetArrPush = []; targetArrPush.push(...sparseArr); // 这里的 `...sparseArr` 实际上展开为 `undefined, undefined, undefined` console.log('push(...sparseArr) 结果:', targetArrPush); // [undefined, undefined, undefined] -
concat()：concat() 方法在处理稀疏数组时，会保留其空槽的特性。它会将空槽作为空槽复制到新数组中。
示例：
立即学习“Java免费学习笔记（深入）”；
const sparseArr = Array(3); // [empty × 3] const targetArrConcat = []; const resultConcat = targetArrConcat.concat(sparseArr); console.log('concat(sparseArr) 结果:', resultConcat); // [empty × 3] (保留了空槽)
这个差异在处理可能包含稀疏数据的场景中非常关键，选择错误的方法可能导致数据结构发生意外的变化。
总结与最佳实践
| 特性 | push(...array) | concat(array) |
|---|---|---|
| 修改原数组 | 是，修改调用者 | 否，返回新数组 |
| 返回值 | 新数组的长度 | 新的合并数组 |
| 参数限制 | 受限于引擎的最大参数数量，可能导致堆栈溢出 | 不受参数数量限制，更健壮 |
| 性能 | 理论上可能两次迭代（展开 + 内部添加） | 通常一次迭代（创建新数组并复制） |
| 稀疏数组 | 空槽会被填充为 undefined | 保留空槽 |
| 适用场景 | 需要就地修改数组，且数组规模可控时 | 需要生成新数组，不修改原数组，处理大型或稀疏数组时 |
何时选择 concat()：
- 当你需要一个不修改原始数组的新数组时（函数式编程风格）。
- 当你处理的数组可能非常大，以避免潜在的参数数量限制错误时。
- 当你需要保留稀疏数组中的空槽特性时。
何时选择 push(...array)：
- 当你明确需要就地修改一个数组，并且对性能要求极高（在小规模数组下可能略快，但差距微乎其微）。
- 当你确定要合并的数组规模较小，不会触及参数数量限制时。
在多数现代 JavaScript 开发场景中，考虑到代码的可维护性、避免副作用以及对大型数据集的鲁棒性，Array.prototype.concat() 往往是更安全和推荐的选择。然而，理解两者的底层机制和行为差异，能帮助开发者在特定场景下做出最合适的决策。
