浅谈js设计模式之迭代器模式
迭代器模式无非就是循环访问聚合对象中的各个元素。比如 jQuery中的 $.each 函数,其中回
调函数中的参数 i 为当前索引, n 为当前元素,代码如下:
$.each([1, 2, 3], function(i, n) { console.log('当前下标为: ' + i); console.log('当前值为:' + n); });
现在我们来自己实现一个 each 函数, each 函数接受 2 个参数,第一个为被循环的数组,第
二个为循环中的每一步后将被触发的回调函数:
var each = function(ary, callback) { for(var i = 0, l = ary.length; i < l; i++) { callback.call(ary[i], i, ary[i]); // 把下标和元素当作参数传给 callback 函数 } }; each([1, 2, 3], function(i, n) { alert([i, n]); });
迭代器模式不仅可以迭代数组,还可以迭代一些类数组的对象。比如 arguments 、
{"0":'a',"1":'b'} 等。 通过上面的代码可以观察到,无论是内部迭代器还是外部迭代器,只要被
迭代的聚合对象拥有 length 属性而且可以用下标访问,那它就可以被迭代。
在 JavaScript 中, for in 语句可以用来迭代普通字面量对象的属性。jQuery 中提供了$.each`
函数来封装各种迭代行为:
$.each = function(obj, callback) { var value, i = 0, length = obj.length, isArray = isArraylike(obj); if(isArray) { // 迭代类数组 for(; i < length; i++) { value = callback.call(obj[i], i, obj[i]); if(value === false) { break; } } } else { for(i in obj) { // 迭代 object 对象 value = callback.call(obj[i], i, obj[i]); if(value === false) { break; } } } return obj; };