出处：http://www.lovejavascript.com/#!zone/blog/content.html?id=48
jquery里面有个each方法，将循环操作简化、便捷。
随后es出了个forEach方法，两个虽然用法相近，但是不能处理对象类型。且无法通过return true达到continue效果。
此外还有个every方法，该方法虽然可以实现continue效果，但是在处理类数组与对象类型时，完全无用。
在不使用jquery的each方法时，该如何处理；或者说用原生如何来实现？我在GridManager.js中集成了该方法，代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | vareach =function(object, callback){
vartype = (function(){
switch(object.constructor){
caseObject:
return'Object';
break;
caseArray:
return'Array';
break;
caseNodeList:
return'NodeList';
break;
default:
return'null';
break;
}
})();
if(type ==='Array'|| type ==='NodeList'){
[].every.call(object,function(v, i){
returncallback.call(v, i, v) ===false?false:true;
});
}
elseif(type ==='Object'){
for(variinobject){
if(callback.call(object[i], i, object[i]) ===false){
break;
}
}
}
}
|
我们来try一下， 测试下数组、对象、类数组类型及中断效果
数组类型:
1 2 3 4 | var_array = [1,2,3,4];
each(_array,function(i, v){
console.log(i +': '+ v);
});
|
输出如下:
对象类型:
1 2 3 4 | varobject = {a:1, b:2, c:3}
each(object,function(i, v){
console.log(i +': '+ v);
});
|
输出如下:
类数组类型 :
1 2 3 4 | varele = document.querySelectorAll('div');
each(ele,function(i, v){
console.log(i +': '+ v);
});
|
输出如下:
增加中断条件:
1 2 3 4 5 6 7 8 9 10 11 12 | varobject2 = {name:'baukh', age:'29', six:'男', url:'www.lovejavascript.com',}
each(object2,function(i, v){
if(i ==='age'){
console.log('存在键值为age，这家伙已经'+v+'岁了');
returntrue;
}
if(i ==='six'&& v ==='男'){
console.log('存在键值为six,是个男的，不用关注了~');
returnfalse;
}
console.log(i +': '+ v);
});
|
输出如下:
从结果可以看出来，each方法已经实现了jquery的each功能。且实现如此简单~
出处：http://www.lovejavascript.com/#!zone/blog/content.html?id=48
jquery里面有个each方法，将循环操作简化、便捷。
随后es出了个forEach方法，两个虽然用法相近，但是不能处理对象类型。且无法通过return true达到continue效果。
此外还有个every方法，该方法虽然可以实现continue效果，但是在处理类数组与对象类型时，完全无用。
在不使用jquery的each方法时，该如何处理；或者说用原生如何来实现？我在GridManager.js中集成了该方法，代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | vareach =function(object, callback){
vartype = (function(){
switch(object.constructor){
caseObject:
return'Object';
break;
caseArray:
return'Array';
break;
caseNodeList:
return'NodeList';
break;
default:
return'null';
break;
}
})();
if(type ==='Array'|| type ==='NodeList'){
[].every.call(object,function(v, i){
returncallback.call(v, i, v) ===false?false:true;
});
}
elseif(type ==='Object'){
for(variinobject){
if(callback.call(object[i], i, object[i]) ===false){
break;
}
}
}
}
|
我们来try一下， 测试下数组、对象、类数组类型及中断效果
数组类型:
1 2 3 4 | var_array = [1,2,3,4];
each(_array,function(i, v){
console.log(i +': '+ v);
});
|
输出如下:
对象类型:
1 2 3 4 | varobject = {a:1, b:2, c:3}
each(object,function(i, v){
console.log(i +': '+ v);
});
|
输出如下:
类数组类型 :
1 2 3 4 | varele = document.querySelectorAll('div');
each(ele,function(i, v){
console.log(i +': '+ v);
});
|
输出如下:
增加中断条件:
1 2 3 4 5 6 7 8 9 10 11 12 | varobject2 = {name:'baukh', age:'29', six:'男', url:'www.lovejavascript.com',}
each(object2,function(i, v){
if(i ==='age'){
console.log('存在键值为age，这家伙已经'+v+'岁了');
returntrue;
}
if(i ==='six'&& v ==='男'){
console.log('存在键值为six,是个男的，不用关注了~');
returnfalse;
}
console.log(i +': '+ v);
});
|
输出如下:
从结果可以看出来，each方法已经实现了jquery的each功能。且实现如此简单~