JavaScript设计模式学习第二十二篇－迭代器模式

迭代器模式&＃xff08;Iterator Pattern&＃xff09;用于顺序地访问聚合对象内部的元素&＃xff0c;又无需知道对象内部结构。使用了迭代器之后&＃xff0c;使用者不需要关心对象的内部构造&＃xff0c;就可以按序访问其中的每个元素。

1. 什么是迭代器

银行里的点钞机就是一个迭代器&＃xff0c;放入点钞机的钞票里有不同版次的人民币&＃xff0c;每张钞票的冠字号也不一样&＃xff0c;但当一沓钞票被放入点钞机中&＃xff0c;使用者并不关心这些差别&＃xff0c;只关心钞票的数量&＃xff0c;以及是否有假币。

这里我们使用 Javascript 的方式来点一下钞&＃xff1a;

var bills &＃61; [&＃39;MCK013840031&＃39;, &＃39;MCK013840032&＃39;, &＃39;MCK013840033&＃39;, &＃39;MCK013840034&＃39;, &＃39;MCK013840035&＃39;];bills.forEach(function(bill) {console.log(&＃39;当前钞票的冠字号为 &＃39; &＃43; bill)
})


是不是很简单&＃xff0c;这是因为 Javascript 已经内置了迭代器的实现&＃xff0c;在某些个很老的语言中&＃xff0c;使用者可能会为了实现迭代器而烦恼&＃xff0c;但是在 Javascript 中则完全不用担心。

2. 迭代器的简单实现

前面的 forEach 方法是在 IE9 之后才原生提供的&＃xff0c;那么在 IE9 之前的时代里&＃xff0c;如何实现一个迭代器呢&＃xff0c;我们可以使用 for 循环自己实现一个 forEach&＃xff1a;

