带有顺序数字的JavaScript中映射数组

let myArray = Array.apply(null, {length: 10}).map(Number.call, Number);

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

让我们以两个部分分解表达式：

1）让我们讨论第一个表达式：

Array.apply(null, {length: 10})

在JavaScript中，Array构造函数可以采用一个参数来创建一定长度的数组，例如：

Array(10) // makes an array of length 10

此数组是一个稀疏的数组（一个包含没有元素的索引的数组）。您可以想象我们生成了以下数组：

[,,,,,,,,] // Array with 10 indexes, but no elements

您可以将JavaScript中的数组视为具有length属性和编号索引的对象。例如，以下是数组的有效表示：

var arr = {length: 3, 0: 1, 1: 2, 2: 3} // this represents the array [1, 2, 3]

在JavaScript中，我们称此对象为"类似数组的对象"。您可以使用常规的for循环迭代此对象：

for (var i=0; i<arr.length; i++) {
  console.log(arr[i]) // logs 1 .. 2 .. 3
}

但是此对象不是Array构造函数的实例：

arr instanceof Array // false

幸运的是，任何类似数组的对象都可以转换为数组：

Array.prototype.slice.call({length: 3, 0: 1, 1: 2, 2: 3}) // [1, 2, 3]

所有数组方法都是有意通用的，可以允许此行为，因此您可以使用forEach轻松循环：

Array.prototype.forEach.call({length: 3, 0: 1, 1: 2, 2: 3}, function(x) {
  console.log(x)
})

现在，回到第一个表达式：

Array.apply(null, {length: 10})

分解上述表达式了解类似数组的对象，我们可以看到这等同于：

Array(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined);

换句话说，我们正在创建一个具有undefined值的10个元素的数组（请注意，它不再稀疏）

2）进入第二个表达式：

.map(Number.call, Number);

第一个参数是一个回调函数，用于应用于数组中的每个元素，第二个参数是回调内的this值。

让我们分解此表达。首先，我们可以将回调函数写为匿名函数：

Array.apply(null, {length: 10}).map(function() {
  return Number.call.apply(this, arguments)
}, Number)

然后我们意识到Number.call是Function.prototype.call的速记：

Array.apply(null, {length: 10}).map(function() {
  return Function.prototype.call.apply(this, arguments)
}, Number)

接下来，我们在 this值中排列：

Array.apply(null, {length: 10}).map(function() {
  return Function.prototype.call.apply(Number, arguments)
})

最后，我们分解了该函数的应用：

Array.apply(null, {length: 10}).map(function() {
  return Number.call(arguments[0], arguments[1], arguments[2]) // map provides 3 arguments
})

您可以看到，第一个参数是元素，即 undefined是呼叫 Number的 this值，也就是说我们丢弃了它。第二个论点是索引，这是我们关心的价值，不需要第三个参数，因为Number也只采用一个参数，因此也被丢弃。

在这种情况下，Number函数用作身份函数：

function id(x) {
  return x
}

它只是一个函数，它返回传递到其中的参数的函数。这就是我们所关心的。因为index已经是一个数字，所以我们得到：

Number(index) === id(index)

希望有助于进一步理解。

编辑：扩展了Array(10)不使用迭代方法（例如map与Array.apply(null, {length: 10})）的原因，我们必须查看MAP的实现（滚动到" polyfill"标题）。

原因是因为正如我之前指出的那样， Array(10)是一个稀疏的数组，它没有任何值，只有一个长度。通过查看实现，我们可以看到正在发生的事情：

// 8. Repeat, while k < len
while (k < len) {
  var kValue, mappedValue;
  // a. Let Pk be ToString(k).
  //   This is implicit for LHS operands of the in operator
  // b. Let kPresent be the result of calling the HasProperty internal 
  //    method of O with argument Pk.
  //   This step can be combined with c
  // c. If kPresent is true, then
  if (k in O) {
    // i. Let kValue be the result of calling the Get internal 
    //    method of O with argument Pk.
    kValue = O[k];

您可以看到k in O in运算符首先检查存在的检查，并且该值不存在；它不是undefined，而是不存在。这与仅像O[k]这样的属性访问的情况不同，如果该属性不存在，它将为您提供undefined的值。

var o = {}
'p' in o // false
o.p // undefined

Array.apply(null, {length: 10})

创建一个长度为10的数组，所有元素均为undefined。

.map(Number.call, Number)

将使用参数(element, index, array)调用每个元素的Number.call，并将this设置为Number。第一个呼叫的论点将作为this（在此不相关），并且所有其他参数均被视为索引。现在，数字将将其第一个参数index转换为一个数字（此处：将返回索引，因为它是一个数字），这就是地图将写入其返回数组。

let k = Array.from({ length: 5 }).map((currentElement, i) => i)
console.log(k)
// Output -[0, 1, 2, 3, 4]

Array.apply(null, {length: 10}) 

.map(function(){
Function.prototype.call.apply(this, arguments)
}, Number)// the second arg is the this value that map function takes during each iteration

Function.prototype.call.apply(Number, arguments)

call.apply(Number, arguments); => call(arguments[0], arguments[1])

return Number.call(null, arguments[1]);

function example(x){
 return x;
}

Number(0) //it takes 0 index:
return 0..

Number(1)//cause it takes the index of the second element:
return 1..