jquery内里有个each要领,将轮回操纵简化、便利。
随后es出了个forEach要领,两个虽然用法邻近,然则不能处置惩罚对象范例。且没法经由过程return true到达continue效果。
另外另有个every要领,该要领虽然能够完成continue效果,然则在处置惩罚类数组与对象范例时,完整无用。
在不运用jquery
的each
要领时,该怎样处置惩罚;或者说用原生怎样来完成?
前些前写了个类库: jTool, 其中就完成了该要领。
简朴完成:
// 经由过程字面量体式格局完成的函数each
var each = function(object, callback){
var type = (function(){
switch (object.constructor){
case Object:
return 'Object';
break;
case Array:
return 'Array';
break;
case NodeList:
return 'NodeList';
break;
default:
return 'null';
break;
}
})();
// 为数组或类数组时, 返回: index, value
if(type === 'Array' || type === 'NodeList'){
// 因为存在类数组NodeList, 所以不能直接挪用every要领
[].every.call(object, function(v, i){
return callback.call(v, i, v) === false ? false : true;
});
}
// 为对象花样时,返回:key, value
else if(type === 'Object'){
for(var i in object){
if(callback.call(object[i], i, object[i]) === false){
break;
}
}
}
}
我们来try一下, 测试下数组、对象、类数组范例及中缀效果
数组范例
var _array = [1,2,3,4];
each(_array, function(i, v){
console.log(i + ': ' + v);
});
输出以下:
对象范例
var object = {a:1, b:2, c:3}
each(object, function(i, v){
console.log(i + ‘: ‘ + v);
});
输出以下:
类数组范例
var ele = document.querySelectorAll('div');
each(ele, function(i, v){
console.log(i + ': ' + v);
});
输出以下:
增添中缀前提
var object2 = {name:'baukh', age: '29', six:'男', url: 'www.lovejavascript.com',}
each(object2, function(i, v){
if(i === 'age'){ //假如存在键值为age的属性时,则输出正告,用于完成continue效果
console.log('存在键值为age,这家伙已'+v+'岁了');
return true;
}
if(i === 'six' && v === '男'){//假如存在键值为age的属性时,则输出跳出,用于完成break效果
console.log('存在键值为six,是个男的,不必关注了~');
return false;
}
console.log(i + ': ' + v);
});
输出以下:
从效果能够看出来,each要领已完成了jquery的each功用。且完成云云简朴~
漫笔一行
这是前端最好的时期, 这也是前端最坏的时期。 浩瀚前端框架满天飞,跟着 jQuery 在前端行业的逐步弱化,老是会有一种斯人远去,何者慰籍的觉得。互勉吧,列位。
另引荐个表格组件gridManager