javascript数组的空元素占用内存吗？

Question

通常，我转换数据数组的方式可以让我在代码中更快地访问元素，假设该元素是具有 ID 属性的对象，然后我将此属性设置为数组中元素的键。举个例子，假设我有这个：

[{id: 1, name: "a"}, {id: 2, name: "b"}, etc..]

变成

[1 => {name: "a"}, 2 => {name: "b"}, etc...]

然后我可以简单地使用a[2]而不迭代数组来查找元素ID = 2

问题是某些值可能会丢失，从而导致数组中的元素为空：

  1599,
  <2 empty items>,
  1105,
  892,
  <2 empty items>,
  86,
  1695,
  999,
  <1 empty item>,
  967,
  1663,
  <3 empty items>,
  1673,
  <4 empty items>,
  1043,
  998,
  1350,
  1688,
  <3 empty items>,
  2013,
  <2 empty items>,
  136,
  1463,
  1632,
  <1 empty item>,
  1827,
  1680,
  1293,
  <2 empty items>,
  844,
  1696,
  1108,
  <1 empty item>,
  925,
  <6 empty items>,
  1144,
  <7 empty items>,
  905,
  <3 empty items>,
  2006,
  <7 empty items>,
  1876,
  <2 empty items>,
  1609,
  <2 empty items>,
  2232,
  <1 empty item>,
  1561,
  <1 empty item>,
  2203,
  <1 empty item>,
  1400,
  <3 empty items>,
  1381,
  1287,
  1312,
  <2 empty items>,
  933,
  ... 4011 more items ]

这些是否使用内存，我应该担心吗？

Answer 1

是的，他们确实如此，而且您可以轻松地自己验证这一点。创建以下类

class EmptyArray {
    constructor(size) {
        this.array = new Array(size)
    }
}

转到任何内置的 chrome 页面，例如 chrome://version/ （只是为了拥有一个非常简单的静态页面），打开开发工具并在时间轴选项上选择分配检测（没有堆栈记录），开始记录然后创建 3 个实例

a = new EmptyArray(1)
a = new EmptyArray(90)
a = new EmptyArray(90000)

停止录制，然后检查这3个实例的保留大小，你会发现它们的大小相差很大

这是一个屏幕截图