重学ES - 6（Generator & Iterator & Module）

最新推荐文章于 2024-08-14 11:59:39 发布

原创最新推荐文章于 2024-08-14 11:59:39 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

3 篇文章

订阅专栏

重学ES - 6（Generator & Iterator & Module）

一、Generator
二、Iterator
- 基本语法
- - 1. 迭代器协议

一、Generator

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。通俗的讲 Generators 是可以用来控制迭代器的函数。它们可以暂停，然后在任何时候恢复。

常规循环

for (let i = 0; i < 3; i += 1) {
    console.log(i)
}
// this will return immediately 0 -> 1 -> 2 -> 3 -> 4

利用 Generator

function* f(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}

const genForLoop = f()

console.log(genForLoop.next()) // {value: 2, done: false}
console.log(genForLoop.next()) // {value: 3, done: false}
console.log(genForLoop.next()) // {value: 4, done: true}

对比下代码，常规的循环只能一次遍历完所有值，Generator 可以通过调用 next 方法拿到依次遍历的值，让遍历的执行变得“可控”。

1. 基本语法

定义

function* gen() {
    yield 1
    yield 2
    yield 3
}

let g = gen()
// "Generator { }"

function* f(args) {
    args.forEach(item => {
        yield item
    })
}
// Uncaught SyntaxError: Unexpected identifier 
// yield只能在生成器内部使用，不能在其他函数中使用,forEach属于函数，所以这里不能使用

这个是 Generator 的定义方法，有几个点值得注意：

比普通函数多一个 *
函数内部用 yield 来控制程序的执行的“暂停”
函数的返回值通过调用 next 来“恢复”程序执行
yield只能在生成器内部使用，不能在其他函数中使用

注意
Generator不能当做构造函数来使用，只能作为生成器来使用
Generator 函数的定义不能使用箭头函数，否则会触发 SyntaxError 错误

let generator = * () => {} // SyntaxError
let generator = () * => {} // SyntaxError
let generator = ( * ) => {} // SyntaxError

yield 表达式

yield 关键字用来暂停和恢复一个生成器函数

关于 yield 表达式，要注意yield 表达式的返回值是 undefined，但是遍历器对象的 next 方法可以修改上一个yield的返回值。

function* f(x) {
    let y = 2 * (yield (x + 1))
    let z = yield (y / 3)
    return x + y + z
}
const f1 = f(1);
console.log(f1.next()) // 2 因为x传入的值为1，所以这里计算x+1=2
console.log(f1.next()) // NaN 因为这里next中没有传递值，所以上一个yield会被赋值为undefined，y=2*undefined = NaN
console.log(f1.next()) // NaN 同理1+NaN+NaN=NaN

function* f(x) {
    let y = 2 * (yield (x + 1))
    let z = yield (y / 3)
    return x + y + z
}
const f1 = f(5);
console.log(f1.next()) // 6
console.log(f1.next(12)) // 8
console.log(f1.next(13)) // x=5 y=24 z=13 注意这里y=24,因为上次yield（x+1）被赋值为了12

方法

Generator 对象有几个方法，next、return、throw。

next([value])，同上面案例，next 方法可以修改上一个yield的返回值。

function* gen() {
    var val = 100
    while (true) {
        val = yield val
    }
}
var g = gen()
console.log(g.next(20).value) // 100
console.log(g.next(30).value) // 30
console.log(g.next(40).value) // 40
console.log(g.next(50).value) // 50
// 这个函数如果不是generator的话，就会是一个死循环函数

return()

return 方法可以让 Generator 遍历终止，有点类似 for 循环的 break。

function* gen() {
    yield 1
    yield 2
    yield 3
}

var g = gen()

console.log(g.next()) // {value: 1, done: false}
console.log(g.return()) // {value: undefined, done: true}
console.log(g.next()) // {value: undefined, done: true}

从 done 可以看出代码执行已经结束。

当然 return 也可以传入参数，作为返回的 value 值。

function* gen() {
    yield 1
    yield 2
    yield 3
}

var g = gen()

console.log(g.next()) // {value: 1, done: false}
console.log(g.return(100)) // {value: 100, done: true}
console.log(g.next()) // {value: undefined, done: true}

throw()

