(设计模式)10.迭代器模式

171 阅读1分钟

说明:最后一章,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号选手

image.png

三、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()