开启辅助访问
帐号登录 |立即注册

JS中的迭代器和生成器的区别

 
JS中的迭代器和生成器,常常用来处理集合。

前置知识:
JavaScrip已经提供多个迭代集合的方法,从简单的for循环到map()和filter()。
迭代器和生成器将迭代的概念直接带入核心语言,并提供一种机制来自定义for...of循环的行为。

1. 概述
当我们使用循环语句迭代数据时,需初始化一个变量来记录每一次迭代在数据集合中的位置:
let a = ["aaa","bbb","ccc"];
for (let i = 0; i< a.length; i++){
    console.log(a);
}
这边的i就是我们用来记录迭代位置的变量,但是在ES6开始,JavaScrip引入了迭代器这个特性,并且新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环、展开运算符(...),甚至连异步编程都可以使用迭代器。2. 迭代器(简单介绍)
迭代器是一种特殊对象,它具有一些专门为迭代过程设计的专有接口,所有的迭代器对象都有一个next()方法,每次调用都会返回一个结果对象。
这个结果对象,有两个属性:
value: 表示下一个将要返回的值。
done: 一个布尔值,若没有更多可返回的数据时,值为true,否则false。
如果最后一个值返回后,再调用next(),则返回的对象的done值为true,而value值如果没有值的话,返回的为undefined。

ES5实现一个迭代器:
function myIterator(list){
    var i = 0;
    return {
        next: function(){
            var done = i >= list.length;
            var value = !done ? list[i++] : undefined;
            return {
                done : done,
                value : value
            }
        }
    }
}
var iterator = myIterator([1,2,3]);
iterator.next();  // "{done: false, value: 1}"
iterator.next();  // "{done: false, value: 2}"
iterator.next();  // "{done: false, value: 3}"
iterator.next();  // "{done: true, value: undefined}"
// 以后的调用都一样
iterator.next();  // "{done: true, value: undefined}"

从上面代码可以看出,ES5的实现还是比较麻烦,而ES6新增的生成器,可以使得创建迭代器对象的过程更加简单。3. 生成器(简单介绍)
生成器是一种返回迭代器的函数,通过function关键字后的星号(*)来表示,函数中会用到新的关键字yield。星号可以紧挨着function关键字,也可以在中间添加一个空格。
function *myIterator(){
    yield 1;
    yield 2;
    yield 3;
}
let iterator = myIterator();
iterator.next();  // "{done: false, value: 1}"
iterator.next();  // "{done: false, value: 2}"
iterator.next();  // "{done: false, value: 3}"
iterator.next();  // "{done: true, value: undefined}"
// 以后的调用都一样
iterator.next();  // "{done: true, value: undefined}"
生成器函数最有趣的部分是,每当执行完一条yield语句后函数就会自动停止执行,比如上面代码,当yield 1;执行完后,便不会执行任何语句,而是等到再调用迭代器的next()方法才会执行下一个语句,即yield 2;.
使用yield关键字可以返回任何值和表达式,因为可以通过生成器函数批量给迭代器添加元素:
function *myIterator(list){
    for(let  i = 0; i< list.length ; i ++){
        yield list;
    }
}
var iterator = myIterator([1,2,3]);
iterator.next();  // "{done: false, value: 1}"
iterator.next();  // "{done: false, value: 2}"
iterator.next();  // "{done: false, value: 3}"
iterator.next();  // "{done: true, value: undefined}"
// 以后的调用都一样
iterator.next();  // "{done: true, value: undefined}"
生成器的适用返回很广,可以将它用于所有支持函数使用的地方。
以上就是本文的全部内容,感谢大家支持JScript之家——编程学习者社区!


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。