为什么带有逗号但没有元素的数组文字的长度不为 0？ [复制]

Question

我只是在摆弄一些 JS，发现了一些我认为不会发生的事情。

var arr = [,];
arr.length // 1
arr[0] // undefined

此外，[,,] 的长度为 2。这些数组的长度不应该为 0 吗？我认为逗号仅用于分隔数组中的元素，那么为什么逗号似乎被视为这些特定数组中的元素？这种对数组的行为有什么应用吗？

Answer 1

基于https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals

尾随逗号在较新的浏览器中被忽略。

Answer 2

这叫做省略。它在数组（稀疏数组）中创建了一个“洞”。可能有一些我不知道和忘记的应用程序，我现在唯一能想到的就是我在这里展示的那个：https://stackoverflow.com/a/29629588/1034448。

[,...Array(10)].map((x, i) => { /* range of `i` is 1 - 10 */ })

[,,]不等同于[undefined, undefined,]。有一个很大的区别：迭代方法不会包含省略索引处的元素。 Example:

var enumerated = [];

function callback (x, i) {
  enumerated.push(i);
}

[,,].forEach(callback);
console.log(enumerated); // logs []

[undefined, undefined,].forEach(callback);
console.log(enumerated); // logs [1, 2]

Answer 3

在数组文字中，末尾的逗号被忽略，但所有其他逗号分隔元素。如果省略元素的值，则默认为undefined，但该元素仍然存在。所以

[,]

等价于

[undefined,]

相当于

[undefined]

这有 1 个元素，其值为 undefined。

同样

[,,] = [undefined, undefined, ] = [undefined, undefined]

其中有 2 个元素。

当您想省略数组中间的元素时，默认元素行为更有用。

[1, 2, 3, , , 6, 7, 8]

实际上，这两种创建未定义元素的方法之间存在细微差别。在 Javascript 中，数组实际上是一个对象，它具有 length 属性和名称是数组元素索引的属性。通常，如果数组有length = N，则索引属性将是从0 到N-1 的所有整数。但是，当您在数组字面量中省略一个元素时，不会为该索引创建任何属性。

在大多数情况下，这个缺失的属性并不重要，因为访问对象的不存在属性会返回undefined，就像您有一个值为undefined 的属性一样。您只能通过使用hasOwnProperty 之类的方法或调用Object.keys 来检测这些缺失的属性。 Javascript 控制台使用类似这样的东西来显示数组中的间隙，与显式 undefined 元素不同。

所以

Object.getOwnPropertyNames([1, 2, 3]) => ["0", "1", "2", "length"]
Object.getOwnPropertyNames([1, , 3, 4]) => ["0", "2", "3", "length"]
Object.getOwnPropertyNames([, , , , ]) => ["length"]

忽略最后一个逗号的原因是这样你可以写：

[ 
    "foo",
    "bar",
    "baz",
    "quux",
]

这使编辑更容易，因为您可以插入和删除行，而不必对最后一个元素进行特殊处理。