【js】迭代器与生成器

头像
怼怼
    阅读 6 分钟

    迭代器(Iterator)

    有时也称为遍历器 - 迭代器对象
    作用

    1. 为各种数据结构提供统一的访问接口
    2. 使数据结构的成员按照某种次序排列
    3. 统一的迭代方式for...of循环

    1.可迭代(iterable)

    iterable：拥有Symbol.iterator属性的数据结构是可迭代的
    Symbol.iterator：值为迭代器生成函数
    原生可迭代的数据结构：

    1. Array
    2. Map
    3. Set
    4. String
    5. TypedArray
    6. arguments

    7. NodeList

      这些数据结构均可以使用for...of来遍历
    //以数组为例，判断是否有Symbol.iterator属性
const arr = [1, 2, 3, 4]
Symbol.iterator in arr //true
//for...of遍历数组
for(const i of arr){
    console.log(i) //1 2 3 4
}

    2.迭代器生成函数(Symbole.iterator)

    返回一个迭代器对象

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

    image.png

    迭代器中有一个next函数
    next()会返回一个成员对象，有value和done两个属性，value表示当前成员的值，done表示遍历是否终止
    for...of每次的遍历都会调用next函数并取value

    2.1next()方法

    const arr = [1, 2, 3, 4]
let iter = arr[Symbol.iterator]() //返回一个遍历器对象
console.log(iter.next());//{value: 1, done: false}
console.log(iter.next());//{value: 2, done: false}
console.log(iter.next());//{value: 3, done: false}
console.log(iter.next());//{value: 4, done: false}
console.log(iter.next());//{value: undefined, done: true}
    遍历器对象可以视为一个指针，每次调用上面的next方法都会移动指针

    2.2实现一个迭代器生成函数

    数组

    //实现
function makeIterator(arr) {
    var nextIndex = 0;
    return {
        next() {
            return nextIndex < arr.length ?
                { value: arr[nextIndex++], done: false } :
                { value: undefined, done: true }
        }
    }
}
//测试
const arr = [1]
let iter = makeIterator(arr)
console.log(iter.next()) //{value: 1, done: false}
console.log(iter.next());//{value: undefined, done: true}
    • 对于对象也可以去实现一个迭代器生成函数，思路大致一样
    • 但是对象上有丰富的方法间接生成一个数组，Object.values(obj)、keys、entries，这样就间接拥有了Symbol.iterator接口，可以使用for...of循环遍历
    • 对于对象这种非线性的数据结构，部署迭代器接口相当于将其转化为线性结构，不如直接使用Map

    生成器(Generator)

    • 从语法和结构上看，封装了多个内部状态 - 状态机
    • 从返回结果看，返回了一个迭代器对象 - 迭代器生成函数

    形式

    1. functon与函数名之间有一个星号*

    2. 内部使用yield语句定义不同的内部状态

      function* generator(){
 yield 1;
 yield 2;
 return 3;
}

    1.next方法

    1.1调用

    调用生成器函数不会运行内部代码，会返回一个迭代器对象，上面有next方法

    function* generator() {
    console.log("a");
    yield 1;
    console.log("b");
    return 2
    console.log("c");
    yield 3
}
let iter = generator()
console.log(iter);

    image.png

    console.log(iter.next());// "a" {value:1,done:false}