var forEach &＃61; function(arr, cb) {for (var i &＃61; 0; i }forEach([&＃39;hello&＃39;, &＃39;world&＃39;, &＃39;!&＃39;], function(currValue, idx, arr) {console.log(&＃39;当前值 &＃39; &＃43; currValue &＃43; &＃39;&＃xff0c;索引为 &＃39; &＃43; idx)
})// 当前值 hello&＃xff0c;索引为 0
// 当前值 world&＃xff0c;索引为 1
// 当前值 !&＃xff0c;索引为 2

2.1. JQuery 源码中迭代器实现

JQuery 也提供了一个 $.each的遍历方法&＃xff1a;

// jquery 源码
each: function (obj, callback) {var i &＃61; 0;// obj 为数组时if (isArrayLike(obj)) {for (; i }// 使用
$.each([&＃39;hello&＃39;, &＃39;world&＃39;, &＃39;!&＃39;], function(idx, currValue){console.log(&＃39;当前值 &＃39; &＃43; currValue &＃43; &＃39;&＃xff0c;索引为 &＃39; &＃43; idx)
})


这里的源码分为两个部分&＃xff0c;前一个部分是形参 obj 为数组情况下的处理&＃xff0c;使用 for 循环&＃xff0c;以数组下标依次使用 call/apply传入回调中执行&＃xff0c;第二部分是形参 obj为对象情况下的处理&＃xff0c;是使用 for-in 循环来获取对象上的属性。另外可以看到如果 callback.call返回的结果是 false 的话&＃xff0c;这个循环会被 break。

源码位于&＃xff1a; jquery/src/core.js#L246-L265

由于处理对象时使用的是 for-in&＃xff0c;所以原型上的变量也会被遍历出来&＃xff1a;

var foo &＃61; { paramProto: &＃39;原型上的变量&＃39; };var bar &＃61; Object.create(foo, {paramPrivate: {configurable: true,enumerable: true,value: &＃39;自有属性&＃39;,writable: true}
});$.each(bar, function(key, currValue) {console.log(&＃39;当前值为 「&＃39; &＃43; currValue &＃43; &＃39;」&＃xff0c;键为 &＃39; &＃43; key);
})// 当前值为 「自有属性」&＃xff0c;键为 paramPrivate
// 当前值为 「原型上的属性」&＃xff0c;键为 paramProto

因此可以使用 hasOwnProperty 来判断键是否是在原型链上还是对象的自有属性。

我们还可以利用如果 callback.call 返回的结果是 false 则 break 的特点&＃xff0c;来进行一些操作&＃xff1a;

$.each([1, 2, 3, 4, 5], function (idx, currValue) {if (currValue > 3){return false}console.log(&＃39;当前值为 &＃39; &＃43; currValue)
})
// 当前值为 1
// 当前值为 2
// 当前值为 3

2.2. Underscore 源码中的迭代器实现

// underscore 源码
_.each &＃61; function (obj, iteratee) {var i, length// obj 为数组时if (isArrayLike(obj)) {for (i &＃61; 0, length &＃61; obj.length; i }// 使用
_.each([&＃39;hello&＃39;, &＃39;world&＃39;, &＃39;!&＃39;], function (currValue, idx, arr) {console.log(&＃39;当前值 &＃39; &＃43; currValue &＃43; &＃39;&＃xff0c;索引为 &＃39; &＃43; idx)
})

underscore 迭代器部分的实现跟 jQuery 的差不多&＃xff0c;只是回调 iteratee 的执行是直接调用&＃xff0c;而不是像 jQuery 是使用 call&＃xff0c;也不像 jQuery 那样提供了迭代终止 break 的支持&＃xff0c;所以总的来说还是 jQuery 的实现更优。

另外&＃xff0c;这里 iteratee 变量的命名也可以看出来迭代器的含义。

源码位于&＃xff1a; underscore.js#L181-L195

3. Javascript 原生支持

随着 Javascript 的 ECMAScript 标准每年的发展&＃xff0c;给越来越多好用的 API 提供了支持&＃xff0c;比如 Array 上的 filter、forEach、reduce、flat 等&＃xff0c;还有 Map、Set、String 等数据结构&＃xff0c;也提供了原生的迭代器支持&＃xff0c;给我们的开发提供了很多便利&＃xff0c;也让 underscore 这些工具库渐渐淡出历史舞台。

另外&＃xff0c;Javascript 中还有很多类数组结构&＃xff0c;比如&＃xff1a;

1. arguments&＃xff1a;函数接受的所有参数构成的类数组对象&＃xff1b;

2. NodeList&＃xff1a;是 querySelector接口族返回的数据结构&＃xff1b;

3. HTMLCollection&＃xff1a;是 getElementsBy 接口族返回的数据结构&＃xff1b;

对于这些类数组结构&＃xff0c;我们可以通过一些方式来转换成普通数组结构&＃xff0c;以 arguments为例&＃xff1a;

// 方法一
var args &＃61; Array.prototype.slice.call(arguments)// 方法二
var args &＃61; [].slice.call(arguments)// 方法三 ES6提供
const args &＃61; Array.from(arguments)// 方法四 ES6提供
const args &＃61; [...arguments];

转换成数组之后&＃xff0c;就可以快乐使用 Javascript 在 Array 上提供的各种方法了。

4. ES6 中的迭代器

ES6 规定&＃xff0c;默认的迭代器部署在对应数据结构的 Symbol.iterator 属性上&＃xff0c;如果一个数据结构具有 Symbol.iterator 属性&＃xff0c;就被视为可遍历的&＃xff0c;就可以用 for...of 循环遍历它的成员。也就是说&＃xff0c;for...of 循环内部调用的是数据结构的Symbol.iterator 方法。

for-of 循环可以使用的范围包括 Array、Set、Map 结构、上文提到的类数组结构、Generator 对象&＃xff0c;以及字符串。

通过 for-of 可以使用 Symbol.iterator 这个属性提供的迭代器可以遍历对应数据结构&＃xff0c;如果对没有提供 Symbol.iterator 的目标使用 for-of 则会抛错&＃xff1a;

var foo &＃61; { a: 1 }for (var key of foo) {console.log(key)
}// Uncaught TypeError: foo is not iterable


我们可以给一个对象设置一个迭代器&＃xff0c;让一个对象也可以使用 for-of 循环&＃xff1a;

var bar &＃61; {a: 1,[Symbol.iterator]: function() {var valArr &＃61; [{ value: &＃39;hello&＃39;, done: false },{ value: &＃39;world&＃39;, done: false },{ value: &＃39;!&＃39;, done: false },{ value: undefined, done: true }]return {next: function() {return valArr.shift()}}}
}for (var key of bar) {console.log(key)
}// hello
// world
// !


可以看到 for-of 循环连 bar 对象自己的属性都不遍历了&＃xff0c;遍历获取的值只和 Symbol.iterator 方法实现有关。

5. 迭代器模式总结

迭代器模式早已融入我们的日常开发中&＃xff0c;在使用 filter、reduce、map 等方法的时候&＃xff0c;不要忘记这些便捷的方法就是迭代器模式的应用。当我们使用迭代器方法处理一个对象时&＃xff0c;我们可以关注与处理的逻辑&＃xff0c;而不必关心对象的内部结构&＃xff0c;侧面将对象内部结构和使用者之间解耦&＃xff0c;也使得代码中的循环结构变得紧凑而优美。