Question

我可能会遗漏一些显而易见的内容，但有人可能会逐步分析为什么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

我没有详细了解为什么会这样做

Answer 1

当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

Answer 2

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);

Answer 3

在关于array.from的developer.mozilla.org页面上，没有人告诉我们mapFn可以使用2个参数，例如v和k：v是值当前元素，k是元素的索引。所以这就是交易。

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

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

Answer 4

The 2nd argument in the arrow function is always the index with Array.from() method 
    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},()=>[])
//Expected Output Array(5) [ [], [], [], [], [] ]
x=Array.from({length:5},()=>{})
//Expected Output Array(5) [ undefined, undefined, undefined, undefined, undefined ]

如何`Array.from（{length：5}，（v，i）=＆gt; i）`工作？

4 个答案: