上一篇文章里说到了如何遍历循环 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.
- var a = {
- 0:'a',1:'b',2:'c',length:3
- }
- [].forEach.call(a,function(val){
- console.log(val);
- })
- var a = {
- 0:'a',1:'b',2:'c',length:3
- }
- [].forEach.call(a,function(val){
- console.log(val);
- })