`Array.from({length: 5}, (v, i) => i)` 是如何工作的？

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

箭头函数中的第二个参数始终是 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 ]

Answer 2

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

所以在 JS 中，可以做到以下几点：

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

第一个类似于 fake javascript 数组（具有属性length）。当Array.from 获得属性length 的值（本例中为5）时，它会创建一个长度为5 的实数数组。

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

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

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

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

Answer 3

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

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

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

Answer 4

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