在javascript中分配新数组

Question

尝试使用值分配新数组.

情况1 :

var x = new Array(3).map(()=>1);

现在x是[undefined * 3]

案例2:

var x = [...new Array(3)].map(()=>1);

现在x是[1,1,1]

有人可以帮忙吗？

为什么使用这个扩展运算符会产生这样的差异

为什么案例1 不起作用？

Answer 1

tl; dr:第一个数组有空洞,第二个数组没有空洞..map跳过洞.

通过使用spread元素,数组被视为可迭代的,即你得到迭代器迭代数组.迭代器基本上像for循环一样工作,它将从索引0到索引迭代数组array.length - 1(有关详细信息,请参阅规范),并将每个索引的值添加到新数组.由于您的数组不包含任何值,因此array[i]将为undefined每个索引返回.

这意味着,[...new Array(3)]结果是一个字面上包含三个undefined值的数组,而不仅仅是一个长度的"备用"数组3.

查看Chrome中的差异:

我们将"稀疏数组"称为" 带孔的数组".

这是问题的关键:许多阵列的方法,包括.map,跳过孔!他们没有将洞视为价值undefined,完全忽视它.

您可以通过console.log在.map回调中放置一个来轻松验证:

Array(3).map(() => console.log('call me'));
// no output

这就是你的第一个例子不起作用的原因.你有一个只有漏洞的稀疏数组,它会被.map忽略.使用spread元素创建一个新数组会创建一个没有孔的数组,因此.map可以工作.

Answer 2

Array

数组长度

如果传递给构造函数的唯一参数是 0 到 2 ³²Array -1（含）之间的整数，则返回一个新的 JavaScript 数组，其长度设置为该数字。

new Array(3)实际上并没有在.length属性设置为 的创建数组中创建可迭代值3。

另请参阅JavaScript 中使用 new Array() 的未定义值。

您可以使用Array.from()第一个示例返回预期结果

var x = Array.from(Array(3)).map(()=>1);

扩展运算符

扩展运算符允许在需要多个参数（对于函数调用）或多个元素（对于数组文字）或多个变量（对于解构赋值）的地方扩展表达式。

var x = [...new Array(10)].map(()=>1);

创建一个具有值undefined并.length设置为10from 的数组Array(10)，该数组可在以下位置迭代.map()