javascript - 在 JavaScript 中创建范围 - 奇怪的语法

Question

我在 es-discuss 邮件列表中遇到了以下代码：

Array.apply(null, { length: 5 }).map(Number.call, Number);

这产生

[0, 1, 2, 3, 4]

为什么这是代码的结果？这里发生了什么事？

Answer 1

理解这个“hack”需要理解几件事：

1. 为什么我们不只是做Array(5).map(...)
2. 如何Function.prototype.apply处理参数
3. 如何Array处理多个参数
4. 函数如何Number处理参数
5. Function.prototype.call做什么

它们是 javascript 中相当高级的主题，所以这将是相当长的。我们将从顶部开始。系好安全带！

1. 为什么不只是Array(5).map？

什么是数组，真的吗？一个常规对象，包含整数键，映射到值。它还有其他特殊功能，例如魔法length变量，但在它的核心，它是一个常规key => value映射，就像任何其他对象一样。让我们玩一下数组，好吗？

var arr = ['a', 'b', 'c'];
arr.hasOwnProperty(0); //true
arr[0]; //'a'
Object.keys(arr); //['0', '1', '2']
arr.length; //3, implies arr[3] === undefined

//we expand the array by 1 item
arr.length = 4;
arr[3]; //undefined
arr.hasOwnProperty(3); //false
Object.keys(arr); //['0', '1', '2']

我们得到了数组中的项目arr.length数 和数组具有的key=>value映射数之间的内在差异，这可能不同于arr.length。

扩展数组 viaarr.length 不会创建任何新key=>value的映射，因此数组没有未定义的值，它没有这些键。当您尝试访问不存在的属性时会发生什么？你得到undefined.

现在我们可以稍微抬起头，看看为什么像arr.map这样的函数不会越过这些属性。如果arr[3]只是未定义，并且键存在，那么所有这些数组函数都会像任何其他值一样遍历它：

//just to remind you
arr; //['a', 'b', 'c', undefined];
arr.length; //4
arr[4] = 'e';

arr; //['a', 'b', 'c', undefined, 'e'];
arr.length; //5
Object.keys(arr); //['0', '1', '2', '4']

arr.map(function (item) { return item.toUpperCase() });
//["A", "B", "C", undefined, "E"]

我故意使用方法调用来进一步证明密钥本身不存在这一点：调用undefined.toUpperCase会引发错误，但事实并非如此。为了证明：

arr[5] = undefined;
arr; //["a", "b", "c", undefined, "e", undefined]
arr.hasOwnProperty(5); //true
arr.map(function (item) { return item.toUpperCase() });
//TypeError: Cannot call method 'toUpperCase' of undefined

现在我们明白我的意思了：Array(N)事情是怎样的。第 15.4.2.2 节描述了该过程。有一堆我们不关心的胡言乱语，但如果你设法在字里行间阅读（或者你可以相信我，但不要），它基本上可以归结为：

function Array(len) {
    var ret = [];
    ret.length = len;
    return ret;
}

（在假设（在实际规范中检查）len是有效的 uint32 下运行，而不仅仅是任何数量的值）

所以现在你可以明白为什么做Array(5).map(...)不起作用了——我们没有len在数组上定义项目，我们没有创建key => value映射，我们只是改变了length属性。

现在我们已经解决了这个问题，让我们看看第二个神奇的东西：

2.Function.prototype.apply工作原理

所做的基本上是apply采用一个数组，并将其展开为函数调用的参数。这意味着以下内容几乎相同：

