时间戳

首页 > 解决方案 > 为什么 javascript 在浏览器控制台中显示 (66) [empty × 65, {...}]？

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

问题描述

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

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

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

标签： javascript

解决方案

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

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

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

请注意，这undefined与前 65 个索引中的文字值不同，后者将显示为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。

推荐阅读