JavaScript -- 设计模式行为型设计模式-迭代器模式

﹏ヽ暗。殇╰゛Y 2022-01-05 07:43 362阅读 0赞

迭代器模式：提供一种方法顺序一个聚合对象中各个元素，而又不暴露该对象内部表示。迭代器模式的特点在于顺序访问一个集合，使用者无需知道内部结构。

在现实生活中好像例子不多，但是熟悉ES6的工程师应该知道es6中有iterator。我们先不看这个，先写一个小的demo代码来熟悉迭代器。

我们先看一下迭代器的UML类图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

class Iterator {
        constructor(container) {
            this.list = container.list;
            this.index = 0;
        }
        next() {
            if (this.hasNext()) {
                return this.list[this.index++];
            } else this.index++;
            return null;
        }
        hasNext() {
            return this.index < this.list.length;
        }
    }
    class Container {
        constructor(list) {
            this.list = list;
        }
        getIterator() {
            return new Iterator(this);
        }
    }
    
    const arr = [1, 2, 3, 4, 6];
    
    const iter = new Container(arr).getIterator();
    while (iter.hasNext()) {
        console.log(iter.next());
    }

![20190623153004409.png][]

我们获取到迭代器对象后，无需关注迭代器是如何遍历子元素的，只需要简单的调用next函数即可。

ES6的iteractor你可能没有用过，但是for of循环你肯定使用过。

在JS当中，有很多有顺序的聚合对象比如array,map, set, nodeList, arguments,类数组，这些数据类型上面有一个Symbol.iterator属性，该值是一个函数用于返回一个迭代器，该迭代器上面有一个next函数。

const arr = [1, 2, 3, 4, 6];
    const ite = arr[Symbol.iterator]();
    console.log(ite);

![20190623153806397.png][]

我们来使用ES6的iterator来遍历该数组。

const arr = [1, 2, 3, 4, 6];
    let iterator = arr[Symbol.iterator]();
    
    let item = iterator.next();
    while (!item.done) {
        console.log(item);
        item = iterator.next();
    }
    
    console.log(iterator.next());
    console.log(iterator.next());

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

value:表示当前遍历的值  done表示是否结束 true表示结束

我们来封装一个each方法，来实现遍历。

const arr = [1, 2, 3, 4, 6];
    const set = new Set();
    set.add(1);
    set.add(2);
    set.add(3);
    set.add(4);
    
    
    function each(data) {
        let iterator = data[Symbol.iterator]();
        let item = iterator.next();
        while (!item.done) {
            console.log(item.value);
            item = iterator.next();
        }
    }
    
    console.log("数组遍历");
    each(arr);
    console.log("set遍历");
    each(set);

这样其实很麻烦，幸好ES6封装了for of循环 这个我们就不掩饰了，非常简单。

Generator函数

function* list() {
        yield 1;
        yield 2;
        yield 3;
    }
    const l = list();
    each(l);

![20190623162035436.png][]

Generator函数返回的是可以迭代的对象，我们可以使用each(上面封装的方法）或 for of来遍历。

我们知道Object没有迭代器，不能使用for of循环，那么我们可以通过Generator来实现for of遍历Obejct

function *getObjectIterator(obj) {
        for(let key in obj) {
            yield obj[key];
        }
    }
    const obj = { name: "cyl", age: 16 }
    for (let v of getObjectIterator(obj)) {
        console.log(v);
    }

![20190623162706502.png][]

我们可以利用Generator和for of来实现一些复杂的遍历，而且不必向调用者暴露细节。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20211229/a4ae17f8f5a247c99be31aae8ea9fff9.png
[20190623153004409.png]: /images/20211229/a879303c484245f9aeb0562ea24f2345.png
[20190623153806397.png]: /images/20211229/26bd62b312f04f66b1bc5fdbf0af3c3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20211229/023208d34c6b41bc82e2db363915165a.png
[20190623162035436.png]: /images/20211229/d55b8d7a578f438eafa56b399d0b5b66.png
[20190623162706502.png]: /images/20211229/7508940e2e4147b2a4a8584c476a4f35.png