JS通过修改length截断或扩展数组的行为解析

图 0：JavaScript 数组 length 属性在截断与扩展时的核心状态变化

一、length 属性与数字索引的双向绑定本质

初学者常误以为数组的 length 仅仅在调用 push 或 pop 等方法时由内部逻辑更新。但在 ECMAScript 规范定义中，Array 异质对象（Exotic Array Objects）重写了内部的 [[DefineOwnProperty]] 方法。这一特性使 length 拥有特殊的联动约束规则：

• 正向同步：只要向数组中添加新的索引项（例如 arr[5] = "data"），且该索引大于或等于当前 length，引擎会自动将 length 调整为 索引值 + 1。
• 反向约束：当主动为 arr.length 赋值时，引擎根据新设定的数值反向重塑数组的属性集合，直接干预索引的存留。

length 属性本身的描述符具备 writable: true 和 enumerable: false。由于它是可写的，开发者可以自由赋值，但这种写操作在底层具有强制的副作用。

二、减小 length 导致数组截断的底层原理与细节

当赋予 length 的新值小于原有值时，数组会发生即时截断（Truncation）。例如执行以下操作：

// 示例：通过减小 length 截断数组
const list = ["Vue", "React", "Angular", "Svelte", "Solid"];
console.log(list.length); // 5

// 将长度缩短为 2
list.length = 2;
console.log(list); // ["Vue", "React"]
console.log(list[2]); // undefined
console.log(2 in list); // false

图 1：数组截断底层机制——逆序执行 [[Delete]]、解除内存引用与不可逆特性

1. 逆序删除算法与内存释放

根据 ECMAScript 规范，在截断数组时，引擎并不是瞬间清除一个范围指针，而是启动一个内部逆序循环，从 oldLen - 1 开始向下遍历至 newLen。循环体内依次对每一个索引字符串调用 [[Delete]] 操作。

被删除的索引属性从该数组对象中彻底脱离。如果原数组元素存储的是对象引用，且该对象在外部作用域中没有任何其他强引用，那么伴随这次删除，该对象将立即成为垃圾回收器（Garbage Collector）的可回收目标。

2. 物理截断的不可逆性

截断是具有破坏性的单向操作。部分开发者误以为将 length 调小再调大可以“暂时隐藏”某些数据，但事实并非如此：

const items = [10, 20, 30];
items.length = 1; // items 变为 [10]
items.length = 3; // items 变为 [10, <2 empty items>]

console.log(items[1]); // undefined（原本的 20 已被永久销毁，并非隐藏）

三、增大 length 扩展数组与稀疏数组空槽解析

当为 length 设置一个大于当前长度的值时，数组并不会向高位空间写入默认值，也不会预先在内存中填满 undefined。

// 示例：通过增大 length 扩展数组
const numbers = [1, 2];
numbers.length = 5;

console.log(numbers); // 控制台输出：[1, 2, <3 empty items>]
console.log(numbers.length); // 5

图 2：数组扩展机制——稀疏数组空槽（Empty Slots）与显式 undefined 的对比

1. 空槽（Empty Slot）与 undefined 的本质差异

在 Chrome DevTools 或 Node.js 环境中，未初始化的扩展区域显示为 <empty> 或 empty item。这在规范中被称为空槽（Hole）。

空槽与存储了值 undefined 的元素存在本质区别：

• 内存占用：存储 undefined 意味着对象拥有键名并且分配了值指针；而空槽意味着该索引键在对象内部的哈希表中完全不存在。
• 属性检查：arr[i] 之所以返回 undefined，是因为 JavaScript 在对象自身找不到该属性时沿着原型链向上查找，直到 Object.prototype 依然找不到，才默认返回 undefined。
• in 运算符与 hasOwnProperty：对于空槽索引，i in arr 为 false，arr.hasOwnProperty(i) 为 false；对于显式赋值 arr[i] = undefined 的位置，两者均为 true。

2. 遍历方法对空槽的差异化处理

在 JavaScript 的不同 API 中，对空槽的处理逻辑存在显著的历史分水岭，这也是实际项目中最容易出现潜在缺陷的地方：

3. V8 引擎内部优化与性能惩罚

在 V8 引擎中，紧密连续的数组通常处于 PACKED_SMI_ELEMENTS 或 PACKED_ELEMENTS 模式，此时底层采用连续内存块，具有接近 C 语言原生数组的寻址性能。

一旦通过修改 length 扩大数组产生空槽，该数组在 V8 内部会被降级为 HOLEY_ELEMENTS 模式。如果稀疏跨度极大（例如 arr.length = 1000000），数组甚至会退化为字典哈希模式（Dictionary Elements）。这种状态转换是单向不可逆的，即使随后将空槽填满，引擎也极少能自动恢复回高效的 PACKED 状态。

四、参数类型转换与合法范围校验

