迭代器模式

0、定义

TIP

1、顺序访问一个集合

2、使用者无需知道集合的内部结构（封装）

1、设计原则验证

1、迭代器对象和目标对象分离
2、迭代器将使用者与目标对象隔离开
3、符合开放封闭原则

2、示例

示例：jQuery

deign

3、代码

class Iterator {
    constructor(container) {
        this.list = container.list
        this.index = 0
    }
    next() {
        if (this.hasNext()) {
            return this.list[this.index++]
        }
        return null
    }
    hasNext() {
        if (this.index >= this.list.length) {
            return false
        }
        return true
    }
}

class Container {
    constructor(list) {
        this.list = list
    }
    // 生成遍历器
    getIterator() {
        return new Iterator(this)
    }

}

// test
let arr = [1, 2, 3, 4, 5, 6]
let container = new Container(arr)
let iterator = container.getIterator()
while(iterator.hasNext()) {
    console.log(iterator.next())
}

4、经典场景

4.1、jQuery each

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <a href="#">a5</a>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">
        var arr = [1, 2, 3]
        var nodeList = document.getElementsByTagName('a')
        var $a = $('a')

        /******单独遍历********/
        // 遍历数组
        arr.forEach(function(item) {
            console.log(item)
        })

        // 遍历nodeList
        var i, length = nodeList.length
        for (i = 0; i < length; i++) {
            console.log(nodeList[i])
        }

        // 遍历 $a
        $a.each(function(key, item) {
            console.log(key, item)
        })

        /**********三种方法封装**********/
        // 封装
        function each(data) {
            var $data = $(data) // 生成迭代器
            $data.each(function(key, val) {
                console.log(key, val)
            })
        }

        each(arr)
        each(nodeList)
        each($a)
    </script>
</body>
</html>

4.2、ES6 Iterator

ES6 Iterator 为何存在？

ES6 语法中，有序集合的数据类型已经有很多
Array、Map、Set、String、TypedArray、arguments、NodeList
需要有一个统一的遍历接口来遍历所有数据类型
注意：object 不是有序集合，可以用 Map 代替

ES6 Iterator 是什么？

以上数据类型，都有[Symbol.iterator]
属性值是函数，执行函数返回一个迭代器
这个迭代器就有 next 方法可顺序迭代子元素
可运行 Array.prototype[Symbol.iterator] 来测试

// 迭代器底层原理
function each(data) {
    // 生成遍历器
    let iterator = data[Symbol.iterator]()

    // 直接遍历
    // console.log(iterator.next()) // 有数据时返回 {value: 1, done: false}
    // console.log(iterator.next())
    // console.log(iterator.next())
    // console.log(iterator.next())
    // console.log(iterator.next())
    // console.log(iterator.next())
    // console.log(iterator.next()) // 没有数据时返回 {value: undefined, done: true}

    // 简单封装
    let item = {done: false}
    while(!item.done) {
        item = iterator.next()
        if (!item.done) {
            console.log(item.value)
        }
    }
}

// for of 语法糖封装
function each2(data) {
    // 带有遍历器特性的对象 ： data[Symbol.iterator] 有值
    for (let item of data) {
        console.log(item)
    }
}

let arr = [1, 2, 3, 4]
let nodeList = document.getElementsByTagName('p')
let m = new Map()
m.set('a', 100)
m.set('b', 100)

each(arr)
each(nodeList)
each(m)

each2(arr)
each2(nodeList)
each2(m)

4.3、ES6 Iterator 与 Generator

Iterator 的价值不限于上述几个类型的遍历
还有 Generator 函数的使用
即只要返回的数据符合 Iterator 接口的要求
即可使用 Iterator 语法，这就是迭代器模式

迭代器模式 ​

0、定义 ​

1、设计原则验证 ​

2、示例 ​

3、代码 ​

4、经典场景 ​

4.1、jQuery each ​

4.2、ES6 Iterator ​

4.3、ES6 Iterator 与 Generator ​

迭代器模式

0、定义

1、设计原则验证

2、示例

3、代码

4、经典场景

4.1、jQuery each

4.2、ES6 Iterator

4.3、ES6 Iterator 与 Generator