JS数组删除元素后length为什么不变？

一、问题复现：delete 为什么没能减小 length？

初学者在想要移除数组元素时，常常会联想到在对象中常用的 delete 关键字。然而，当把 delete 作用于数组元素时，控制台输出的行为往往违背直觉：

const fruits = ['apple', 'banana', 'orange'];
delete fruits[1]; // 期望删除第二项 'banana'

console.log(fruits);
console.log('fruits.length:', fruits.length);

执行之后，fruits[1] 变成了 <1 empty item>（在 Chrome DevTools 中显示为空白或 empty），此时直接访问 fruits[1] 会得到 undefined，但整个数组的 fruits.length 仍然顽固地保持为 3。

二、底层原理解析：JS 数组本质与 length 的定义规则

要彻底明白为什么 length 不变，首先需要理解 JavaScript 数组在语言规范里的真实面貌：

1. 数组在底层只是一个特殊的普通对象：在 JavaScript 内部，数组其实是由数字字符串作为键（如 "0"、"1"、"2"）的特殊对象，外加一个由引擎特殊维护的 length 属性。

2. ECMAScript 规范对 length 的定义：规范严格规定，数组的 length 属性的值在数值上等于“当前数组中最大的非负整数索引键 + 1”。它并不记录数组内部“实际存储了多少个非空有效值”。

图 1：JavaScript 数组内部属性结构与 delete 操作后的键值变化及稀疏数组机理

当我们执行 delete arr[1] 时，引擎只做了两件事：

• 销毁键名为 "1" 的自有属性及其对应的值 "banana"。
• 返回布尔值 true，代表属性删除成功。

此时，数组中依然存在键名为 "2" 的元素 "orange"。由于最大数字索引依然是 2，按照“最大数字索引 + 1”的规则，length 依然精确等于 2 + 1 = 3。即便你 delete arr[2]，规范中 delete 操作符也根本不会触发数组实例内部的 [[Set]] 重算逻辑，数组并不会自发扫描前面的索引并缩减 length。

三、操作步骤与内存机制对比：delete vs splice

为了让数组在移除元素后维持“紧凑排列”，并自动更新 length，JavaScript 标准库提供了 Array.prototype.splice() 方法。我们通过下图清晰展现两者在执行步骤与内存重排上的本质差异：

图 2：delete 原地留空与 splice 移位缩容的执行步骤与内存分布对比

为什么稀疏数组（Sparse Array）是性能陷阱？

当数组因为 delete 产生空洞后，它就从密集数组（Dense Array / PACKED_ELEMENTS）退化成了稀疏数组（Sparse Array / DICTIONARY_ELEMENTS）。在 V8 等现代 JS 引擎中：

• 密集数组：内部采用连续内存指针块存储，寻址性能为极高的原生硬件级线性寻址。
• 稀疏数组：由于中间存在空洞，引擎无法依靠简单偏移量取值，只能降级采用散列表（Hash Map 字典模式）进行属性查找与原型链回溯，执行遍历和读写的性能大幅下降。

四、正确解法：如何删除元素并让 length 同步改变？

在日常实际业务开发中，根据是否允许直接修改原数组，可采用以下标准方案：

1. 原地修改：使用 splice() 方法（最通用）

splice(startIndex, deleteCount) 是精确按索引删除元素的标准 API。它会将被删项之后的所有元素向前平移，并将多余末尾属性剔除，同步将 length 递减：

const list = ['apple', 'banana', 'orange'];

// 从索引 1 开始，删除 1 个元素
const removed = list.splice(1, 1);

console.log('删除后数组:', list);
console.log('被移除的项:', removed);
console.log('新 length:', list.length);

2. 端点操作：pop() 与 shift()（超高效 O(1)）

如果需要删除的元素正好处于数组的最末尾或最开始，直接使用专门的栈/队列方法比 splice 更快、意图更清晰：

const stack = [10, 20, 30];

stack.pop();   // 弹出末尾 30，stack 变为 [10, 20]，length 从 3 变为 2
stack.shift(); // 弹出头部 10，stack 变为 [20]，length 变为 1

3. 纯函数不可变方式：filter() 与 toSpliced()

在 React、Vue 3 或现代函数式数据流中，我们提倡“不可变数据（Immutable Data）”，即不破坏原有数组，而是生成一个紧凑的新数组：

• 按条件批量过滤删除：

const todos = [
  { id: 1, title: 'Write code' },
  { id: 2, title: 'Test app' },
  { id: 3, title: 'Deploy' }
];

// 过滤掉 id === 2 的元素
const newTodos = todos.filter(item => item.id !== 2);

console.log(newTodos.length); // 2 (原 todos.length 依然是 3，新数组无缝更新)

• 按索引无副作用删除（ECMAScript 2023 新标准）：

const letters = ['a', 'b', 'c'];
const updated = letters.toSpliced(1, 1); // 返回新数组 ['a', 'c']
console.log(updated.length); // 2

4. 截断与重置：直接重设 arr.length

JavaScript 允许直接修改数组的 length 属性。将 length 设为一个比当前更小的值，会强制丢弃所有大于等于该索引的元素：

const items = [1, 2, 3, 4, 5];
items.length = 2; // 原地截断，保留前 2 个元素
console.log(items); // [1, 2]

items.length = 0; // 一键清空数组
console.log(items); // []

五、开发避坑：循环中删除元素与稀疏数组陷阱

图 3：数组删除操作技术选型决策树——按变更要求、删除场景快速定位适用 API

六、总结与方法横向对比速查

回到文章核心问题：“JS数组删除元素后length为什么不变？”

答案可以用一句话概括：因为你使用了 delete，而 delete 仅仅是断开了对象上的属性链接，保留了占位空洞，且未触发 length 的重算规则；数组的 length 是由最大索引驱动的，并不是元素计数值。

图 4：JavaScript 常见数组删除方案核心特性全景对比速查表

在工程实践中：

• 永远不要在数组上使用 delete（除非有极特殊的固定稀疏哈希占位需求）。
• 需要原地删除指定位置元素并同步更新长度时，首选 arr.splice(index, count)。
• 需要兼顾不可变性（如 React / Redux 状态管理）时，使用 arr.filter() 或 arr.toSpliced()。