JavaScript数组：X.push(?)与X[index]=?的区别及大数据量性能疑问

嘿，这个问题问得相当精准！尤其是补充的超大数组场景的疑问，刚好戳中了JS数组底层实现的关键点，我来给你拆解清楚：

这两种方式表面上能得到“看起来类似”的数组，但底层行为其实有不少区别：

• 数组长度与元素位置的逻辑

  • X.push(??)：会自动把数组长度X.length加1，然后把元素放到当前数组的最后一位。哪怕你之前手动设置了数组长度（比如let X = new Array(10)），push也不会去填充前面的空位，只会在现有长度的基础上往后追加。比如上面的例子，执行X.push('a')后，数组长度会变成11，索引10的位置才是新元素。
  • X[index] = ??：如果你的index大于等于当前数组的X.length，数组会直接把长度扩展到index + 1，中间跳过的索引位会被留成empty空位（注意，这和undefined不一样！）。比如let X = []; X[5] = 'a'，数组长度是6，但索引0-4都是empty，不是undefined。

• 空位的实际影响
  这两种方式产生的数组，在使用数组方法（比如map、forEach）时表现完全不同：很多数组方法会直接跳过empty空位，但不会跳过undefined。举个例子：

  // 直接赋值索引产生空位
  let arr1 = [];
  arr1[2] = 'test';
  arr1.forEach(item => console.log(item)); // 啥都不会输出，因为索引0、1是empty
  
  // push添加undefined
  let arr2 = [];
  arr2.push(undefined);
  arr2.push(undefined);
  arr2.push('test');
  arr2.forEach(item => console.log(item)); // 会输出两个undefined + 一个test
  

这正是你补充提问的核心，直接说结论：预先分配空间后通过索引赋值，在内存和时间上通常更有优势，但具体差异取决于JS引擎的实现。

• 内存层面

  • 当你用new Array(largeSize)预先分配数组时，JS引擎可以一次性申请一块连续的内存空间（如果数组元素是同类型的，比如全是数字，引擎甚至会用类似TypedArray的高效存储方式），减少内存碎片化的问题。
  • 而push是动态扩容的：JS数组底层是动态数组结构，当当前容量不够时，引擎会重新申请一块更大的内存（通常是原容量的1.5-2倍），然后把旧数组的所有元素复制过去。这个扩容+复制的过程，在超大数组时会产生额外的内存开销，而且旧的内存块需要等待垃圾回收，短时间内会占用更多内存。

• 时间层面

  • 预先分配后直接赋值索引，每一次操作都是O(1)的，没有额外开销。
  • push在不需要扩容时是O(1)，但遇到扩容时就是O(n)的时间复杂度（因为要复制所有元素）。如果数组特别大，多次扩容的累计时间成本会非常明显。

不过也要提一句：现代JS引擎（比如Chrome的V8）对push做了很多优化，比如如果能预测到数组的增长趋势，可能会提前预留空间。但如果是明确知道数组最终长度的场景，预先分配再赋值还是更稳妥的选择。

• 如果你明确知道数组的最终长度，尤其是数组很大的时候，优先用new Array(length)预先分配空间，再通过索引赋值，避免动态扩容的额外开销。
• 如果不确定最终长度，或者元素是逐步添加的，push更方便，代码可读性也更好，小到中等大小的数组完全不用担心性能问题。

内容的提问来源于stack exchange，提问作者Lulz