为什么 javascript 在浏览器控制台中显示 (66) [empty × 65, {...}]？ [复制]答案

【问题标题】：why javascript shows (66) [empty × 65, {…}] in browser console? [duplicate]为什么 javascript 在浏览器控制台中显示 (66) [empty × 65, {...}]？ [复制]
【发布时间】：2019-06-12 10:20:18
【问题描述】：

一些常见的问题是，为什么即使里面有内容，Array 也看起来为零。我现在的问题有点奇怪。为什么我看到了

 (66) [empty × 65, {…}]

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

【问题讨论】：

标签： javascript

【解决方案1】：

当您有一个 稀疏数组 时，您会看到这些 - 定义了一些索引，但一些索引低于定义的索引 未定义（或曾经分配给），例如：

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

（在浏览器控制台看这两个sn-ps的结果，sn-p控制台是看不到的）

请注意，这与前 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。

【讨论】：

您能否提供更多信息或示例说明为什么差距是一个坏主意？
@Zim84 它们很奇怪且不直观，您可以从这个问题的存在中看出。程序员会期望数组是元素的有序集合——集合在有序集合的顶部根本没有任何值意味着什么（不仅仅是undefined，而是没有任何值）？它只是没有多大意义 - 虽然可能，但这样的构造不是数组的用途。
@Kaiido 我确实注意到“在浏览器控制台中查看上述内容，而不是 sn-p 控制台”:)

【解决方案2】：

只有 65 个空元素，如果你像这样创建数组，它可以是：

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

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

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

【讨论】：