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

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。

什么是forEach()函数:
forEach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值。

var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"
");//打印出来是21
data.forEach(function(o,p,q){//分别对应:数组元素,元素的索引,数组本身
q[p]=o+1;
})
document.write(data);

注意:forEach无法在所有元素都传递给调用的函数之前终止(而for循环却有break方法),如果要提前终止,必须把forEach放在try块中,并能抛出一个异常。如果forEach()调用的函数抛出foreach.break异常,循环会提前终止:

function foreach(a,b,c){
try{
a.forEach(b,c);
}catch(e){
if(e===foreach.break)return;
else throw e;
}
}
forEach.break=new Error("StopIteration");
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值