Javascript：“new(4)”与Array.apply(null，{length: 4})有何不同？

Question

我想要生成一个给定长度的空数组，然后用一些数字填充它。生成具有四个顺序数字元素的数组的一种方法是：

var x = Array.apply(null, {length: 4}).map(function(item, index){return index;})

但是当我看到Array.apply(null, {length: 4})时，我想我可以用new Array(4)代替它，但事实并非如此。进行快速测试会产生以下结果：

>> console.log((new Array(4)))
<< [ <4 empty items> ]

>> console.log(Array.apply(null, {length: 4}))
<< [ undefined, undefined, undefined, undefined ]

这意味着我可以.map的后者，但不是前者。

那么，new Array和Array.apply(null, {})之间有什么区别呢?我认为两者都在创建一个具有给定长度的数组对象？

Answer 1

apply将上下文作为第一个参数，将类似数组的参数列表作为第二个参数。然后用可迭代参数调用函数(Array)。

Array.apply(null, [1, 2])
// Same as
Array(1, 2)
// Or
[1, 2]

现在，如果以类似数组的形式传递一个对象，它仍然会像这样迭代它：

function apply(context, args) {
  for(var i = 0; i < args.length; i++) { 
    /*...*/ args[i];
  }
}

因此，如果您传递{ length: 4 }，它将迭代四次，并将undefined作为参数，因此它的结果如下：

Array.apply(null, { length: 4 })
// Same as
Array(undefined, undefined, undefined)

因此，数组槽不是空的，但它们是未定义的，而且由于map只跳过空时隙，它将遍历第二个数组的每个条目。

顺便说一句，同样的情况也可以实现更好的可读性：

Array.from({length: 4 }, (_, i) => i)
// [0, 1, 2, 3]

Answer 2

答案需要深入研究Array对象的机制。

new Array(4)创建一个长度为4但没有项的数组(稀疏数组)

Array.apply(null, {length: 4})创建一个包含4个未定义元素的数组。

第二种方法使用了一些技巧：

1. apply使用数组中提供的给定上下文和参数调用函数。
2. Array，当作为函数直接调用时，将从它作为参数获得的元素创建一个数组，例如： \> Array(1,2,3) [ 1, 2, 3 ] \> Array(...[1,2,3]) [ 1, 2, 3 ] \> Array(...new Array(4)) [ undefined, undefined, undefined, undefined ]

那么，为什么Array.apply(null, {length: 4})等同于Array.apply(null, new Array(4)呢？

apply通过查看长度，然后接受相关的参数来解析参数数组。{length: 4}.length是4，所以

{length:4}[0]
{length:4}[1]
{length:4}[2]
{length:4}[3]

都是undefined。

Answer 3

区别在于new Array(4)不初始化数组中的槽。它只设置数组的长度属性。其中，当Array.apply(null, {length: 4})将每个插槽初始化为未定义时。