11.iterator-generator

阅读数: 次 2022-10-30

字数统计: 1.3k字 | 阅读时长: 6分

iterator(迭代器)

含义：使用户在容器对象上遍访的对象，使用该接口无需关心对象的内部细节。

迭代器在JavaScript中的标准：

包含一个next方法
- next方法的可以有0个或1个参数
- 返回的对象应当包含done，value
- done(boolean)为false的时候表示这个对象还没有迭代完，为true表示该对象已经迭代完了
- value表示当前需要迭代的对象，迭代结束之后返回默认值undefined。

数组迭代器：

const names = ['abc', 'cba', 'nba']
// 封装一个函数为数组创建迭代器。
function createArrayIterator(arr) {
    let index = 0
    return {
        next() {
            if (index < arr.length) {
                return {
                    done: false, value: arr[index++]
                }
            } else {
                return {
                    done: true
                }
            }
        }
    }
}
// namesIterator就是迭代器。
const namesIterator = createArrayIterator(names)
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())

可迭代对象

可迭代对象：

必须实现一个特定的函数: [Symbol.iterator]
这个函数需要返回一个迭代器(这个迭代器用于迭代当前的的对象)

const info = {
    names: ['abc', 'cba', 'nba'],
    [Symbol.iterator]() {
        // console.log(this) // info对象
        let index = 0
        const iterator = {
            next() {
                // console.log(this) // iterator对象(如果调用call)
                if (index < this.names.length) {
                    return { done: false, value: this.names[index++] }
                } else {
                    return { done: true, value: undefined }
                }
            }
        }
        return iterator
    }
}
// 不能直接通过console.log(info[Symbol.iterator]().next())去运行，不然每次都会新建index。只能获取到第一个值。
const iterator = info[Symbol.iterator]().next.bind(info)
// iterator.next.bind(info)

// 如果在返回的对象中使用this
// 第一种方式
// console.log(iterator.next.call(info))
// console.log(iterator.next.call(info))
// console.log(iterator.next.call(info))
// console.log(iterator.next.call(info))

// 第二种方式
console.log(iterator())
console.log(iterator())
console.log(iterator())
console.log(iterator())

// 第三种方式，直接将next: () => {}变成箭头函数。

for-of的本质就是拿到这个可迭代对象调用其中的[Symbol.iterator]()，知道done为true时结束。

可迭代对象迭代键值对的对象

const info = {
    name: 'beichen',
    age: 22,
    height: 1.75,
    [Symbol.iterator]: function () {
        const keys = Object.keys(info) // 迭代keys
        const values = Object.values(info) // 迭代values
        const entires = Object.entries(info) // 迭代key and value
        let index = 0
        const iterator = {
            next() {
                if (index < entires.length) {
                    return { done: false, value: entires[index++] }
                } else {
                    return { done: true, value: undefined }
                }
            }
        }
        return iterator
    }
}

for (const item of info) {
    const [key, value] = item
    // console.log(item)
    console.log(key, value)
}

generator(生成器)

生成器也是一个特殊的迭代器。

生成器函数的特点：

function后面会跟上一个符号: * (*号可以在function后面function* foo()，也可以在函数名前面function *foo()，通常会跟在function，看个人习惯吧。)
代码的执行可以被yield控制。（yield的作用在函数开始到yield的后面的代码，yield前面的代码时不执行的）
生成器函数默认在执行的时候会返回一个生成器对象
- 要想执行生成器函数内部的代码，需要执行生成器对象的next方法
- 当遇到yield就会终端执行。

function* foo(num) {
    console.log('111')
    console.log('222')
    yield console.log('yield后面的代码，所在的哪一行')
    console.log('333')
    console.log('444')
    yield
    console.log('555')
}

const generator = foo()
generator.next() // 111 222 yield后面的代码，所在的哪一行
generator.next() // 111 222 333 444
generator.next() // 111 222 333 444 555

进阶用法

function* foo(num) {
    console.log('111', num)
    console.log('222', num)
    const next2 = yield 'aaaa'
    console.log('333', next2)
    console.log('444', next2)
    const next3 = yield 'bbbb'
    console.log('555', next3)
    yield '结尾cccc'
    return '函数执行结束'
}

const generator = foo('next1') // 第一次传入的参数会在foo(num)由num接收
const g1 = generator.next() // 这里传入的参数接收不到
const g2 = generator.next('next2') // 这里传入的参数时在第一次调用yield的前面的接收到的
const g3 = generator.next('next3') // 这里传入的参数时在第二次调用yield的前面接收到的
console.log(g1) // { done: false, value: 'aaaa' }
console.log(g2) // { done: false, value: 'bbbb' }
console.log(g3) // { done: false, value: 'cccc' }
// foo()最后返回的是{ done: true, value: 函数执行结束 }表示直接结束，返回值为undefined

return提前结束。

1	generator.return('aaa')// 可以传递参数，但是在yield哪一行就是结束了，下面的代码不会执行。

throw new Error()结束。

1	generator.throw(new Error('抛出异常结束'))

生成器代替迭代器

第一个例子

const names = ['abc', 'cba', 'nba']
function* createArrayGenerator(arr) {
    yield* arr
}
const namesGenerator = createArrayGenerator(names)
console.log(namesGenerator.next())
console.log(namesGenerator.next())
console.log(namesGenerator.next())
console.log(namesGenerator.next())

yield替换类中的实现

class Person {
    constructor(name, age, height, friends) {
        this.name = name
        this.age = age
        this.height = height
        this.friends = friends
    }

    *[Symbol.iterator]() {
        yield* Object.values(this)
        // yield* Object.keys(this)
        // yield* Object.entries(this)
        // yield* this.friends
    }
}
const p = new Person('beichen', 22, 1.76, ['beichen', 'mygirl-haixia', 'xiaoqiang'])
for (const item of p) {
    console.log(item)
}

const pItem = p[Symbol.iterator]()
console.log(pItem.next())
console.log(pItem.next())
console.log(pItem.next())
console.log(pItem.next())