我正在查看一些代码片段,发现多个元素在节点列表上调用了一个函数,并将forEach应用于空数组。
例如,我有类似的东西:
[].forEach.call( document.querySelectorAll('a'), function(el) { // whatever with the current node });
但我不明白它是如何工作的。谁能解释一下forEach前面的空数组的行为以及其call工作原理?
call
[]是一个数组。 根本不使用此数组。
[]
之所以放在页面上,是因为使用数组使您可以访问数组原型,例如.forEach。
.forEach
这比打字快 Array.prototype.forEach.call(...);
Array.prototype.forEach.call(...);
接下来forEach是一个以功能为输入的功能…
forEach
[1,2,3].forEach(function (num) { console.log(num); });
…并且对于中的每个元素this(在哪里this像数组一样,它都有一个length,您可以像那样访问其部分this[1]),它将传递三件事:
this
length
this[1]
2
最后,.call是一个函数具有的原型(这是一个在其他函数上被调用的函数)。 .call将使用它的第一个参数,并用this您传递的任何值替换常规函数内部call,作为第一个参数(undefined或者null将window在日常JS中使用,或者如果在“严格模式”下,则将是您传递的任何参数)。其余参数将传递给原始函数。
.call
undefined
null
window
[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>顺序,都在调用提供的函数。
<a>
在下面,有一篇文章的链接,建议我们取消对函数式编程的尝试,并每次都坚持手动,内联循环,因为此解决方案有些hacker且难看。
我想说的是,虽然.forEach比其同行少乐于助人,.map(transformer),.filter(predicate),.reduce(combiner, initialValue),它仍然成为目的时,你真正想要做的是改变外界(不是数组),n次,虽然能获得两种arr[i]或i。
.map(transformer)
.filter(predicate)
.reduce(combiner, initialValue)
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); };
slice( )/ array( )/ etc助手方法不仅使希望像使用数组一样使用列表的人(如他们应该那样)使生活变得更轻松,而且对于那些在相对较近的ES6 +浏览器中有丰富操作经验的人来说未来或今天在Babel中进行“转译”时,您已内置了语言功能,因此无需进行此类操作。
slice( )
array( )
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和构建步骤中将其用于生产。
有没有好的理由不能够使用非数组转换成阵列......只是不要让你的代码乱七八糟的什么都不做 ,但 粘贴同样丑陋线,无处不在。