' Array.from({length: 5}， (v, i) =>我)的工作

How does `Array.from({length: 5}, (v, i) => i)` work?

本文关键字：工作 Array from length      更新时间：2023-09-26

我可能在这里错过了一些明显的东西，但是有人可以一步一步地分解为什么Array.from({length: 5}, (v, i) => i)返回[0, 1, 2, 3, 4]吗?

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from

我不太明白为什么会这样

当Javascript检查一个方法是否可以调用时，它使用duck-typing。这意味着当你想从某个对象调用方法foo时，它应该是bar类型的，然后它不会检查这个对象是否真的是bar，而是检查它是否有方法foo。

在JS中，可以这样做:

let fakeArray = {length:5};
fakeArray.length //5
let realArray = [1,2,3,4,5];
realArray.length //5

第一个是像假 javascript数组(它有属性length)。当Array.from获得属性length的值(在本例中为5)时，它将创建一个长度为5的实际数组。

这种fakeArray对象通常被称为arrayLike。

第二部分只是一个箭头函数，它用索引值填充数组(第二个参数)。

该技术对于模拟某些对象进行测试非常有用。例如:

let ourFileReader = {}
ourFileReader.result = "someResult"
//ourFileReader will mock real FileReader


var arr1 = Array.from({
    length: 5 // Create 5 indexes with undefined values
  },
  function(v, k) { // Run a map function on said indexes using v(alue)[undefined] and k(ey)[0 to 4]
    return k; // Return k(ey) as value for this index
  }
);
console.log(arr1);

在developer.mozilla.org关于array.from的页面上，没有人告诉我们mapFn可以接受2个参数，例如v和k: v是当前元素的值，k是元素的索引。所以事情是这样的

{length:5}创建一个没有任何值的对象，但length等于5;

(v, k) => k是一个箭头函数，它将当前元素的索引号赋给该元素的值。

箭头函数的第二个参数始终是Array.from()方法

的索引。

x=Array.from({length:5},(v,i,k)=>k)
console.log(x)
//Expected output Array(5) [ undefined, undefined, undefined, undefined, undefined ]
x=Array.from({length:5},(v,i,k)=>v)
console.log(x)
//Expected output Array(5) [ undefined, undefined, undefined, undefined, undefined ]
x=Array.from({length:5},(v,i,k)=>i)
console.log(x)
//Expected output Array(5) [ 0, 1, 2, 3, 4 ]
x=Array.from({length:5},()=>[])
console.log(x)
//Expected Output Array(5) [ [], [], [], [], [] ]
x=Array.from({length:5},()=>{})
console.log(x)
//Expected Output Array(5) [ undefined, undefined, undefined, undefined, undefined ]

相关文章：