javascript - 数组中什么是空的？例如[空×5]

Question

很抱歉这里的标题具有误导性，我无法构建任何合适的标题。

当数组里面什么都没有时，我对数组感到困惑(由 empty X n 打印)但它们有长度。
例如我通过 const a = [,,,] 创建数组。这将创建一个长度为 3 但其中没有任何内容的数组。如果我在浏览器控制台中打印它，它会打印以下内容:

empty 在这里是什么意思？如果我运行 map 或 forEach 函数并尝试控制某些东西，我什么也得不到。

添加了一些代码。

const a = [,,,]

console.log("print a: ",a)
console.log("print a.length: ",a.length)
console.log("print typeof a[0]: ", typeof a[0])
console.log("a.forEach((data, index) => { console.log(data, index) }): ", a.forEach((data, index) => { console.log(data, index) }))
console.log("")


const b = [undefined, undefined, undefined]

console.log("print b: ", b)
console.log("print b.length: ", b.length)
console.log("print typeof b[0]: ", typeof b[0])
console.log("b.forEach((data, index) => { console.log(data, index) }): ", b.forEach((data, index) => { console.log(data, index) }))
console.log("")

console.log("compare a[0] and b[0]: ", a[0] === b[0])

唯一不同的是当我打印 a 和 b 时(尽管 stackoverflow 控制台打印它们相同但浏览器控制台打印不同)以及当我尝试遍历数组时。 momentjs isEqual 也使它们相等(jsfiddle here)

我的主要疑惑是:

• 它是什么类型的数组？
• empty 在这里是什么意思？
• 它与所有未定义值的数组或空数组有何不同？还是不是？
• 我们是否使用它或任何示例用例？

我已经阅读了有关 null 和未定义数组值的内容并理解了它。但是对于这个，我还没有找到合适的东西。我发现的大部分搜索都与 const a = [] is an empty array 或 how to check if array is empty 等有关。

因此，如果有人可以解释或提供任何适当的阅读链接，那将非常有帮助。

如果我还需要添加任何内容，请告诉我。

Answer 1

稀疏数组简介

首先澄清一下，您所创建的称为稀疏数组。简单来说，稀疏数组类似于普通数组，但不是所有的索引都有数据。在某些情况下，比如 JavaScript，这会导致对它们的处理稍微重要一些。其他语言只是有一个固定长度的普通数组，其中一些值在某种意义上是“零”(取决于什么值可以表示特定数组的“无”——可能是 0 或 null 或 "" 等)。

空槽

稀疏数组中的空槽正是它听起来的样子——没有填充数据的槽。与大多数其他实现不同，JavaScript 数组的大小不是固定的，甚至可以简单地缺少一些索引。例如:

const arr = [];   // empty array
arr[0] = "hello"; // index 0 filled
arr[2] = "world"; // index 2 filled

您将得到一个没有索引 1 的数组。它不是 null，也不是空的，它不存在。这与您拥有一个没有属性的对象时得到的行为相同:

const person = {foo: "hello"};

您有一个具有属性 foo 的对象，但它没有，例如 bar 属性。与之前的数组没有索引 1 的方式完全相同。

JavaScript 表示“未找到值”的唯一方法是使用 undefined，但是这会混淆

• “该属性存在并且分配给它的值是未定义”
• “该属性(property)根本不存在”

举个例子:

const person1 = { name: "Alice", age: undefined };
const person2 = { name: "Bob" };

console.log("person1.age", person1.age);
console.log("person2.age", person2.age);

console.log("person1.hasOwnProperty('age')", person1.hasOwnProperty('age'));
console.log("person2.hasOwnProperty('age')", person2.hasOwnProperty('age'));

在这两种情况下尝试解析 age 时都会得到 undefined，但原因不同。

因为 JavaScript 中的数组是对象，所以你会得到相同的行为:

const arr = [];   // empty array
arr[0] = "hello"; // index 0 filled
arr[2] = "world"; // index 2 filled

console.log("arr[1]", arr[1]);

console.log("arr.hasOwnProperty(1)", arr.hasOwnProperty(1));

为什么重要

稀疏数组在 JavaScript 中得到不同的处理。即，迭代项目集合的数组方法将仅通过已填充 槽，而忽略空槽。这是一个例子:

const sparseArray = [];   // empty array
sparseArray[0] = "hello"; // index 0 filled
sparseArray[2] = "world"; // index 2 filled

const arr1 = sparseArray.map(word => word.toUpperCase());

console.log(arr1); //["HELLO", empty, "WORLD"]


const denseArray = [];     // empty array
denseArray[0] = "hello";   // index 0 filled
denseArray[1] = undefined; // index 1 filled
denseArray[2] = "world";   // index 2 filled

const arr2 = denseArray.map(word => word.toUpperCase()); //error

console.log(arr2);

如您所见，迭代稀疏数组没问题，但如果数组中有显式 undefined，则 word => word.toUpperCase()将失败，因为 word 是 undefined。

如果您有要运行的数字索引数据，则稀疏数组很有用.filter、.find、.map、.forEach 等等。让我们再次说明:

//some collection of records indexed by ID
const people = [];
people[17] = { id: 17, name: "Alice", job: "accountant" , hasPet: true  };
people[67] = { id: 67, name: "Bob"  , job: "bank teller", hasPet: false };
people[3] =  { id: 3 , name: "Carol", job: "clerk"      , hasPet: false };
people[31] = { id: 31, name: "Dave" , job: "developer"  , hasPet: true  };


/* some code that fetches records */
const userChoice = 31;
console.log(people[userChoice]);

/* some code that transforms records */
people
  .map(person => `Hi, I am ${person.name} and I am a ${person.job}.`)
  .forEach(introduction => console.log(introduction));
  
/* different code that works with records */
const petOwners = people
  .filter(person => person.hasPet)
  .map(person => person.name);
  
console.log("Current pet owners:", petOwners)