理解JavaScript里的 [].forEach.call() 写法

原文:  http://www.webhek.com/javascript-foreach-calljavascript

document.querySelectorAll() 返回的并非咱们想固然的数组,而是 NodeList ,对 NodeList ,它里面没有 .forEach 方法,咱们使用了这样的方法进行循环:php

var divs = document.querySelectorAll('div'); [].forEach.call(divs, function(div) { // do whatever div.style.color = "red"; });

初次看到 [].forEach.call() 这样的代码,我以为这种写法颇有趣,为何要这样写?为何要用空数值引伸出的方法?因而研究了一下。java

[] 就是个数组,并且是用不到的空数组。用来就是为了访问它的数组相关方法,好比 .forEach 。这是一种简写,完整的写法应该是这样:web

Array.prototype.forEach.call(...);

很显然,简写更方便。数组

至于 forEach 方法,它能够接受一个函数参数:函数

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

上面的这句代码中,咱们能够访问 this 对象,也就是 [1,2,3] ,能够看出,这个 this 是个数组。ui

最后, .call 是一个prototype,JavaScript函数内置的。 .call 使用它的第一个参数替换掉上面说的这个 this ,也就是你要传人的数组,其它的参数就跟 forEach 方法的参数同样了。this

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

所以, [].forEach.call() 是一种快速的方法访问 forEach ,并将空数组的 this 换成想要遍历的list。spa

相关文章
相关标签/搜索