JS清空大数组：length=0 与 splice 哪个性能更好

一、直观测试：两种清空方式的基准测量

假设你的数据处理管道中维护着一个批处理队列，每隔一段时间需要处理包含 1,000,000 个数值或对象的大数组，处理完毕后需要清空缓冲区以便复用。很多开发者在编写代码时习惯随意选用 arr.length = 0 或 arr.splice(0)，认为它们都是“原地清空”。但一旦数据量上升到数十万或数百万级别，两者的性能表现便会出现极大的分化。

为了直观展现两者在现代 JavaScript 引擎中的实际开销差异，我们可以通过下面的标准基准代码进行严格的隔离测量。

基准测试代码示例（可直接在 Node.js 或浏览器控制台中运行）

// 运行环境：Node.js 18+ 或现代浏览器（Chrome/Firefox/Safari）
function benchmarkClearArray() {
  const ARRAY_SIZE = 1_000_000;
  const WARMUP_RUNS = 5;
  const TEST_RUNS = 20;

  // 辅助函数：构造相同形态的密集大数组
  function createDenseArray(size) {
    const arr = new Array(size);
    for (let i = 0; i < size; i++) {
      arr[i] = i;
    }
    return arr;
  }

  // 1. 预热运行，促使 JIT 编译器进行热点优化
  for (let i = 0; i < WARMUP_RUNS; i++) {
    let a1 = createDenseArray(10_000);
    a1.length = 0;
    let a2 = createDenseArray(10_000);
    a2.splice(0);
  }

  // 2. 测量 arr.length = 0
  let totalTimeLength = 0;
  for (let r = 0; r < TEST_RUNS; r++) {
    let arr = createDenseArray(ARRAY_SIZE);
    const start = performance.now();
    arr.length = 0;
    const end = performance.now();
    totalTimeLength += (end - start);
  }
  const avgLengthTime = (totalTimeLength / TEST_RUNS).toFixed(4);

  // 3. 测量 arr.splice(0)
  let totalTimeSplice = 0;
  for (let r = 0; r < TEST_RUNS; r++) {
    let arr = createDenseArray(ARRAY_SIZE);
    const start = performance.now();
    arr.splice(0);
    const end = performance.now();
    totalTimeSplice += (end - start);
  }
  const avgSpliceTime = (totalTimeSplice / TEST_RUNS).toFixed(4);

  console.log(`=== 数组容量: ${ARRAY_SIZE.toLocaleString()} 项 ===`);
  console.log(`arr.length = 0  平均耗时: ${avgLengthTime} ms`);
  console.log(`arr.splice(0)   平均耗时: ${avgSpliceTime} ms`);
}

benchmarkClearArray();

测试结果数据对比参考

从以上基准数据可以清楚看到：随着数组规模增长到百万级别，arr.length = 0 始终保持在微秒级别的近乎常数级响应；而 arr.splice(0) 的执行时间迅速飙升至几十甚至近百毫秒，呈现出明显的线性增长。

二、底层剖析：为什么差距如此悬殊？

同样是把数组变为空数组，为什么底层的开销天差地别？答案在于两者的 ECMAScript 规范要求 以及 V8 引擎的内存分配模型。

1. arr.length = 0 的底层运作：纯粹的内部指针截断

在 JavaScript 引擎中，每个 JSArray 实例都包含一个内部属性 length 以及一个指向实际底层连续存储区的后备缓冲（Backing Store）。

• 当你执行 arr.length = 0 时，引擎在内部调用抽象操作 Set(arr, "length", 0)。
• V8 会直接更新数组头部的 length 字段，并将有效元素索引上界缩减为 0。
• 完全不会产生新的对象分配：原先分配在堆内存中的元素槽位被标记为可回收或重用，这一过程直接在现有对象内完成，属于 O(1) 级别的轻量操作。

2. arr.splice(0) 的底层运作：隐蔽的返回值构造

很多开发者忽略了 splice 方法的函数签名。根据 ECMAScript 规范（23.1.3.28 Array.prototype.splice）：

