[] .forEach.call（）在JavaScript中做什么？

Question

我正在查看一些代码片段，发现多个元素在节点列表上调用了一个函数，并将forEach应用于空数组。

例如，我有类似的东西：

[].forEach.call( document.querySelectorAll('a'), function(el) {
   // whatever with the current node
});

但我不明白它是如何工作的。谁能解释一下forEach前面的空数组的行为以及其call工作原理？

Answer 1

[]是一个数组。
根本不使用此数组。

之所以放在页面上，是因为使用数组使您可以访问数组原型，例如.forEach。

这比打字快 Array.prototype.forEach.call(...);

接下来forEach是一个以功能为输入的功能…

[1,2,3].forEach(function (num) { console.log(num); });

…并且对于中的每个元素this（在哪里this像数组一样，它都有一个length，您可以像那样访问其部分this[1]），它将传递三件事：

1. 数组中的元素
2. 元素的索引（第三个元素将通过2）
3. 对数组的引用

最后，.call是一个函数具有的原型（这是一个在其他函数上被调用的函数）。
.call将使用它的第一个参数，并用this您传递的任何值替换常规函数内部call，作为第一个参数（undefined或者null将window在日常JS中使用，或者如果在“严格模式”下，则将是您传递的任何参数）。其余参数将传递给原始函数。

[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
    console.log(i + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"

因此，您正在创建一种快速的方法来调用该forEach函数，并且this从空数组更改为所有<a>标签的列表，并且对于每种<a>顺序，都在调用提供的函数。

逻辑结论/清除

在下面，有一篇文章的链接，建议我们取消对函数式编程的尝试，并每次都坚持手动，内联循环，因为此解决方案有些hacker且难看。

我想说的是，虽然.forEach比其同行少乐于助人，.map(transformer)，.filter(predicate)，.reduce(combiner, initialValue)，它仍然成为目的时，你真正想要做的是改变外界（不是数组），n次，虽然能获得两种arr[i]或i。

那么，我们如何应对这种差距，因为Motto显然是一个有才华和知识渊博的人，我想想象一下，我知道自己在做什么/我要去哪里（时不时…………其他）是最先学习的时间）？

答案实际上很简单，由于疏忽，鲍伯叔叔和克罗克福德爵士都将面临困境：

清理它 。

function toArray (arrLike) { // or asArray(), or array(), or *whatever*
  return [].slice.call(arrLike);
}

var checked = toArray(checkboxes).filter(isChecked);
checked.forEach(listValues);

现在，如果您自己问自己是否需要执行此操作，答案很可能不是。。。
确切的事情是由… … 如今具有高阶功能的每个（？）库完成的。
如果您使用lodash或下划线，甚至使用jQuery，它们都将具有获取一组元素并执行n次操作的方法。
如果您不使用这种东西，那么一定要编写自己的东西。

lib.array = (arrLike, start, end) => [].slice.call(arrLike, start, end);
lib.extend = function (subject) {
  var others = lib.array(arguments, 1);
  return others.reduce(appendKeys, subject);
};

ES6（ES2015）及更高版本的更新

slice( )/ array( )/
etc助手方法不仅使希望像使用数组一样使用列表的人（如他们应该那样）使生活变得更轻松，而且对于那些在相对较近的ES6
+浏览器中有丰富操作经验的人来说未来或今天在Babel中进行“转译”时，您已内置了语言功能，因此无需进行此类操作。

function countArgs (...allArgs) {
  return allArgs.length;
}

function logArgs (...allArgs) {
  return allArgs.forEach(arg => console.log(arg));
}

function extend (subject, ...others) { /* return ... */ }


var nodeArray = [ ...nodeList1, ...nodeList2 ];

超级干净，非常有用。
查找 剩余 和 价差 运算符；在BabelJS网站上试用它们；如果您的技术堆栈合理，请在Babel和构建步骤中将其用于生产。

有没有好的理由不能够使用非数组转换成阵列......只是不要让你的代码乱七八糟的什么都不做 ，但 粘贴同样丑陋线，无处不在。