JavaScript数组合并：concatvspush怎么选

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JavaScript数组合并：concat比push更优的场景》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

本文深入探讨了在 JavaScript 中拼接数组时，Array.prototype.concat() 方法相对于 Array.prototype.push() 结合扩展运算符的优势。我们将从参数限制、性能考量、数组变异性以及稀疏数组处理等多个维度进行对比，帮助开发者理解何时选择 concat 以编写更健壮、高效且可维护的代码。

在 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”或类似的错误。

示例：

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() 方法在处理数组时，只需要将整个数组作为单个参数传递。它不会尝试将数组元素解构为独立的参数，因此不会受到参数数量限制的影响。

示例：

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) 时，实际上涉及了两个潜在的迭代过程：

1. 扩展运算符的迭代： ...array 会首先迭代 array 的所有元素，将它们提取出来作为独立的参数。
2. push() 内部的迭代： push() 方法在接收到这些参数后，会再次迭代这些参数，并将它们逐一添加到目标数组中。

虽然现代 JavaScript 引擎通常对这种操作进行了高度优化，但在理论上，这可能导致两次迭代的开销。

而 concat() 方法则通常只需要一次内部迭代来创建新的数组并复制元素。对于性能敏感的应用，尤其是在处理大量数据时，concat() 可能在某些场景下表现出更优的性能。

3. 数组变异性与返回值

这是 concat() 和 push() 之间最核心的设计差异之一：

• Array.prototype.push()：

  • 修改原数组： push() 方法会直接修改调用它的数组（即目标数组），向其末尾添加元素。
  • 返回值： 它返回的是修改后数组的新长度。
  • 适用场景： 当你需要就地修改一个数组，并且关心其新长度时，push() 是一个合适的选择。

• Array.prototype.concat()：

  • 不修改原数组： concat() 方法不会修改调用它的数组，而是返回一个包含原数组和所有传入数组元素的新数组。
  • 返回值： 它返回的是一个全新的数组。
  • 适用场景： 当你需要生成一个新数组而不改变原始数据时，concat() 是首选。这在函数式编程范式中尤为重要，因为它避免了副作用，使得代码更易于理解、测试和维护，特别是在 .map() 或 .reduce() 等需要生成新数组的方法链中。

示例：

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。

  示例：

  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() 方法在处理稀疏数组时，会保留其空槽的特性。它会将空槽作为空槽复制到新数组中。

  示例：

  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() 往往是更安全和推荐的选择。然而，理解两者的底层机制和行为差异，能帮助开发者在特定场景下做出最合适的决策。

好了，本文到此结束，带大家了解了《JavaScript数组合并：concatvspush怎么选》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！