Iterator迭代器

2020-06-26 本文已影响0人 ZzzCoder

Iterator迭代器定义

为各种不同的数据结构提供统一的访问机制（即使用for...of访问），任何数据结构，只要部署了Iterator接口，就可以完成遍历操作。

作用

为各种数据结构提供一个统一的简便的访问接口
使得数据接口的成员能够按照某种次序排列
ES6创造了一种心得遍历命令for...for循环，Iterator接口主要供for...of消费

遍历的过程

创建一个指针对象，指向当前数据结构的起始位置，也就是说，遍历器对象本质上就事一个指针对象
第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员
第二次调用指针对象的next方法，指针指向数据结果的第二个成员
不断调用指针对象的next方法，知道它的指向数据结构的结束位置

每次调用next返回数据结构当前成员的信息，具体返回{value, done}两个属性的对象。value表示当前成员的值，done表示遍历是否结束。

模拟Iterator遍历生成器

function makeIterator(arr) {
    let nextIndex = 0
    return {
        next: function () {
            return nextIndex < arr.length 
                ? { value: arr[nextIndex++], done: false } 
                :  { value: void 0, done: true }
        }
    }
}

const it = makeIterator([1, 2, 3])

it.next() // { value: 1, done: false }
it.next() // { value: 2, done: false }
it.next() // { value: 3, done: false }
it.next() // { value: undefined, done: true }

默认的Iterator接口

当使用for...of循环遍历某个数据结构时，该循环会自动去寻找Iterator接口。只要数据结构部署了Iterator接口，就称这种数据结构为可遍历（iterable）的

在ES6中，默认的Iterator接口部署在数据结构的Symbol.iterator属性，一个数据介结构具有Symbol.iterator属性，就认为时可遍历的。调用Symbol.iterator方法，就能得到当前数据结构默认的遍历器生成函数

例如以下就是一个可遍历的数据结构，因为它就有Symbol.iterator属性，而且执行这个属性返回的是一个可遍历的对象。

const obj = {
    [Symbol.iterator]: function () {
        return {
            next: function() {
                return {
                    value: 'coder',
                    done: true
                }
            }
        }
    }
}

具备默认Iterator接口的数据结构

Array
Map
Set
String
TypedArray
函数的arguments对象
NodeList对象

以Array举例

const arr = [1, 2, 3, 4]
const it = arr[Symbol.iterator]()

it.next() // {value: 1, done: false}
it.next() // {value: 2, done: false}
it.next() // {value: 3, done: false}
it.next() // {value: 4, done: false}
it.next() // {value: undefined, done: true}

使用for...of遍历以上定义的数组

for (let value of arr) {
    console.log(value)
}
// 1
// 2
// 3
// 4

为对象添加Iterator接口

const obj = {
    list: ['hello Vue', 'hello React', 'hello ES6'],
    [Symbol.iterator]() {
        const _this = this
        let currentIndex = 0
        return {
            next() {
                if (currentIndex >= _this.list.length) {
                    return {
                        value: void 0,
                        done: true
                    }
                }
                return {
                    value: _this.list[currentIndex++],
                    done: false
                }
            }
        }
    }
}

for (let value of obj) {
    console.log(value)
}

// hello Vue
// hello React
// hello ES6

使用场景

解构赋值

对数组和Set结构进行解构赋值，会默认调用Symbol.iterator方法

const set = new Set(['Vue', 'React', 'ES6'])

const [x, y, z] = set

const [vue, ...rest] = set

扩展运算符

扩展运算符（...）默认调用Iterator接口

const arr = ['Vue', 'React', 'ES6']

function displayName(...args) {
    console.log(...args)
}

displayName(...arr) // Vue React ES6

yield*

yield*后面跟的是一个可遍历的结构，会调用该结构的遍历接口

function *g() {
    yield 'HTML'
    yield* ['Vue', 'React', 'ES6']
    yield 'Webpack'
}

const it = g()

for(let value of it) {
    console.log(value)
}

// 'HTML'
// 'Vue'
// 'React'
// 'ES6'
// 'Webpack'

其他场合

for...of
Array.from
Map()，Set()等
Promise.all()，Promise.race()

Iterator接口和Generator函数

const obj = {
    * [Symbol.iterator]() {
        yield 'HTML'
        yield* ['Vue', 'React', 'ES6']
        yield 'Webpack'
    }
}

for(let value of obj) {
    console.log(value)
}

// 'HTML'
// 'Vue'
// 'React'
// 'ES6'
// 'Webpack'

遍历器对象的return()和throw()

遍历器对象中除了next方法时必须的，还有return和throw两个可选方法

提前退出一般使用return方法（出错或有break、continue语句），throw方法主要配合Generator函数一起使用

const obj = {
    list: ['hello Vue', 'hello React', 'hello ES6'],
    [Symbol.iterator]() {
        const _this = this
        let currentIndex = 0
        return {
            next() {
                if (currentIndex >= _this.list.length) {
                    return {
                        value: void 0,
                        done: true
                    }
                }
                return {
                    value: _this.list[currentIndex++],
                    done: false
                }
            },
            return() {
                return { value: 'i am a return', done: true }
            }
        }
    }
}

for(let value of obj) {
    console.log(value)
    if (value.includes('React')) {
        break
    }
}

// hello Vue
// hello React
// i am a return

`for...of`和`for...in`的区别

for...in的缺点：

数组的键名是数字，但是使用for...in循环是以字符串作为键名
for...in循环不仅可以遍历数字键名，也可以遍历手动添加的其他键名，甚至包括原型链上的键名
某些情况下，for...in会以任意顺序遍历键名

for...in主要为遍历对象而设计，不适用于遍历数组

for...of相比之下有以下优势

有着for...in的简单语法，但是没有for...in的那些缺点
不用于forEach，它可以使用break，continue和return配合使用，提前结束遍历
提供了遍历所有数据结构的通过一操作接口

Iterator迭代器