给 length 赋值时，并非任何值都能被接受。ECMAScript 规范对 length 的设定过程规定了严格的校验步骤。

图 3：修改 length 时的 ECMAScript 规范判定流程与边界异常分支

1. 规范算法解析：ToNumber 与 ToUint32

当执行 arr.length = value 时，引擎在内部执行如下判断链：

1. 首先对 value 执行 ToNumber() 转换，获取数值形式 numberLen。
2. 执行 ToUint32(numberLen)，将其转换为 32 位无符号整数 uintLen。
3. 比较 numberLen === uintLen：如果二者在数值上不严格相等，立即抛出 RangeError: Invalid array length。
4. 只有当参数能够无损对应到一个 0 到 2³² - 1（即 0 到 4,294,967,295）范围内的正整数时，赋值才会通过。

// 常见合法与非法 length 赋值对照

const arr = [1, 2, 3];

// 1. 合法情况（包含规范允许的隐式转换，但建议使用纯数字）
arr.length = "2";     // 转换为数字 2，截断生效
arr.length = true;    // 转换为数字 1，截断生效
arr.length = 0;       // 合法，清空数组

// 2. 非法情况：抛出 RangeError: Invalid array length
arr.length = -1;      // 负数非法
arr.length = 1.5;     // 浮点数无法无损转为 Uint32
arr.length = 2 ** 32; // 超出 32 位无符号整数最大上限 (4294967295)
arr.length = NaN;     // NaN 无法通过校验
arr.length = "abc";   // 转换为 NaN，抛出 RangeError

五、工程场景选型与最佳实践

在实际日常开发中，围绕数组 length 的修改主要集中在清空、截断和预分配三类典型场景。

图 4：数组清空与截断方案全方位对比及决策指南

1. 清空数组：arr.length = 0 vs arr = []

这是前端面试和工程开发中最为经典的对比。两者的核心差异在于引用的连续性：

• 使用 arr.length = 0（原地清空）： 修改的是现有数组对象本身。如果有其他变量或对象属性持有了该数组的引用（例如作为缓存参数传递），它们所观察到的数组内容会同步变为空。这一方法不会产生新的堆内存分配，效率极高。
• 使用 arr = []（重新赋值）： 仅仅让当前变量名指向了一个全新创建的空数组。如果存在外部引用（如 const cache = arr;），cache 中保存的仍然是包含原本数据的旧数组，无法达到同步清空的目的。

// 场景验证：多引用环境下的清空行为
const original = [1, 2, 3];
const reference = original;

// 方式 A：原地清空
original.length = 0;
console.log(reference); // []，同步清空

// 方式 B：重新指向
let source = [1, 2, 3];
const shared = source;
source = [];
console.log(shared); // [1, 2, 3]，旧引用未被释放！

2. 原地截断前 N 项：arr.length = n vs arr.splice(n)

如果需要保留数组前 n 个元素并丢弃其余元素：

• arr.length = n：直接截断，耗时极短，并且不会生成任何返回值，完全规避了临时对象的内存开销。
• arr.splice(n)：虽然同样能达到截断效果，但 splice 会将被删除的所有元素包装为一个新数组并返回。如果原数组规模达到数十万条且你并不需要这些被删除的数据，splice 会带来不必要的内存分配与 GC 压力。

3. 初始化固定长度数组时的避坑准则

为了避免意外产生稀疏数组带来的隐患，切勿使用扩充 length 的方式配合数组迭代方法：

// 错误示例：扩充 length 后调用 map
const badArr = [];
badArr.length = 3;
const mapped = badArr.map((_, i) => i * 2);
console.log(mapped); // 输出：[<3 empty items>]，回调完全没有执行！

// 正确方案 1：使用 Array.from 准确生成
const goodArr1 = Array.from({ length: 3 }, (_, i) => i * 2);
console.log(goodArr1); // [0, 2, 4]

// 正确方案 2：new Array 并配合 fill 填充实体值
const goodArr2 = new Array(3).fill(0).map((_, i) => i * 2);
console.log(goodArr2); // [0, 2, 4]

六、总结与关键结论

通过对 JavaScript 规范与底层运行机制的梳理，可以得出以下明确结论：

• 截断具有破坏性：手动减小 length 会从末尾逆序调用 [[Delete]] 永久销毁超出范围的元素，并解除对象引用。这一操作不可通过随后调大 length 进行复原。
• 扩展只产生空槽：手动增大 length 只更改长度计数，不填充 undefined 实体，生成的是稀疏数组（Holes）。大多数内置遍历高阶函数会直接跳过空槽。
• 范围严格受控：length 的取值必须在 0 到 2³² - 1 的无符号 32 位整数闭区间内，否则会抛出 RangeError。
• 工程首选场景：对于有外部共享引用的数组清空操作，首选 arr.length = 0；对于单纯丢弃尾部元素的原地截断，首选 arr.length = n 以获得零额外内存开销的最优性能。