小编典典

[] .forEach.call()在JavaScript中做什么?

javascript

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

例如,我有类似的东西:

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

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


阅读 350

收藏
2020-04-25

共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或者nullwindow在日常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和构建步骤中将其用于生产。


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

2020-04-25