可以通过 throw 方法在 Generator 外部控制内部执行的“终断”。

function* gen() {
    while (true) {
        try {
            yield 42
        } catch (e) {
            console.log(e.message)
        }
    }
}

let g = gen()
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
// 中断操作
g.throw(new Error('break'))

console.log(g.next()) // {value: undefined, done: true}

TIP

如果想退出遍历 catch 之后可以配合 return false 使用，能起到 “break” 的作用

2. 应用场景

场景1

还是前面的异步操作，按顺序读取a.json、b.json、c.json，如果使用Generator该如何实现呢？

function request(url) {
    ajax(url, res => {
        getData.next(res)
    })
}

function* gen() {
    let res1 = yield request('static/a.json')
    console.log(res1)
    let res2 = yield request('static/b.json')
    console.log(res2)
    let res3 = yield request('static/c.json')
    console.log(res3)
}
let getData = gen()
getData.next()

场景2

我们经常玩一些小游戏，比如数数字，敲7，到7和7的倍数，无限循环转圈去数数

function* count(x = 1) {
    while (true) {
        if (x % 7 === 0) {
            yield x
        }
        x++
    }
}
// es5中就是个死循环 因为es5的循环需要有个终止值，但我们这个需求没有终止，一直在数数
let n = count()
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)

通过 Generator 我们就能轻松实现，只要调用 n.next 我们就知道下一个数是什么了，而使用普通函数却没法做到。不信你试试看？

二、Iterator

处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法，从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接带入核心语言，并提供了一种机制来自定义for…of循环的行为。

如果对 MDN 这个描述理解不是很到位的话，可以看下接下来这个小示例：

let authors = {
    allAuthors: {
        fiction: [
            'Agatha Christie',
            'J. K. Rowling',
            'Dr. Seuss'
        ],
        scienceFiction: [
            'Neal Stephenson',
            'Arthur Clarke',
            'Isaac Asimov',
            'Robert Heinlein'
        ],
        fantasy: [
            'J. R. R. Tolkien',
            'J. K. Rowling',
            'Terry Pratchett'
        ]
    }
}

这个数据结构是汇总了所有作者，每个作者按创作性质进行了分类。如果我们想获取所有作者的名单，该怎么做呢？

for (let author of authors) {
    console.log(author)
}

WARNING
你发现这个遍历遇到了报错：Uncaught TypeError: authors is not iterable

for (let key in authors) {
    let r = []
    for (let k in authors[key]) {
        r = r.concat(authors[key][k])
    }
    console.log(r)
    // ["Agatha Christie", "J. K. Rowling", "Dr. Seuss", "Neal Stephenson", "Arthur Clarke", "Isaac Asimov", "Robert Heinlein", "J. R. R. Tolkien", "J. K. Rowling", "Terry Pratchett"]
}

这个做法确实可以，实际上也是手动实现的遍历加数据合并，这其实不算是遍历。这个小节就是讲述如何给这种自定义的数据结构进行遍历。

基本语法

Iterator 就是 ES6 中用来实现自定义遍历的接口，按照上述的示例，我们来实现下这个接口：

authors[Symbol.iterator] = function() {
    let allAuthors = this.allAuthors
    let keys = Reflect.ownKeys(allAuthors)
    let values = []
    return {
        next() {
            if (!values.length) {
                if (keys.length) {
                    values = allAuthors[keys[0]]
                    keys.shift()
                }
            }
            return {
                done: !values.length,
                value: values.shift()
            }
        }
    }
}

这个代码在数据结构上部署了 Iterator 接口，我们就可以用 for…of 来遍历代码了：

for (let value of authors) {
    console.log( `${value}` )
}

从代码上我们看到了自定义遍历器的强大，但是我们怎么理解 Iterator 呢？首先，要理解几个概念：可迭代协议和迭代器协议。

1. 迭代器协议

属性值必选
next 返回一个对象的无参函数，被返回对象拥有两个属性：done 和 value Y
这是两个概念：可迭代协议、迭代器协议。通俗的讲，迭代器协议要求符合以下条件：

首先，它是一个对象
其次，这个对象包含一个无参函数 next
最后，next 返回一个对象，对象包含 done 和 value 属性。其中 done 表示遍历是否结束，value 返回当前遍历的值。