JS数组length属性详解：获取长度与修改行为

一、length 的底层本质：索引边界而非元素计数

ECMAScript 规范对数组对象的 length 属性有着严格的定义：length 是一个无符号 32 位整数（Uint32），其取值范围在 0 到 4,294,967,295（即 2³² - 1）之间。在任何时刻，数组内部都维护着这样一条不变量关系：

length === (数组中最大数字索引) + 1

很多初学者常误以为 length 返回的是“数组中当前实际存储了多少个元素”。在连续存储的密集数组（Dense Array）中，这种直觉碰巧是成立的；但一旦遇到包含未分配槽位的稀疏数组（Sparse Array），该结论便会失效。

1. 密集数组与稀疏数组的对比

密集数组中的索引从 0 开始连续递增，每个槽位均已显式写入值；稀疏数组则允许在索引序列中跳跃写入。此时，跳过的索引位置并没有在对象中创建属性，这些空缺在 V8 引擎中被称为“空槽”（empty slots / holes）。

// 示例 1：密集数组
const denseArr = ['Apple', 'Banana', 'Cherry'];
console.log(denseArr.length); // 3

// 示例 2：稀疏数组（直接为跨度较大的索引赋值）
const sparseArr = ['Apple'];
sparseArr[4] = 'Date';

console.log(sparseArr.length);
console.log(1 in sparseArr);
console.log(sparseArr);

如上所示，尽管 sparseArr 实际上只分配了 2 个元素（索引 0 和 4），但因为最大的索引是 4，所以 sparseArr.length 计算结果为 4 + 1 = 5。通过 in 操作符可以明确检测到索引 1 根本不存在于该数组对象上。

二、读取 length 属性的常见操作与遍历差异

读取 length 最基础的用途是作为循环迭代的终止条件以及计算末尾元素的索引。

1. 获取最后一个元素

因为 JavaScript 数组采用从 0 开始的零基索引，数组末尾元素的索引始终是 length - 1。在现代 JavaScript (ES2022+) 中，推荐结合 at(-1) 方法让意图更加直观：

const fruits = ['Apple', 'Banana', 'Cherry'];

// 传统方式：基于 length 偏移
const lastOne = fruits[fruits.length - 1];

// 现代语法：at 方法语义更清晰
const lastModern = fruits.at(-1);

console.log(lastOne, lastModern);

2. 不同遍历手段在处理含空洞数组时的行为差异

当读取 length 并用于数组遍历时，必须注意遍历方式对空槽的处理区别：

• 标准 for 循环：严格依赖 i < arr.length 递增访问。当读取未分配的空槽时，JavaScript 会遵循属性查找链，最终返回 undefined。
• 高阶方法（如 forEach, map, filter）：内部在回调前会先执行 HasProperty(arr, index) 检查。如果该索引是 empty slot，则直接跳过，不会触发回调。
• for...of 迭代器：遵循 ArrayIterator 规范，遍历次数由 length 决定，但在访问空槽时会主动产出 undefined。

const mixed = ['A'];
mixed[2] = 'C'; // mixed 为 ['A', <1 empty item>, 'C'], length 为 3

// 1. for 循环访问
for (let i = 0; i < mixed.length; i++) {
  console.log(`for [${i}]:`, mixed[i]);
}

// 2. forEach 遍历
mixed.forEach((val, i) => {
  console.log(`forEach [${i}]:`, val);
});

3. length 的属性描述符特征

通过 Object.getOwnPropertyDescriptor 可以观察 length 属性的底层修饰符：

const testArr = [1, 2, 3];
console.log(Object.getOwnPropertyDescriptor(testArr, 'length'));

该结果解释了三个关键事实：

1. writable: true：允许开发者直接显式给 length 赋值修改。
2. enumerable: false：在 for...in 或 Object.keys() 中，length 属性不会被枚举出来。
3. configurable: false：该属性的配置不可被删除或重新定义，执行 delete arr.length 会直接返回 false（严格模式下抛出 TypeError）。

