出处：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 | // 通过字面量方式实现的函数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一下， 测试下数组、对象、类数组类型及中断效果
数组类型:
| 1 2 3 4 | var _array = [1,2,3,4]; each(_array, function (i, v){ console.log(i + ': ' + v); }); |
输出如下:
对象类型:
| 1 2 3 4 | var object = {a:1, b:2, c:3} each(object, function (i, v){ console.log(i + ': ' + v); }); |
输出如下:
类数组类型 :
| 1 2 3 4 | var ele = document.querySelectorAll( 'div' ); each(ele, function (i, v){ console.log(i + ': ' + v); }); |
输出如下:
增加中断条件:
| 1 2 3 4 5 6 7 8 9 10 11 12 | 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功能。且实现如此简单~