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

作者：函数茶馆

时间：2026-10-30

详细讲解JavaScript清空数组的三种常用方法：修改length属性为0、重新赋值空数组[]以及使用splice方法。包含完整代码示例、执行结果、内存引用对比图解及最佳实践选型指南。

文章目录

在 JavaScript 日常开发中，清空数组是十分常见的数据重置操作。开发者最常用的三种清空方式分别是：直接将 length 属性设置为 0、重新赋值为空数组字面量 []，以及调用数组原型上的 splice() 方法。虽然这三种方式都能让目标数组变为包含 0 个元素的状态，但它们在底层内存机制（原地修改 vs 引用重定向）、对 const 常量声明的支持以及多变量共享引用时的联动行为上存在本质区别。

JS清空数组的三种常用方法及代码示例 — 图 1：三种清空数组方法从调用到底层执行的完整操作步骤与动作对比

方法一：将 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);

执行输出结果

清空前数组内容: [ 'Apple', 'Banana', 'Orange', 'Mango' ]
清空前数组长度: 4
清空后数组内容: []
清空后数组长度: 0

核心优势解析：

完美支持 const 声明：const 限制的是变量绑定的内存地址不可更改，而 fruits.length = 0 修改的是数组对象内部属性，并未改变变量引用，因此完全合法。
极佳的执行性能：V8 等现代 JS 引擎对此操作做了深度优化，不需要创建多余的临时对象，执行耗时极低。
全引用同步生效：由于是原地修改原数组对象，任何指向该数组的其他变量都会同步看到空数组。

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

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

代码示例

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

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

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

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

执行输出结果

清空前列表: [ 'Alice', 'Bob', 'Charlie' ]
清空后列表: []
清空后长度: 0

限制与潜在陷阱：

1. 无法应用于 const 变量：若对 const arr = [1, 2] 执行 arr = []，JavaScript 运行时会直接报错：TypeError: Assignment to constant variable。

2. 引用未同步问题：如果有其他变量也引用了原数组，重新赋值只会改变当前变量的指向，原数组本身依然存在于内存中，其他变量持有的数据丝毫不受影响。

方法三：使用 `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);

执行输出结果

清空前 scores: [ 88, 92, 79, 95, 100 ]
清空后 scores: []
清空后 scores 长度: 0
被删除的元素集合 (返回值): [ 88, 92, 79, 95, 100 ]

独特应用场景：splice() 同样是在原数组上原地操作，支持 const 变量。它与其他两种方法最大的不同在于具有明确的返回值——会返回一个包含所有被删除项的新数组。如果你在清空数组的同时，需要将原有的这批数据转存、记录日志或移交给另一个函数消费，splice(0) 是唯一一步到位的方案。

关键差异分析：原地修改 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。因此，明确操作是否具备“原地修改”特性非常关键。

选型指南与决策路径

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

具体建议归纳如下：

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

方法特性横向总结

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

方法	代码示例	内存行为	是否影响其它引用	适用场景
修改 length	`arr.length = 0;`	原地修改，截断内部元素	是（所有引用同步清空）	最通用的标准方案，尤其推荐于 `const` 数组及多处引用的数据状态
赋值空数组	`arr = [];`	重新分配指针指向新数组	否（其它引用仍保留原数组）	独立的临时局部变量（使用 `let` 声明），代码直观明了
调用 splice	`arr.splice(0);`	原地修改，提取并删除全部元素	是（所有引用同步清空）	需要获取被清空的旧元素以便做后续归档、日志或转移处理

常见疑问与补充说明

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。在常规开发中不推荐使用循环逐个弹出的方式清空数组。