console.log(iter.next());// "b" {value:2,done:true}
console.log(iter.next());// {value:undefined,done:true}
    第一次调用next会开始运行函数，从起始到第一个yield结束，返回yield后的状态
    再调用next时会从上一个yield语句后开始执行，直到遇到下一个yield
    当执行到return时，返回的对象done属性为true，且后续代码不再执行，下一调用返回{value:undefined,done:true}
    yield不会终止只会中断且返回的done始终是false

    1.2参数

    next方法中可以添加参数，作为上一个yield的值，yield本身没有值

    function* generator(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z)
}
let iter = generator(5)
console.log(iter.next());//{value: 6, done: false}
console.log(iter.next(12));//{value: 8, done: false}
console.log(iter.next(13));//{value: 42, done: true}
    第一次返回结果为 x + 1 => 5 + 1
    第二次的返回结果y由第一个yield计算而来，其值为第二个next()中的参数 2*12/3 = 8
    z的值由第二个yield的值，其值为第三个next()中的参数 5 + 24 + 13 = 42
    function* generator() {
    let val1 = yield 1
    console.log(""val1);
    let val2 = yield 2
    console.log(val2);
}
let iter = generator()
iter.next("one")
iter.next("two") //第一个yield的值：two
iter.next("three")//第二个yield的值：three

    2.yield语句

    • 普通的yield语句可以中断执行，并且返回转态

    • yield* 后可以跟随一个迭代器对象，相当于在生成器内调用另一个生成器

      function* generator1() {
  yield 1
  yield 2
}
function* generator2() {
  yield 'a'
  yield* generator1()
  yield 'b'
  return 'c'
}
let gene2 = generator2()
for (const i of gene2) {
  console.log(i)// 'a' 1 2 'b'
}
      在一个生产器yield* 执行另一个生成器，相当于将它的语句插入到该生成器中
      return返回的done是true，for...of在遍历时不会返回其值
    • 如果是yield后执行一个生成器，next返回的value是一个迭代器对象
    function* generator1() {
    yield 1
    yield 2
}
function* generator2() {
    yield 'a'
    yield generator1()
}
let gene2 = generator2()
console.log(gene2.next());
console.log(gene2.next());

    image.png

    3.Generator.prototype.throw()

    3.1作用

    外部抛出错误，在内部捕获

    function* generator() {
    try {
        yield 1
        yield 2
        yield 3
    }
    catch (e) {
        console.log("内部捕获：" + e);
    }
}
let gene = generator()
try {
    console.log(gene.next());
    gene.throw("第一次错误");
    console.log(gene.next());
    gene.throw("第二次错误");
    console.log(gene.next());
     gene.throw("第三次错误");
    console.log(gene.next());
} catch (e) {
    console.log("外部捕获：" + e);
}

    image.png

    第一次调用throw会在内部的catch中捕获，try中的语句不再执行
    出现错误后再调用next为终止状态的对象，说明生成器被终止了
    由于生成器被终止，第二次错误会在外部捕获，生成器彻底终止，再调用上面的方法不再生效

    3.2返回值

    throw返回下一个next的状态

    function* generator() {
    try {
        console.log(1);
        yield "in11"
        console.log(2);
        yield "in12"
    }
    catch (e) {
        console.log("内部捕获1");
    }

    console.log(3);
    yield "out1"

    try {
        console.log(4);
        yield "in21"
        console.log(5);
        yield "in22"
    }
    catch (e) {
        console.log("内部捕获2");
    }

    console.log(6);
    yield "out2"
    yield "out3"
}
let gene = generator()
try {
    console.log(gene.next()); //1 {value: 'in11', done: false}
    console.log(gene.throw());//内部捕获1 3 {value: 'out1', done: false}
    console.log(gene.next());//4 {value: 'in21', done: false}
    console.log(gene.throw());//内部捕获2 6 {value: 'out2', done: false}
    console.log(gene.next());//7 {value: 'out3', done: false}
    console.log(gene.throw());//外部捕获
    console.log(gene.next());
} catch (e) {
    console.log("外部捕获");
}

    上面的代码中有多个try catch
    第一个next会进入第一个try中
    第一个throw的调用环境在有catch，跳出try执行至下一个yield
    若下一个yield有catch可继续throw，若没有catch则在外部捕获，生成器终止

    throw在错误被捕获后再去返回下一个next的返回值

    4.Generator.prototype.return()

    返回给定的值，终止生成器

    function* generator(){
    yield 1
    yield 2
    yield 3
}
let gene = generator()
gene.next() // {value:1,done:false}
gene.return("foo")// {value:"foo",done:false}
gene.next() // {value:undefined,done:false}

    • 如果在try..finally中，return会在finally后运行

      function* generator() {
  try {
      yield 1
      yield 2
  } finally {
      yield 3
      yield 4
  }
  yield 5
}
let gene = generator()
console.log(gene.next());//{value: 1, done: false}
console.log(gene.return(6));//{value: 3, done: false}
console.log(gene.next());//{value: 4, done: false}
console.log(gene.next());//{value: 6, done: true}
console.log(gene.next());//{value: undefined, done: true}
      第一个next进入try中，如果直接return会直接结束
      在try中执行return，会进入finally中，执行至第一个yield，返回状态，并将return添加到finally的结尾
      在finally中执行return会直接结束

    5.部署一个Iterator接口

    对象

    function* iterEntries(obj) {
    let keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
        let key = keys[i];
        yield [key, obj[key]]
    }
}
let objEntr = iterEntries({ a: 1, b: 2, c: 3 })
for (const [key, val] of objEntr) {
    console.log(key, val);
}
    'a' 1
'b' 2
'c' 3
    javascript前端iteratorgenerator
    怼怼
    73 声望6 粉丝
    « 上一篇
    【js】Number的属性与方法
    下一篇 »
    【js】async函数与其他异步操作

    引用和评论

    推荐阅读
    头像
    【Vue2源码分析与实现】（一）变化侦测

    怼怼赞 1阅读 938

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.5k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.7k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.8k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.9k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.8k

    0 条评论
    得票最新