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

上一篇文章里说到了如何遍历循环NodeList,因为document.querySelectorAll()返回的并不是我们想当然的数组,而是NodeList,对NodeList,它里面没有.forEach方法,我们使用了这样的方法进行循环:

var divs = document.querySelectorAll('div');

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

初次看到[].forEach.call()这样的代码,我觉得这种写法很有趣,为什么要这样写?为什么要用空数值引申出的方法?于是研究了一下。

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

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

很显然,简写更方便。

至于forEach 方法,它可以接受一个函数参数:

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

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

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

[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。

阅读余下内容
 

《 “理解JavaScript里的 [].forEach.call() 写法” 》 有 6 条评论

  1. [].forEach.call(arr, fn) 明显比 arr.forEach(fn) 写得冗余,我觉得楼主没说到重点。。

  2. 楼主完全没理解这个foreach的重点啊。
    var a = {0:’a’,1:’b’,2:’c’,length:3}
    [].forEach.call(a,function(val){console.log(val);})
    注意a不是一个数组是没有foreach这个方法的。

  3. 完全没说清楚这个foreach的重点啊。
    var a = {0:’a’,1:’b’,2:’c’,length:3}
    [].forEach.call(a,function(val){console.log(val);})
    注意a不是一个数组是没有foreach这个方法的。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号