function foo (a, b, c) {
    return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3

apply现在，我们可以通过简单地记录arguments特殊变量来简化查看工作原理的过程：

function log () {
    console.log(arguments);
}

log.apply(null, ['mary', 'had', 'a', 'little', 'lamb']);
 //["mary", "had", "a", "little", "lamb"]

//arguments is a pseudo-array itself, so we can use it as well
(function () {
    log.apply(null, arguments);
})('mary', 'had', 'a', 'little', 'lamb');
 //["mary", "had", "a", "little", "lamb"]

//a NodeList, like the one returned from DOM methods, is also a pseudo-array
log.apply(null, document.getElementsByTagName('script'));
 //[script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script]

//carefully look at the following two
log.apply(null, Array(5));
//[undefined, undefined, undefined, undefined, undefined]
//note that the above are not undefined keys - but the value undefined itself!

log.apply(null, {length : 5});
//[undefined, undefined, undefined, undefined, undefined]

在倒数第二个例子中很容易证明我的主张：

function ahaExclamationMark () {
    console.log(arguments.length);
    console.log(arguments.hasOwnProperty(0));
}

ahaExclamationMark.apply(null, Array(2)); //2, true

（是的，双关语）。key => value映射可能不存在于我们传递给的数组中，apply但它肯定存在于arguments变量中。这与上一个示例有效的原因相同：我们传递的对象上不存在键，但它们确实存在于arguments.

这是为什么？让我们看一下第 15.3.4.3 节，在哪里Function.prototype.apply定义。主要是我们不关心的事情，但这是有趣的部分：

4. 设 len 是使用参数“length”调用 argArray 的 [[Get]] 内部方法的结果。

这基本上意味着：argArray.length. 然后规范继续对项目进行简单的for循环，生成相应的值（是一些内部巫术，但它基本上是一个数组）。就非常非常松散的代码而言：lengthlistlist

Function.prototype.apply = function (thisArg, argArray) {
    var len = argArray.length,
        argList = [];

    for (var i = 0; i < len; i += 1) {
        argList[i] = argArray[i];
    }

    //yeah...
    superMagicalFunctionInvocation(this, thisArg, argList);
};

因此，在这种情况下，我们需要模仿的argArray只是一个具有length属性的对象。现在我们可以看到为什么值是未定义的，但键不是，在arguments：我们创建key=>value映射。

呼，所以这可能不会比上一部分短。但是当我们完成时会有蛋糕，所以请耐心等待！然而，在接下来的部分（我保证会很短）之后，我们可以开始剖析表达式。如果您忘记了，问题是以下如何工作：

Array.apply(null, { length: 5 }).map(Number.call, Number);

3. 如何Array处理多个参数

所以！length我们看到了将参数传递给 时会发生什么，但是在表达式中，我们传递了几个东西作为参数（准确地说是Array一个 5 的数组）。第 15.4.2.1 节告诉我们该怎么做。最后一段对我们来说很重要，它的措辞非常奇怪，但它可以归结为：undefined

function Array () {
    var ret = [];
    ret.length = arguments.length;

    for (var i = 0; i < arguments.length; i += 1) {
        ret[i] = arguments[i];
    }

    return ret;
}

Array(0, 1, 2); //[0, 1, 2]
Array.apply(null, [0, 1, 2]); //[0, 1, 2]
Array.apply(null, Array(2)); //[undefined, undefined]
Array.apply(null, {length:2}); //[undefined, undefined]

多田！我们得到一个包含几个未定义值的数组，并返回一个包含这些未定义值的数组。

表达式的第一部分

最后，我们可以破译以下内容：

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

我们看到它返回一个包含 5 个未定义值的数组，其中所有键都存在。

现在，到表达式的第二部分：

[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)

这将是更容易、不复杂的部分，因为它不太依赖于晦涩难懂的技巧。

4. 如何Number处理输入

Doing Number(something)（第 15.7.1 节）转换something为数字，仅此而已。它是如何做到的有点令人费解，尤其是在字符串的情况下，但如果您感兴趣，该操作在第 9.3 节中定义。

5. 游戏Function.prototype.call

call是apply的兄弟，在第 15.3.4.4 节中定义。它不接受参数数组，而是只接受它收到的参数，并将它们向前传递。

当您将多个链接call在一起时，事情会变得有趣，将怪异的频率提高到 11：

function log () {
    console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^  ^-----^
// this   arguments

在您掌握正在发生的事情之前，这是非常值得的。log.call只是一个函数，相当于任何其他函数的call方法，因此，call它本身也有一个方法：

log.call === log.call.call; //true
log.call === Function.call; //true

有什么作用call？它接受一个thisArg和一堆参数，并调用它的父函数。我们可以通过apply （同样，非常松散的代码，行不通）来定义它：

Function.prototype.call = function (thisArg) {
    var args = arguments.slice(1); //I wish that'd work
    return this.apply(thisArg, args);
};

让我们跟踪它是如何下降的：

log.call.call(log, {a:4}, {a:5});
  this = log.call
  thisArg = log
  args = [{a:4}, {a:5}]

  log.call.apply(log, [{a:4}, {a:5}])

    log.call({a:4}, {a:5})
      this = log
      thisArg = {a:4}
      args = [{a:5}]

      log.apply({a:4}, [{a:5}])

后半部分，或.map全部

还没结束。让我们看看当您为大多数数组方法提供函数时会发生什么：

function log () {
    console.log(this, arguments);
}

var arr = ['a', 'b', 'c'];
arr.forEach(log);
//window, ['a', 0, ['a', 'b', 'c']]
//window, ['b', 1, ['a', 'b', 'c']]
//window, ['c', 2, ['a', 'b', 'c']]
//^----^  ^-----------------------^
// this         arguments

如果我们自己不提供this参数，则默认为window. 注意参数提供给我们的回调的顺序，让我们再次将其怪异到 11：

arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^    ^

哇哇哇……让我们后退一点。这里发生了什么？我们可以在第 15.4.4.18 节中看到，其中forEach定义了以下内容：

var callback = log.call,
    thisArg = log;

for (var i = 0; i < arr.length; i += 1) {
    callback.call(thisArg, arr[i], i, arr);
}

所以，我们得到这个：

log.call.call(log, arr[i], i, arr);
//After one `.call`, it cascades to:
log.call(arr[i], i, arr);
//Further cascading to:
log(i, arr);

现在我们可以看到是如何.map(Number.call, Number)工作的：

Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);

i它将当前索引的转换返回为一个数字。

综上所述，

表达方式

Array.apply(null, { length: 5 }).map(Number.call, Number);

分两部分工作：

var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2

第一部分创建一个包含 5 个未定义项的数组。第二个遍历该数组并获取其索引，从而产生一个元素索引数组：

[0, 1, 2, 3, 4]

Answer 2

免责声明：这是对上述代码的非常正式的描述——这就是我知道如何解释它的方式。如需更简单的答案 - 请查看上面 Zirak 的最佳答案。这是您脸上更深入的规范，而不是“啊哈”。

---

这里发生了几件事。让我们分解一下。

var arr = Array.apply(null, { length: 5 }); // Create an array of 5 `undefined` values

arr.map(Number.call, Number); // Calculate and return a number based on the index passed

在第一行中，数组构造函数被调用为带有Function.prototype.apply.

• 该this值null对于 Array 构造函数无关紧要（与根据 15.3.4.3.2.a 的上下文中this的相同。this
• 然后new Array被称为传递一个具有length属性的对象 - 这导致该对象成为一个数组，.apply因为以下子句很重要.apply：
  • 设 len 是使用参数“length”调用 argArray 的 [[Get]] 内部方法的结果。
• 因此，.apply将参数从 0 传递到.length，因为使用 0 到 4 的值调用会产生[[Get]]数组构造函数，其值为 5 个参数（获取对象的未声明属性）。{ length: 5 }undefinedundefined
• 使用 0、2 或更多参数调用数组构造函数。新构造的数组的长度属性根据规范设置为参数的数量，并将值设置为相同的值。
• 因此var arr = Array.apply(null, { length: 5 });创建了一个包含五个未定义值的列表。

注意Array.apply(0,{length: 5})：请注意和之间的区别Array(5)，第一个创建原始值类型undefined的 5 倍，而后者创建一个长度为 5 的空数组。具体来说，由于.map的行为 (8.b)和特别是[[HasProperty].

因此，符合规范的上述代码与以下代码相同：

var arr = [undefined, undefined, undefined, undefined, undefined];
arr.map(Number.call, Number); // Calculate and return a number based on the index passed

现在开始第二部分。

• Array.prototype.mapNumber.call在数组的每个元素上调用回调函数（在本例中）并使用指定的this值（在本例中将this值设置为 `Number）。
• map 中回调的第二个参数（在本例中Number.call）是索引，第一个是 this 值。
• 这意味着Number使用thisas undefined（数组值）和索引作为参数调用。所以它基本上与将每个映射undefined到它的数组索引相同（因为调用Number执行类型转换，在这种情况下从数字到数字不会改变索引）。

因此，上面的代码采用五个未定义的值并将每个值映射到其在数组中的索引。

这就是我们将结果写入代码的原因。

Answer 3

正如你所说，第一部分：

var arr = Array.apply(null, { length: 5 }); 

undefined创建一个包含 5 个值的数组。

第二部分是调用map数组的函数，它接受 2 个参数并返回一个相同大小的新数组。

第一个参数map实际上是一个应用于数组中每个元素的函数，它应该是一个接受 3 个参数并返回一个值的函数。例如：

function foo(a,b,c){
    ...
    return ...
}

如果我们将函数 foo 作为第一个参数传递，它将为每个元素调用

• a 作为当前迭代元素的值
• b 作为当前迭代元素的索引
• c 作为整个原始数组

接受的第二个参数map被传递给您作为第一个参数传递的函数。但它不会是 a、b 或 c，如果是foo，它会是this。

两个例子：

function bar(a,b,c){
    return this
}
var arr2 = [3,4,5]
var newArr2 = arr2.map(bar, 9);
//newArr2 is equal to [9,9,9]

function baz(a,b,c){
    return b
}
var newArr3 = arr2.map(baz,9);
//newArr3 is equal to [0,1,2]

另一个只是为了更清楚：

function qux(a,b,c){
    return a
}
var newArr4 = arr2.map(qux,9);
//newArr4 is equal to [3,4,5]

那么 Number.call 呢？

Number.call是一个接受 2 个参数的函数，并尝试将第二个参数解析为一个数字（我不确定它对第一个参数做了什么）。

由于map传递的第二个参数是索引，因此将放置在该索引处的新数组中的值等于索引。就像baz上面例子中的函数一样。Number.call将尝试解析索引 - 它自然会返回相同的值。

您在代码中传递给map函数的第二个参数实际上对结果没有影响。如果我错了，请纠正我。

Answer 4

数组只是一个包含“长度”字段和一些方法（例如推送）的对象。所以 arr invar arr = { length: 5}基本上与字段 0..4 具有未定义的默认值的数组相同（即arr[0] === undefined产生 true）。
至于第二部分，map，顾名思义，就是从一个数组映射到一个新数组。它通过遍历原始数组并在每个项目上调用映射函数来实现。

剩下的就是让你相信映射函数的结果就是索引。诀窍是使用名为 'call'(*) 的方法，该方法调用一个函数，但有一个小例外，即第一个参数设置为 'this' 上下文，第二个参数设置为第一个参数（依此类推）。巧合的是，当调用映射函数时，第二个参数是索引。

最后但同样重要的是，调用的方法是数字“类”，正如我们在 JS 中所知道的，“类”只是一个函数，而这个（数字）期望第一个参数是值。

(*) 在 Function 的原型中找到（并且 Number 是一个函数）。

马沙尔