JavaScript 中的 Array 构造函数与稀疏数组的实现原理与差异

一、描述

JavaScript 中的数组是动态的、可存储任意类型元素的有序集合。Array 构造函数用于创建数组实例，但它在不同使用方式下会产生密集数组（dense array）或稀疏数组（sparse array）。理解这两者的实现原理、差异和潜在陷阱，对于优化性能和避免意外行为至关重要。

二、核心知识：密集数组 vs. 稀疏数组

1. 密集数组：

   • 数组中的每个索引位置都有对应的元素（包括 undefined 值）。
   • 内存中通常以连续或接近连续的方式分配存储。
   • 例如：[1, 2, 3] 或 new Array(3).fill(0) 创建的数组。

2. 稀疏数组：

   • 数组中某些索引位置“缺失”，即没有对应的元素。
   • 内存中可能不连续，V8 引擎会将其优化为字典模式（慢速路径）。
   • 例如：new Array(3) 创建的数组，或通过 arr[5] = 10 在空数组中直接赋值。

三、Array 构造函数的不同用法

1. 创建密集数组

• 带参数调用：new Array(element0, element1, ..., elementN)

  • 构造函数接收多个参数，每个参数成为数组的一个元素。
  • 示例：

    const arr = new Array(1, 2, 3);
    console.log(arr); // [1, 2, 3]
    console.log(arr.length); // 3
    console.log(arr[0]); // 1
    

  • 结果：创建一个长度为 3 的密集数组，所有索引均有定义。

• 使用 Array.of()：

  • 专为解决 new Array(3) 的歧义设计，始终从参数创建密集数组。
  • 示例：

    const arr = Array.of(3);
    console.log(arr); // [3]
    console.log(arr.length); // 1
    

2. 创建稀疏数组

• 单数字参数调用：new Array(arrayLength)

  • 当构造函数接收一个数值参数时，它被解释为数组长度，而不是元素。
  • 示例：

    const arr = new Array(3);
    console.log(arr); // [empty × 3] 或 [<3 empty items>]
    console.log(arr.length); // 3
    console.log(arr[0]); // undefined
    console.log(0 in arr); // false
    

  • 关键点：数组长度被设为 3，但索引 0、1、2 处没有元素。arr[0] 返回 undefined 是因为 JavaScript 对缺失索引的访问规定返回 undefined，但 0 in arr 为 false 证明索引不存在。

• 手动制造稀疏数组：

  const arr = [];
  arr[5] = 'hello';
  console.log(arr); // [empty × 5, "hello"]
  console.log(arr.length); // 6
  console.log(arr[3]); // undefined
  console.log(3 in arr); // false
  

四、稀疏数组的实现原理

1. V8 引擎的优化策略：

   • V8 对数组使用多种内部表示形式，以平衡性能和内存：
     • 快速元素：针对密集数组，使用连续内存存储，支持快速索引访问。
     • 字典元素：针对稀疏数组，使用哈希表（字典）存储，索引为键，元素为值。访问速度较慢，但节省内存。

2. 稀疏数组何时被优化为字典模式？

   • 当数组的“空缺率”较高时，V8 可能将其转换为字典模式。
   • 例如：new Array(1000000) 会创建稀疏数组，V8 可能用字典存储，因为分配连续内存浪费空间。

3. 验证稀疏性：

   • 使用 Object.hasOwn(arr, index) 或 index in arr 检测索引是否存在。
   • 示例：

     const sparse = new Array(5);
     console.log(Object.hasOwn(sparse, 2)); // false
     console.log(2 in sparse); // false
     

五、稀疏数组的陷阱与影响

1. 遍历差异：

   • forEach、map、filter 等数组方法跳过缺失元素。
   • 示例：

     const sparse = new Array(3);
     sparse[1] = 'b';
     sparse.forEach((item, idx) => console.log(idx, item)); // 仅输出: 1 'b'
     

2. 性能差异：

   • 密集数组的遍历、访问速度更快，因内存局部性和 CPU 缓存友好。
   • 稀疏数组的字典模式访问为 O(1) 但常量因子大，且 V8 可能触发去优化。

3. JSON 序列化：

   • 稀疏数组中的缺失索引在 JSON.stringify 中转为 null。
   • 示例：

     const sparse = new Array(3);
     sparse[1] = 2;
     console.log(JSON.stringify(sparse)); // [null,2,null]
     

六、密集与稀疏数组的转换

1. 稀疏 → 密集：

   • 使用 Array.from()：

     const sparse = new Array(5);
     sparse[2] = 'x';
     const dense = Array.from(sparse);
     console.log(dense); // [undefined, undefined, "x", undefined, undefined]
     console.log(2 in dense); // true
     

   • 使用扩展运算符：

     const dense = [...sparse]; // 同上
     

   • 注意：缺失索引转为 undefined 值，成为密集数组。

2. 密集 → 稀疏：

   • 通过删除元素或指定长度：

     const arr = [1, 2, 3];
     delete arr[1]; // 变为稀疏数组
     console.log(arr); // [1, empty, 3]
     console.log(1 in arr); // false
     

七、实际应用与建议

1. 创建定长密集数组的技巧：

   • 避免 new Array(n) 的稀疏性，使用：

     const dense1 = Array.from({ length: 5 }, () => 0); // [0,0,0,0,0]
     const dense2 = Array.from({ length: 5 }, (_, i) => i); // [0,1,2,3,4]
     const dense3 = new Array(5).fill(0); // [0,0,0,0,0]
     

2. 检测稀疏数组：

   function isSparse(arr) {
       for (let i = 0; i < arr.length; i++) {
           if (!(i in arr)) return true;
       }
       return false;
   }
   console.log(isSparse(new Array(5))); // true
   console.log(isSparse([1, 2, 3])); // false
   

3. 性能优化建议：

   • 在需要高性能遍历的场景，使用密集数组。
   • 若数组大部分索引无值，且随机访问少，可使用 Map 或 Set 替代稀疏数组。

八、总结

• Array 构造函数：单数字参数创建稀疏数组，多参数创建密集数组。
• 稀疏数组：索引缺失，内存可能不连续，遍历时被跳过，性能通常较差。
• 密集数组：所有索引有值（包括 undefined），内存连续，遍历高效。
• 最佳实践：用 Array.from、Array.of 或 fill 明确意图，避免意外稀疏性；在数据稀疏时考虑使用其他数据结构。