JS中 arr = [] 与 arr.length = 0 清空数组的区别

概览：arr = [] 与 arr.length = 0 的底层执行路径与适用边界

一、内存引用与多变量共享状态的区别

在 JavaScript 中，数组属于引用类型（Reference Type）。变量本身并不直接存储数组的所有元素，而是在栈内存中存储一个指向堆内存数组实体对象的指针。

理解这两种清空方式的根本分水岭，在于当前数组是否存在多个变量引用。当只有一个孤立变量访问该数组时，两者的执行结果在表现上似乎一致；但一旦该数组被多个变量共享（例如作为对象属性、通过函数参数传递或在事件发布订阅中被外部持有），行为差异便会立刻显现：

// 场景 1：使用 arr = [] 重新赋值
let listA = [1, 2, 3];
let copyA = listA; // copyA 与 listA 此时指向相同的堆内存地址

listA = []; // listA 指向新创建的空数组，copyA 仍指向原数组

console.log(listA); // 示例输出: []
console.log(copyA); // 示例输出: [1, 2, 3]（原有引用完全不受影响）

// 场景 2：使用 arr.length = 0 原地修改
let listB = [1, 2, 3];
let copyB = listB; // copyB 与 listB 共享同一数组引用

listB.length = 0; // 就地截断堆内存中的数组实体

console.log(listB); // 示例输出: []
console.log(copyB); // 示例输出: []（共享引用的观察者同步清空）

在场景 1 中，listA = [] 仅仅是切断了 listA 变量与旧数组之间的纽带。如果旧数组还被 copyA、外部缓存或事件监听器引用着，原数组的数据依然完整保留在内存中。如果你的业务需求是“通知所有观察者清空列表”，使用重新赋值就会直接产生数据不同步的隐蔽 Bug。

在场景 2 中，listB.length = 0 没有修改任何栈上的指针，而是直接触发了数组对象的内部属性设置操作，使得该内存块上的数据被原地清空。因此，任何持有该引用的外部模块都能立刻感知到数组已变空。

图 1：变量指针与堆内存对象在两种清空方式下的映射关系对比

二、变量声明方式对操作的限制（const 与 let）

在现代前端编码规范（如 Airbnb 或 Google Style Guide）中，通常推荐尽可能使用 const 声明变量，以避免无意间的变量重新绑定。然而，const 声明对清空数组的方式构成了硬性约束：

const dataQueue = ["任务一", "任务二"];

// 方式 A：重新赋值
dataQueue = [];
// 运行时直接抛出报错:
// Uncaught TypeError: Assignment to constant variable.

// 方式 B：原地截断
dataQueue.length = 0;
// 正常执行，dataQueue 成功被清空，其内存地址绑定保持不变

const 关键字保护的是变量标识符与其在栈内存中所绑定的引用指针，保证指针不能再指向另一个新地址；但它并不保护所指向对象内部属性的可变性。dataQueue.length = 0 属于修改对象属性，指针本身从未发生变更，因此完全符合 const 的语义与语法要求。

三、底层机制、属性描述符与边界异常

表面上看，arr.length = 0 只是一次简单的属性赋值，但在 ECMAScript 规范定义中，Array 对象的 length 具有特殊的内置行为（Exotic Array Object）。

数组的 length 属性默认具有以下特性：

• writable: true（可写）
• enumerable: false（不可枚举）
• configurable: false（不可删除或重新配置）

当执行 arr.length = 0 时，JS 引擎会触发内置的 [[Set]] 操作。引擎会验证当前 length 是否允许写入，随后从当前最大下标开始逐一向前删除元素插槽（Elements Backing Store），直至下标等于新的长度 0。这意味着如果对象被冻结或属性被锁定，操作将遇到严格边界：

// 边界情况：被 Object.freeze 冻结的数组
const frozenArr = Object.freeze([10, 20, 30]);

// 尝试原地截断：
frozenArr.length = 0;
// 在严格模式（use strict）下抛出:
// TypeError: Cannot assign to read only property 'length' of object '[object Array]'

// 相比之下，若变量是 let 声明的普通变量：
let mutableVar = Object.freeze([10, 20, 30]);
mutableVar = []; // 执行成功！mutableVar 指向了新数组，原冻结对象未受触碰

由此可见，arr.length = 0 必须依赖目标数组对象的 length 属性处于可写状态；而 arr = [] 则绕过了原对象本身的任何属性限制，只对当前的局部变量指针生效。

图 2：JS 引擎在底层执行两类清空操作时的属性检查与流水线细节

四、引擎性能与垃圾回收（V8 视角）

在处理高频循环或海量数据集合时，许多开发者会关心两者的执行性能与内存开销。在现代 JavaScript 引擎（如 Chrome 与 Node.js 使用的 V8）中，两者的工作方式存在显著差别：

1. 内存分配与对象头开销：arr = [] 必然伴随一次全新的堆内存分配。引擎需要为新数组构建对象头（Map / Hidden Class）和初始的 Elements 存储缓冲区。而 arr.length = 0 则是复用已有数组实例，仅在原地缩容或置空指针，不会产生额外的对象分配开销。在帧循环（如 requestAnimationFrame 或游戏物理循环）中高频调用时，频繁 arr = [] 可能会加速垃圾回收触发频率，引起偶发的微小卡顿。
2. 大数组的垃圾回收（GC）：如果数组内部存储了数十万个大型复杂对象，且你的变量是函数内的局部独立变量，此时直接执行 arr = [] 可以彻底切断当前作用域与旧大型对象的联系，使整块旧数组及其包含的数据迅速进入新生代或老生代的垃圾回收候选集。而原地修改对于老生代大数组，其内存缓冲区的物理缩容取决于引擎的具体策略，有时并不会立刻收缩底层容量。

五、清空数组的工程选型与决策步骤

根据前述机制与边界条件，我们可以总结出清晰的四步决策路径。在编写代码时，可以依照以下逻辑快速判断：

图 3：清空数组方式选择的工程决策步骤流程图

具体步骤展开说明：

1. 第一步（语法检查）：检查当前数组变量是否由 const 声明。如果是 const，则直接确定采用 arr.length = 0，因为任何赋值操作都会导致程序崩溃。
2. 第二步（引用检查）：确认是否有其他外部变量、父组件或回调函数持有该数组。若需要让所有外部持有者同步看到清空后的状态，必须使用 arr.length = 0。
3. 第三步（状态检查）：确认目标数组是否可能被 Object.freeze 冻结或处于只读上下文中。如果是被冻结数组且需要重置当前变量，必须使用 arr = []（前提是变量由 let 声明）。
4. 第四步（代码风格与独立性）：若上述条件均不涉及（例如函数内部私有的 let 局部临时数组），此时两者在功能上完全等价。推荐遵循团队既有代码风格规范保持一致；若团队倾向于函数式编程或不可变数据流（Immutable），推荐 arr = []。

六、全维度对比与实战总结

为了便于速查与技术复盘，下表对两种方案的核心维度进行了完整对比：

图 4：全维度特性比对矩阵与选型速查图

实战建议：在日常业务开发中，如果你需要清空一个全局共享的状态、组件传递的响应式列表，或者变量被声明为 const，应当毫不犹豫地使用 arr.length = 0；而在纯函数内部或者明确希望放弃原有引用并重新开辟独立空间的场景下，arr = [] 是更直观、更符合不可变数据思维的选择。