JS清空数组的三种常用方法及代码示例

方法一：将 length 属性设置为 0（推荐首选）

在 JavaScript 中，数组的 length 属性不仅是一个只读的计数器，它是一个可读写的属性（writable）。当你主动将 length 的值设置得比当前实际长度更小时，JavaScript 引擎会自动截断数组，移除超出新长度范围的所有元素；将其设为 0 则会瞬间剔除所有元素。

代码示例

// 声明一个包含多个元素的数组（即使是 const 声明亦可）
const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

console.log('清空前数组内容:', fruits);
console.log('清空前数组长度:', fruits.length);

// 核心操作：将 length 设置为 0
fruits.length = 0;

console.log('清空后数组内容:', fruits);
console.log('清空后数组长度:', fruits.length);

方法二：赋值为空数组字面量 []

第二种方法非常直观：直接给变量重新赋值一个新的空数组字面量 []。这种做法相当于让变量“丢弃”旧数组的内存地址，转而指向堆内存中一块全新的空数组区域。

代码示例

// 注意：必须使用 let 或 var 声明，不能使用 const
let userList = ['Alice', 'Bob', 'Charlie'];

console.log('清空前列表:', userList);

// 核心操作：重新赋值为空数组
userList = [];

console.log('清空后列表:', userList);
console.log('清空后长度:', userList.length);

方法三：使用 splice() 方法

数组原生的 splice() 方法用于向数组添加或删除元素。它的基本语法是 arr.splice(startIndex, deleteCount)。如果我们传入 0 作为起始索引，并将删除数量指定为原数组的完整长度（或者直接省略第二个参数，默认删到末尾），就可以将数组内的所有项完全移除。

代码示例

const scores = [88, 92, 79, 95, 100];

console.log('清空前 scores:', scores);

// 核心操作：从索引 0 开始删除所有元素，并获取被移除的元素
const removedItems = scores.splice(0, scores.length);
// 亦可简写为：scores.splice(0);

console.log('清空后 scores:', scores);
console.log('清空后 scores 长度:', scores.length);
console.log('被删除的元素集合 (返回值):', removedItems);

关键差异分析：原地修改 vs 引用重定向

很多初学者在清空数组时容易产生疑惑：“既然 arr = [] 也能让变量变成空数组，为什么官方规范和多数工程团队更推崇 arr.length = 0？”核心就在于堆栈引用（Reference）的处理机制。

我们可以通过下面这段简短的代码在 Node.js 或浏览器控制台中直观验证这种差异：

// 实验 1：重新赋值 []
let originalList = ['Vue', 'React', 'Angular'];
let sharedRef = originalList; // 共享引用

originalList = []; // 重新赋值
console.log('originalList:', originalList); // 输出: []
console.log('sharedRef:', sharedRef);       // 输出: ['Vue', 'React', 'Angular']（未被清空！）

// 实验 2：设置 length = 0
let listA = ['Vue', 'React', 'Angular'];
let listB = listA; // 共享引用

listA.length = 0; // 原地截断
console.log('listA:', listA); // 输出: []
console.log('listB:', listB); // 输出: []（同步被清空！）

在大型应用（例如基于 Vue 响应式状态、React 外部 Store 或组件通信传参）中，如果某个数组被多个模块或组件共用，直接给变量赋值 [] 会导致其它组件仍然持有旧数据，从而引发数据不一致、UI 视图未能同步刷新或内存泄漏等隐蔽 Bug。因此，明确操作是否具备“原地修改”特性非常关键。

选型指南与决策路径

面对具体业务场景时，应该如何选择最合适的清空方式？可参照以下决策流程：

具体建议归纳如下：

1. 通用首选（80% 以上业务场景）：直接使用 arr.length = 0。它不受变量声明类型（const / let）限制，保持原地修改，避免引用断裂，且引擎执行开销极小。
2. 需要消费被清空的数据：使用 arr.splice(0)。在处理队列清空、数据批量转存时非常方便。
3. 独立局部变量且追求代码最简：在函数内部临时定义的 let 局部数组，若确信没有外部引用指向它，使用 arr = [] 语义简单直观。

方法特性横向总结

下方的横向对比图与表格完整总结了三种常用方法的关键维度差异：

常见疑问与补充说明

1. 为什么不能使用 delete arr[i] 来清空数组？

在 JavaScript 中，delete 操作符是用来删除对象属性的。如果对数组项执行 delete arr[0]，它只会将该索引上的值移除，变成一个稀疏数组（empty / undefined 槽位），但数组的 length 完全不会发生改变，也不会释放内部空间。例如 [1, 2, 3] 经过 delete 后变为 [<empty>, <empty>, <empty>]，长度依然是 3，因此绝不能用 delete 来清空数组。

2. 循环使用 pop() 或 shift() 清空可行吗？

有的开发者会写出 while(arr.length > 0) { arr.pop(); } 这样的代码。尽管它能达到清空的目的，并且也是原地操作，但每次循环都需要重新计算 length、修改内部偏移并触发单步出栈，执行效率远低于直接重置 arr.length = 0。在常规开发中不推荐使用循环逐个弹出的方式清空数组。