无需创建新数组即可扩展 JavaScript 数组

2024-03-08 19:12:55

如何在不创建新数组的情况下扩展 JavaScript 数组

前言

在 JavaScript 中，数组是存储一组相关数据的重要数据结构。然而，有时我们需要将其他数组的内容合并到现有数组中。虽然有 concat 方法可以做到这一点，但它会创建一个新数组，这在处理大型数组时效率很低。本文将探讨如何有效地扩展 JavaScript 数组，而无需创建新数组。

利用数组长度

JavaScript 数组有一个名为 length 的属性，表示数组中元素的数量。我们可以利用这个属性来逐一扩展数组的长度，然后将新元素分配给相应的索引位置。

步骤：

获取现有数组 a 的当前长度 aLength。
逐一扩展数组 a 的长度，以容纳来自数组 b 的元素。
将数组 b 中的每个元素分配给数组 a 中相应的索引位置。

性能优化

当数组 a 非常大时，上述算法可能会很慢。为了优化性能，我们可以使用以下方法：

使用 Array.prototype.push() 方法代替逐一扩展数组的长度。
使用 Array.from() 方法将数组 b 转换为一个对象，然后使用扩展运算符 (...) 将其扩展到数组 a 中。

代码示例

// 基本算法
function extendArray(a, b) {
  let aLength = a.length;

  for (let i = 0; i < b.length; i++) {
    a.length = aLength + i + 1;
    a[aLength + i] = b[i];
  }

  return a;
}

// 优化后的算法
function extendArrayOptimized(a, b) {
  a.push(...b);
  return a;
}

案例场景

const a = [1, 2];
const b = [3, 4, 5];

// 使用基本算法
const extendedArray = extendArray(a, b);
console.log(extendedArray); // 输出： [1, 2, 3, 4, 5]

// 使用优化后的算法
const extendedArrayOptimized = extendArrayOptimized(a, b);
console.log(extendedArrayOptimized); // 输出： [1, 2, 3, 4, 5]