在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元素，该数组被视为 iterable ，即您获得迭代器来迭代数组。迭代器基本上像for循环一样工作，它会将数组从索引0迭代到索引array.length - 1（有关详细信息，请参阅the spec），并在每个索引处添加值到新阵列。由于您的数组不包含任何值，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

  

arrayLength

     

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

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

另见Undefined values with new Array() in JavaScript。

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

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

Spread operator

  

扩展运算符允许表达式在某些地方展开   其中多个参数（用于函数调用）或多个元素   （对于数组文字）或多个变量（用于解构   任务）是预期的。

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

从undefined创建一个值为.length且10设置为Array(10)的数组，该数组可在.map()处重复

Answer 3

  

为什么案例1不起作用？

Map function calls callback function in each element in ascending order

在你的第一个案例中（打破......），

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

x是一个包含未初始化索引的数组。因此，map函数不知道从哪里开始迭代数组。并且导致它根本不迭代（这不起作用）。

您可以通过（在Chrome中）

进行测试

var x = new Array(5);
// This will display '[undefined x 5]' in chrome, because their indexes are uninitialized

x[1] = undefined;
// '[undefined x 1, undefined, undefined x 3]' Only array[1] that has its index.
// And you can use 'map' function to change its value.

x = x.map( () => 1 );
// '[undefined x 1, 1, undefined x 3]'

  

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

在第二个样本中，

Spread operator allows parts of an array literal to be initialized from an iterable expression

And enclose it in square bracket to properly use it.

因此，[...new Array(2)]实际上是[undefined, undefined]的索引数组。

由于以下示例中的数组已编制索引。我们来看看（在Chrome中），

var x = [...new Array(2)];
// Now 'x' is an array with indexes [undefined, undefined]

x = x.map( () => 1 );
// Will return [1, 1]

现在，x中的每个值都有自己的索引。最后，map函数能够迭代它并按升序调用每个元素的回调函数。