为什么新的 Array(3) 函数不返回数组中的 3 个未定义的值?

Question

我正在尝试根据传递给函数的值创建多个div标签。ISo 在函数中执行此操作，我创建了一个new Array(x)，据说它应该创建一个带有 x 个未定义指针的数组。但是虽然console.log(theArray).它显示 [空 * x] 而不是未定义 3 次。

myFunction(value){
let myArray=new Array(value).map((_,key) => <div key={key}> Hi There</div>)
return myArray;

在上面的函数中，假设如果我传递值 =3，我希望 myArray 包含 3 个带有 Hi There 值的div 标签。 相反，它返回 [空 *3]。

请告诉我这是为什么？

Answer 1

如果你通过查看 polyfill 来查看Array.prototype.map是如何实现的，你会发现在调用映射回调之前，在给定数组的迭代期间会检查迭代索引。

因此，对于只有未定义值的数组，对给定数组中的索引的检查将返回false：

console.log(0 in [, , ]); // prints false
console.log(0 in [1, 2, 3]); //prints true

因此，不满足索引的 if 条件，并且您提供的回调永远不会执行，因此您会返回一个具有len未定义值数量的新数组。

这是来自mappolyfill 的代码片段：

//k is the index
k = 0;
//len is the length of the array
while (k < len) {
var kValue, mappedValue;
//O is the array and this condition will be false
if (k in O) { 
kValue = O[k];
//your callback will be called here
mappedValue = callback.call(T, kValue, k, O);
//a new array is populated with the mapped value and returned
A[k] = mappedValue;
}
k++;
}

可在此处找到Array.prototype.map填充项。

为了防止这种情况，您可以使用Array.prototype.fill在调用map之前用值填充数组：

function myFunction(value){
let myArray = new Array(value).fill(0).map((_,key) => `<div key={key}> Hi There</div>`);
return myArray;
}
console.log(myFunction(3));

Answer 2

数组迭代方法不会遍历作为漏洞的数组索引

您可以使用Array#from()，它是内置映射器的

let myArray=Array.from({length:value},(_,key) => <div key={key}> Hi There</div>)