资讯专栏INFORMATION COLUMN

ES6-迭代器(iterator)和生成器(generator) - 什么是迭代器和生成器

CollinPeng / 2039人阅读

摘要:我个人认为迭代器和生成器是新增的特性里面,非常重要的部分,充分地掌握和使用迭代器和生成器,是十分必要和重要的,所以我会写关于二者的一系列文章。

我个人认为迭代器和生成器是es6新增的特性里面,非常重要的部分,充分地掌握和使用迭代器和生成器,是十分必要和重要的,所以我会写关于二者的一系列文章。话不多说,先来了解一下基本概念:
一:什么是迭代器

1: 迭代器是一个对象
2: 迭代器有一个属性:next()方法,它的返回值是一个对象,我姑且叫它‘next返回对象’,以便在下文使用
3: ’next返回对象有2个属性:value和done
4: ’next返回对象‘的value:表示迭代器的数据集里面下一个将要返回的值
5: ’next返回对象‘的done:如果这轮调用next(),有数据返回,那么done为false;
如果这轮调用next(),已经没有可返回的数据了,done为true,相应地value为undefined

根据以上描述,我们可以用ES5的语法创建一个方法,这个方法的参数是一个数组,返回值是一个迭代器对象:

function createIterator(items) {
    var i = 0;
    return {
        next: function () {
            var done = i >= items.length;
            var value = done ? undefined : items[i++];
            return {
                value: value,
                done: done
            }
        }
    }
}

var iterator = createIterator([1, 2, 3]);
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: false}
console.log(iterator.next());//{value: 3, done: false}
//没有更多可返回的值
console.log(iterator.next());//{value: undefined, done: true}

二:什么是生成器
在上面的内容里我们了解到了什么是迭代器,并且根据迭代器的定义用es5的语法自己创建了一个生成迭代器的方法:createIterator()。在es6里面呢,我们不用再手动创建这个createIterator()方法,生成器就是用来做这个工作的。照旧,我们来看看生成器的具体定义和语法:

1: 生成器是一个函数
2: 生成器返回迭代器
3: function关键字后面紧挨着或者留一个空格后,必须有一个星号(*)
4: 函数体里面会用到关键字yield,来依次返回想要迭代的值

根据上面的定义,我们来使用生成器创建一个迭代器,取代前面的es5的语法:

function* createIterator() {
    yield 1;
    yield 2;
    yield 3;
}

let iterator = createIterator();
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: false}
console.log(iterator.next());//{value: 3, done: false}
//没有更多可返回的值
console.log(iterator.next());//{value: undefined, done: true}

以上,我们就用生成器创建了一个迭代器,生成器创建的迭代器会按照yield语句的顺序,依然返回迭代的值。当然这个例子与我们前面的es5的例子,并不是完全一样,这里我们没有传入参数,而是方法体里面写死了迭代的值。当然我们也可以传入参数:

function* createIterator(items) {
   for(let i = 0; i < items.length; i++){
       yield items[i];
   }
}

三:生成器函数表达式
生成器函数拥有一般函数的特性,所以也可以通过函数表达式来创建生成器:

let createIterator = function* (items) {
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
};
let iterator = createIterator([1, 2, 3]);

console.log(iterator.next()); //{value: 1, done: false}
console.log(iterator.next()); //{value: 2, done: false}
console.log(iterator.next()); //{value: 3, done: false}
//没有更多可返回的值 
console.log(iterator.next()); //{value: undefined, done: true}

这里要特别注意的是,不能使用箭头函数创建生成器。

四:yield的使用限制

1: yield关键字只能用在生成器函数内
2: 第一条所说的生成器函数内,是指最近一层的函数作用域是生成器函数。

看一个例子:

function* createIterator(items) {
    items.forEach(function (item) {
        //语法错误
        yield item;
        
    })
}

上面这个例子里,最外层的函数数一个生成器。但是离yield最近一层的函数是forEach()里面的function,而这个function不是一个生成器函数,所以这里使用yield,依然会导致语法错误。

以上就是关于迭代器和生成器的基本概念,怎么创建迭代器和生成器,以及使用中一些需要特别注意的点。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105638.html

相关文章

  • ES6-迭代iterator生成generator)- 迭代生成的高级用法

    摘要:在生成器中使用语句生成器也是函数,所以它也可以使用语句。只是由于生成器本身的特性,其内部的的行为会和一般函数有些差别。 前面2篇系列文章讲解了迭代器和生成器的最常用,最基础的用法;这篇来讨论迭代器和生成器的一些稍稍高级一点的用法: 1: 给迭代器的next()方法传参 2: 从迭代器中抛出错误 3: 在生成器中使用return语句 4: 委托生成器(组合生成器或者生成器组合?) 1: ...

    Edison 评论0 收藏0
  • 【重温基础】13.迭代生成

    摘要:迭代器和生成器将迭代的概念直接带入核心语言,并提供一种机制来自定义循环的行为。本文主要会介绍中新增的迭代器和生成器。属性本身是函数,是当前数据结构默认的迭代器生成函数。 本文是 重温基础 系列文章的第十三篇。今日感受:每次自我年终总结,都会有各种情绪和收获。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型 【重温基础】2.流...

    ymyang 评论0 收藏0
  • Python基础-迭代生成

    摘要:迭代器迭代器用于循环构建和扩展集合类型逐行遍历文本文件列表推导字典推导和集合推导元组拆包调用函数时,使用拆包实参解释器需要迭代对象时,会自动调用内置的函数,有以下功能检查对象是否实现了方法,如果实现了就调用它,获取一个迭代器。 迭代器 迭代器用于: for 循环 构建和扩展集合类型 逐行遍历文本文件 列表推导、 字典推导和集合推导 元组拆包 调用函数时, 使用 * 拆包实参 解释器...

    objc94 评论0 收藏0
  • 迭代模式到迭代协议

    摘要:迭代器模式迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而不需要暴露该对象的内部表示。可迭代协议和迭代器协议。生成器函数是可以作为迭代器工厂的函数,当它被执行时会返回一个新的对象,该对象符合可迭代协议和迭代器协议。 迭代器模式 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而不需要暴露该对象的内部表示。 迭代器分为内部迭代器和外部迭代器。内部迭代器只需一次初...

    doodlewind 评论0 收藏0
  • ES6 Features系列:GeneratorFunction介绍

    摘要:没有显示显示显示关键字迭代器生成器用于马上退出代码块并保留现场,当执行迭代器的函数时,则能从退出点恢复现场并继续执行下去。迭代器迭代器是一个拥有方法和方法的对象,通过函数不断执行以关键字分割的代码段,通过函数令分割的代码段抛出异常。 一、前言                            第一次看koajs的示例时,发现该语句 function *(next){..........

    golden_hamster 评论0 收藏0

发表评论

0条评论

CollinPeng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<