分解 1 个班轮 javascript
Break down 1 liner javascript
我遇到了一个 JavaScript 代码,它创建一个数组并用 0-9 的数字填充它。
密码是:
var arr = Array.apply(null, {length: 10}).map(Number.call, Number);
console.log(arr);
上面的代码创建了一个数组,并将 0-9 的数字压入其中。
我不明白它是如何工作的。我知道其中使用的所有方法,如 apply
、map
和 call
,但仍然不明白它是如何工作的。
任何人都可以通过将代码分成块来解释代码的工作原理吗?比如逐步代码是如何执行的,以及它是如何生成一个包含 0-9 数字的数组。
首先,您的代码使用以下代码创建了一个包含 10 个元素的数组,所有元素都是 undefined
:
Array.apply(null, {length: 10})
以上如写:
Array(undefined, undefined, undefined, undefined, ... 6 more times ...)
这是可行的,因为对象 {length: 10}
是类数组,因为它有一个 length
属性。通常 .apply()
的第二个参数是您要调用该函数的参数数组。然而,当你在这种情况下传递一个对象时,JS 获取长度 属性 并使用 10 个 undefined
参数调用 Array()
函数,作为 {length: 10}
的键对象未定义属性 0
到 9
.
的值
接下来,映射包含 10 个 undefined
个值的数组。当使用 .map()
时,第一个参数是映射函数, .map()
方法的第二个参数是 this
参数,它指示 this
应该在第一个映射函数。查看 map 方法的一种方法是像这样重写它:
.map((element, index, array) => Number.call(element, index, array))
.map()
方法将遍历所有 10 个 undefined
元素,并且对于每个元素,您的回调将通过该元素的 index
调用。使用 Number.call()
时,Number()
函数调用的 this
设置为 undefined
(即:element
)。这不会影响对 Number()
的调用的行为方式,因为它的执行不依赖于任何特定值。结果,上面的Number.call
方法和使用Number(index, array)
一样,其中array
被丢弃了,所以它只是执行Number(index)
.
.map()
方法的第二个参数是为传递给 .map()
方法的第一个映射函数定义 this
绑定。当您将 Number.call
作为映射函数传递时,您传递的是对 Function.prototype.call
上定义的 call
方法的引用。 call
方法只知道它应该根据调用 .call()
方法时定义的 this
值调用什么函数。由于您仅向 .map()
方法传递对 call()
函数的引用,而不是使用 ()
调用它,因此 this
丢失,因此您需要明确定义 this
值是什么。这可以通过将 Number
作为第二个参数传递给您的 map 方法调用来完成。
我遇到了一个 JavaScript 代码,它创建一个数组并用 0-9 的数字填充它。
密码是:
var arr = Array.apply(null, {length: 10}).map(Number.call, Number);
console.log(arr);
上面的代码创建了一个数组,并将 0-9 的数字压入其中。
我不明白它是如何工作的。我知道其中使用的所有方法,如 apply
、map
和 call
,但仍然不明白它是如何工作的。
任何人都可以通过将代码分成块来解释代码的工作原理吗?比如逐步代码是如何执行的,以及它是如何生成一个包含 0-9 数字的数组。
首先,您的代码使用以下代码创建了一个包含 10 个元素的数组,所有元素都是 undefined
:
Array.apply(null, {length: 10})
以上如写:
Array(undefined, undefined, undefined, undefined, ... 6 more times ...)
这是可行的,因为对象 {length: 10}
是类数组,因为它有一个 length
属性。通常 .apply()
的第二个参数是您要调用该函数的参数数组。然而,当你在这种情况下传递一个对象时,JS 获取长度 属性 并使用 10 个 undefined
参数调用 Array()
函数,作为 {length: 10}
的键对象未定义属性 0
到 9
.
接下来,映射包含 10 个 undefined
个值的数组。当使用 .map()
时,第一个参数是映射函数, .map()
方法的第二个参数是 this
参数,它指示 this
应该在第一个映射函数。查看 map 方法的一种方法是像这样重写它:
.map((element, index, array) => Number.call(element, index, array))
.map()
方法将遍历所有 10 个 undefined
元素,并且对于每个元素,您的回调将通过该元素的 index
调用。使用 Number.call()
时,Number()
函数调用的 this
设置为 undefined
(即:element
)。这不会影响对 Number()
的调用的行为方式,因为它的执行不依赖于任何特定值。结果,上面的Number.call
方法和使用Number(index, array)
一样,其中array
被丢弃了,所以它只是执行Number(index)
.
.map()
方法的第二个参数是为传递给 .map()
方法的第一个映射函数定义 this
绑定。当您将 Number.call
作为映射函数传递时,您传递的是对 Function.prototype.call
上定义的 call
方法的引用。 call
方法只知道它应该根据调用 .call()
方法时定义的 this
值调用什么函数。由于您仅向 .map()
方法传递对 call()
函数的引用,而不是使用 ()
调用它,因此 this
丢失,因此您需要明确定义 this
值是什么。这可以通过将 Number
作为第二个参数传递给您的 map 方法调用来完成。