• splice(start, deleteCount) 必须返回一个新创建的数组实例，其中包含所有被删除的元素。
• 即使你的业务逻辑中根本没有接收返回值（例如只写了 arr.splice(0); 而不是 const removed = arr.splice(0);），JavaScript 引擎在规范约束下依然必须完整分配并实例化一个容量为原数组全部元素的新数组。
• 当数组包含 1,000,000 个元素时，引擎必须在堆中寻找连续空间，构建一个新的空数组对象，并将 100 万个指针或数值逐一复制进去。
• 由于这个新数组未被任何变量引用，它刚一离开执行上下文就沦为了垃圾对象（Dead Object）。这会给 V8 的新生代（Scavenge）和老生代（Mark-Sweep/Mark-Compact）垃圾回收器带来沉重的压力，触发 GC 暂停（Stop-The-World），直接拖慢主线程帧率。

三、引用共享与数据一致性分析

在讨论性能的同时，数组清空方式在业务语义上的正确性同样至关重要。除了 length = 0 和 splice(0)，日常开发中还经常见到 arr = []。

原地清空（In-place）与重新赋值（Reassign）的本质区别

arr.length = 0 与 arr.splice(0) 属于原地修改（In-place Mutation）。如果多个变量或模块持有同一个数组的引用，所有引用方都能立即看到数组已被清空：

let queueA = [1, 2, 3, 4, 5];
let queueB = queueA; // queueB 与 queueA 指向堆中的同一个数组

// 原地清空
queueA.length = 0;

console.log(queueA); // 输出: []
console.log(queueB); // 输出: [] (同步变为空，符合共享缓存预期)

相反，使用 arr = [] 并不是清空数组，而是将变量的指针重定向到一个新分配的空数组。如果其他模块依然持有原数组的引用，原数组中的大体量数据将继续滞留在内存中，既无法被清空，也无法被 GC 回收，极易引发隐藏的内存泄漏与业务逻辑分支 Bug：

let cacheA = [1, 2, 3, 4, 5];
let cacheB = cacheA;

// 重新赋值引用
cacheA = [];

console.log(cacheA); // 输出: []
console.log(cacheB); // 输出: [1, 2, 3, 4, 5] (旧大数组依然存在，内存未释放)

四、不同元素形态（Elements Kinds）对清空的影响

在 V8 引擎内部，数组会根据存储的内容被分类为不同的元素类型（Elements Kinds），例如连续整数数组（PACKED_SMI_ELEMENTS）、连续浮点数数组（PACKED_DOUBLE_ELEMENTS）、对象引用数组（PACKED_ELEMENTS）以及带有空洞的稀疏数组（HOLEY_*）。

• 同构密集数组（Packed Elements）：length = 0 表现最为优异，几乎是纳秒级完成指令下发。
• 包含复杂引用的对象数组：如果大数组内存储的是 100 万个独立的复杂对象，arr.length = 0 截断后，虽然清空操作本身瞬间完成，但如果这些对象在程序中没有其他引用，它们将整体进入待回收状态。相比之下，如果使用 splice(0)，则是“一边分配新数组复制 100 万个对象引用，一边等待回收”，内存峰值瞬间翻倍。
• 稀疏数组（Sparse Arrays / Dictionary Mode）：在极端稀疏（索引跨度巨大）的情况下，数组内部会降级为哈希表字典模式，length = 0 依然能够快速迭代清空内部字典项，其执行效率依然稳定高于构建新数组的 splice(0)。

五、工程实践决策与选型指南

结合性能要求、内存敏感度与业务场景，清空 JavaScript 数组的技术选型可以遵循以下清晰路径：

综合方案选型矩阵

生产环境落地建议

1. 确立代码规范：在团队的开发规范中明确，对于原地重置数组的操作，统一使用 arr.length = 0，消除 splice(0) 带来的无意义中间对象开销。
2. 高频场景警惕 GC 尖刺：在游戏循环、音视频数据流传输、Canvas 高频渲染或大数据量虚拟滚动等场景中，微小的 GC 停顿都可能导致掉帧。在这些关键路径中，绝不能使用 splice(0) 进行单纯的清空。
3. 精准使用 splice：只有当后续逻辑确实需要对“被移除的元素集合”做批量消费（例如 const batch = queue.splice(0, BATCH_SIZE);）时，使用 splice 才是语义与功能完全匹配的。