JavaScript中稀疏数组的空槽

2025年4月12日

JavaScript 数组中的空槽（Holes）完全解析

在 JavaScript 中，数组是一种非常灵活的数据结构，但也因此带来了一些难以直观理解的概念，其中就包括“空槽（hole）”。本文将深入解析空槽的本质、与 undefined 的区别、不同浏览器表现、以及开发者如何应对。

什么是空槽？

空槽是指 数组中某个索引位置根本没有值、也没有被初始化。它和 undefined 不同，undefined 是一个明确存在的值，而空槽则是“索引缺失”。

JavaScript 数组本质上是对象，索引是字符串形式的键。稀疏数组中未赋值的索引压根没有被定义，就像这个对象：

const obj = {};
obj[2] = "foo";
console.log(obj[1]); // undefined
console.log(1 in obj); // false

数组是对象的特殊形式，空槽就是没有这个 key 的对象属性。

const arr = [1, , 3];
// arr[1] 是一个空槽，不是 undefined

你可以通过 in 操作符检查某个索引是否存在：

console.log(1 in arr); // false
console.log(arr[1]); // undefined

空槽 vs undefined

比较项	空槽（hole）	`undefined`
值是否存在	❌ 不存在	✅ 存在
`in` 操作符结果	`false`	`true`
是否能遍历到	❌ 一般跳过	✅ 可以遍历到
是否占用数组空间	❌ 理论上不占	✅ 占用

示例：

const arr1 = [undefined];
const arr2 = [,];

console.log(0 in arr1); // true
console.log(0 in arr2); // false

图示对比：稠密数组 vs 稀疏数组

稠密数组（Dense Array）

const dense = ["a", undefined, "c"];

索引:   0        1        2
值:    'a'    undefined  'c'
状态:   ✔️       ✔️        ✔️

稀疏数组（Sparse Array，含空槽）

const sparse = ["a", , "c"];

索引:   0      1        2
值:    'a'   [空槽]     'c'
状态:   ✔️      ❌        ✔️

空槽的运行时表现差异

ECMAScript 明确定义了空槽不参与大多数数组方法的处理行为，比如 map, forEach, filter, reduce 等。行为在规范中是一致的。

虽然空槽的语义在 ECMAScript 规范中是统一的，但各大浏览器或 JS 引擎的行为略有不同：

控制台显示差异

const arr = [1, , 3];
console.log(arr);

引擎	控制台输出
Chrome	`[1, <1 empty item>, 3]`
Firefox	`[1, <empty>, 3]`
Safari	`[1, <empty>, 3]`
Node.js (V8)	`[ 1, <1 empty item>, 3 ]`

运行时差异

主要体现在以下几个方面：

行为	Chrome (V8)	Firefox (SpiderMonkey)	Node.js	Safari
`console.log([,1,2])`	显示 `<1 empty item>`	显示 `<empty>`	和 Chrome 一致	显示 `<empty>`
性能优化策略	可能放弃稠密优化	同样放弃优化	同 V8	自有策略
`JSON.stringify([,1])`	`"[null,1]"`	一致	一致	一致

💡注意：空槽在所有主流浏览器中的序列化（如 JSON.stringify）行为一致，会被转换为 null。

JSON 序列化行为

JSON.stringify([1, , 3]);
// 结果: "[1,null,3]"

空槽会被序列化为 null，这是因为 JSON 无法表示“无属性的索引”。

数组方法行为

方法	是否跳过空槽
`forEach`	✅ 跳过
`map`	✅ 跳过
`filter`	✅ 跳过
`for...in`	❌ 不跳过
`for...of` + `entries()`	✅ 跳过
`Object.keys()`	✅ 只列出有值的索引

示例：

[1, , 3].forEach((v, i) => console.log(i, v));
// 输出: 0 1 和 2 3，中间不会有 1 undefined

如何避免空槽带来的问题

✅ 使用 .fill() 初始化数组：

const arr = new Array(5).fill(undefined);

❌ 避免使用 Array(n) 创建数组然后直接使用：
```
const bad = new Array(5); // 空槽数组
```

❌ 避免使用 delete 删除数组元素：

delete arr[2]; // 会留下空槽

✅ 推荐使用 splice()：

arr.splice(2, 1); // 删除索引2并保持稠密

✅ 判断空槽的方法：

function hasHole(arr) {
  return arr.some((_, i) => !(i in arr));
}

小结

空槽是一种“未定义的存在”，在数组中表现为索引缺失。空槽不是值，而是“值的缺席”，该索引在数组内部压根不存在。
它不同于 undefined，不应该混淆。undefined 是一种值，空槽根本没有值。
空槽影响数组方法的行为、调试可读性和运行时性能。大多数数组方法会忽略空槽，但标准行为是统一的。
写代码时建议避免空槽，保持数组的稠密性，有助于提高可读性、性能和逻辑一致性。不同引擎对空槽的显示方式、优化策略可能不同，但语义是一致的。
不建议依赖空槽进行逻辑编程，推荐用 undefined 表示空值更安全。