三、修改 length 属性的行为与底层机制

与许多其他编程语言中只读的数组大小不同，JavaScript 明确允许直接给数组的 length 属性赋新值。这个赋值动作不是单纯的元数据修改，而是会根据新旧数值的大小关系触发完全不同的物理行为。

行为一：将 length 改小（物理截断与内存回收）

当将 length 设置为一个小于当前值的新数值时，所有索引大于或等于该新值的元素会被立即、永久性地物理删除。这种删除是不可逆的，即便随后立即把 length 调大，被删除的数据也无法恢复。

const nums = [10, 20, 30, 40, 50];
console.log('初始数组:', nums);

// 将 length 缩小到 2
nums.length = 2;
console.log('截断后数组:', nums);

// 重新将 length 调回 5
nums.length = 5;
console.log('再次增大后:', nums);

行为二：将 length 增大（扩展与产生空洞）

当将 length 设置为大于当前值的数值时，JavaScript 引擎并不会在新增的位置上填充 undefined，而仅仅是更新了边界指针，创建了若干空槽（empty slots）。

const letters = ['a', 'b'];
letters.length = 4;

console.log(letters);
console.log('索引 2 是否实际存在:', 2 in letters);
console.log('读取索引 2 的值:', letters[2]);

值得强调的是，读取 letters[2] 虽然得到 undefined，但这仅仅是因为访问了一个对象上不存在的属性而回退到默认未定义状态，其底层并没有分配任何实际键值。

行为三：将 length 设为 0（原地清空 vs 重新赋值）

在实际开发中，清空数组常常存在两种做法：arr.length = 0 与 arr = []。这两者在内存指针和多变量引用共享时存在根本性差异。

// 场景对比
let refA = [1, 2, 3];
let refB = refA;

// 方式 A：原地截断清空
refA.length = 0;
console.log('原地清空后 refB:', refB); // refB 同步变为空数组 []

// 方式 B：重定向引用
let listA = [1, 2, 3];
let listB = listA;

listA = [];
console.log('重定向引用后 listB:', listB); // listB 依然保留原数组 [1, 2, 3]

四、修改 length 时的异常与边界限制

给 length 赋值并非任意值都能被接受。当传入不符合规范的数值时，JavaScript 引擎会立即抛出异常。

1. 常见的 RangeError: Invalid array length

根据规范，赋给 length 的值会被先通过 ToNumber() 转换为数值，然后该数值必须与 ToUint32() 转换后的结果严格相等。以下情况均会导致抛出 RangeError：

• 负数：如 arr.length = -1
• 浮点数 / 小数：如 arr.length = 3.5（即使有效，也必须是无小数的整数）
• 超出 32 位无符号整数上限：如 arr.length = Math.pow(2, 32)（有效范围最大为 4,294,967,295）
• NaN 或非纯数字字符串：如 arr.length = NaN 或 arr.length = "abc"

const sample = [1, 2, 3];

try {
  sample.length = -5;
} catch (e) {
  console.log('负数异常:', e.name, e.message);
}

try {
  sample.length = 2.8;
} catch (e) {
  console.log('浮点数异常:', e.name, e.message);
}

2. 严格模式下的只读与不可配置拦截

如果数组被冻结（Object.freeze(arr)）或者将其 length 的描述符显式设为 writable: false，任何修改 length 的尝试都会被拦截：

'use strict';
const frozenArr = Object.freeze([1, 2, 3]);

try {
  frozenArr.length = 1;
} catch (e) {
  console.log('修改冻结数组 length 报错:', e.name, e.message);
}

另外，若数组末尾的某些元素被配置为不可配置（configurable: false），当执行截断操作时，引擎在无法删除该特定元素的位置会停下，并保留能够截断的最大边界，最后同样抛出 TypeError。

五、核心要点总结与实战建议

JavaScript 数组的 length 属性既是数组边界的反映者，也是操作数组元素生命周期的控制手柄。