为什么Javascript在浏览器控制台中显示（66）[空×65，{…}]？

Question

一些常见的问题是，即使内部有内容，为什么Array看起来还是零。我的问题现在有点怪异。为什么会看到

client = AgoraRTC.createClient({mode, codec});
client.on('stream-subscribed'

在chrome控制台中，即使数组内部至少包含1个数组值？

Answer 1

这就是当您拥有稀疏数组时看到的内容-定义了一些指标，但是有些指标低于定义的指标未定义（或曾经分配给它们） ，例如：

const arr = [];
arr[65] = 'foo';
console.log(arr);

（在浏览器控制台中查看这两个代码片段的结果，该代码片段控制台将不可见）

请注意，这与在前65个索引中具有文字undefined值不同，后者将显示为undefined而不是empty：

const arr = new Array(65).fill(undefined);
arr[65] = 'foo';
console.log(arr);

但是，稀疏数组几乎从来都不是一个好主意-如果您看到了这一点，则表明您可能应该修复代码以避免稀疏数组。考虑另一种结构，也许是带有数字键的对象：

const obj = {
  '65': 'foo'
};

程序员将期望数组是元素的有序集合-集合在有序集合的顶部根本没有任何值（不仅是undefined，而且没有任何值）意味着什么值）？只是没有多大意义-尽管可能，但这种构造并不是数组的目的。

正如Kaiido所述，不会使用forEach之类的数组方法遍历空元素：

const arr = [];
arr[65] = 'foo';
arr.forEach((item, i) => {
  console.log(item, i);
});

这有点道理，但是它仍然不直观（您是否可以在不亲自尝试代码或不查看规范的情况下确定这一点？）。人们通常会期望forEach回调的第一次迭代的索引为0。

Answer 2

只有65个空元素，可以像这样创建数组：

const arr = Array(65);
arr.push(1);
console.log(arr)

或在新数组中的某个索引上设置新元素；

const arr = [];
arr[65] = 1;