原生JS优化each函数
原创
©著作权归作者所有:来自51CTO博客作者koaxios的原创作品,请联系作者获取转载授权,否则将追究法律责任
each —— 算是JavaScript中的一个“语法糖”API了。它的作用是“遍历数组/对象中的每一个元素/属性,操作想要操作的事情(执行回调函数)”。
其中在jQuery中使用的尤其广泛:
var arr=[1,2,3,4];
$.each(arr,function(i,v){
console.log(i+", "+v);
if(i===2){
return false;
}
});
其结果如下图:
这时,我们将鼠标移至【each】上,会显示如下内容:
那现在,我们用原生JavaScript来实现一下each函数:
var arr=[1,2,3,4,3];
var each=function(arr,fn){
for(var i=0;i<arr.length;i++){
if(fn(i,arr[i])===false){
break;
}
}
};
var index=-1;
each(arr,function(i,v){
console.log(i+", "+v);
if(v===3){
index=i;
return false;
}
return true;
});
console.log(index);
这样,就能在这个功能上和上面的代码达到同样的效果了!
但是,这个代码正确吗?
关于this的指向:
在jQuery中,这样写:
var arr=[1,2,3];
$.each(arr,function(){
console.log(this);
})
能得到如下结果:
但修改前面JS内容如上,只能得到三个window!
显然的,是在【回调函数】中更改了this的指向 —— 我们很容易想到call & apply:
//each函数“简易最终版”:
var each=function(arr,fn){
for(var i=0;i<arr.length;i++){
if(fn.call(arr[i],i,arr[i])===false){
break;
}
}
};
小结:利用优化的each更改页面元素样式
var getTag=function(tag){
return document.getElementsByTagName(tag);
};
var each=function(arr,fn){
for(var i=0;i<arr.length;i++){
if(fn.call(arr[i],i,arr[i])===false){
break;
}
}
};
var list1=getTag('div');
each(list1,function(){
this.style.backgroundColor='green';
});