`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

Javascript使用duck-typing.这意味着当你foo从某个对象调用方法时,它应该是类型的,bar它不检查这个对象是否真的,bar但它会检查它是否有方法foo.

总结一下:

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

第一个就像"假"javascript数组(有属性length).当 Array.from检查属性时length它返回5,因此它创建一个长度为5的实数组.您可以调用foo对象" bar".

第二部分就是lamba,它使用索引值(第二个参数)填充数组.

这种技术对于模拟一些测试对象非常有用.例如:

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

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

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

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