说明:最后一章,o(╥﹏╥)o终于要学完了
PS:学习自---掘金的JavaScript设计模式核心原理与应用
小册
一、概念
迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示。
迭代器模式是设计模式中少有的目的性极强的模式,它就解决遍历问题
二、ES6迭代器的实现
说明:ES6约定,任何数据结构只要具备Symbol.iterator属性(这个属性就是Iterator的具体实现,它本质上是当前数据结构默认的迭代器生成函数),就可以被遍历----准确地说,是被for...of...循环和迭代器的next方法遍历。
- 1.ES6迭代案例
// for...of...
const arr = [1, 2, 3];
for(item of arr) {
console.log(`当前元素是${item}`)
}
// 当前元素是1
// 当前元素是2
// 当前元素是3
// 迭代器实现
const arr = [1, 2, 3];
// 通过调用iterator,拿到迭代器对象
const iterator = arr[Symbol.iterator]()
iterator.next() // 1
iterator.next() // 2
iterator.next() // 3
- 2.迭代器模拟for...of...写法
const arr = [1, 2, 3];
// 通过调用iterator,拿到迭代器对象
const iterator = arr[Symbol.iterator]()
// 初始化一个迭代结果
let now = { done: false }
while(!now.done) {
now = iterator.next();
if(!now.done) {
console.log(`现在遍历到了${now.value}`);
}
}
// 结果:
// 现在遍历到了1
// 现在遍历到了2
// 现在遍历到了3
- 3.迭代器生成函数
// 迭代器生成函数
function *iteratorGenerator() {
yield '1号选手'
yield '2号选手'
yield '3号选手'
}
const iterator = iteratorGenerator()
iterator.next() // 1号选手
iterator.next() // 2号选手
iterator.next() // 3号选手
三、ES5手写迭代器
// 定义生成器函数,入参是任意集合
function iteratorGenerator(list) {
// 记录当前索引
var idx = 0;
// len记录传入集合的长度
var len = list.length;
return {
// next调用方法模拟
next: function() {
var done = idx >= len // 索引没超过集合长度,done为false
var value = !done ? list[idx++]: undefined // done为false继续取值
return {
done: done,
value: value
}
}
}
}
var iterator = iteratorGenerator(['1号选手', '2号选手', '3号选手'])
iterator.next()
iterator.next()
iterator.next()