[es6-迭代器(iterator)和生成器(generator)][1] - 什么是迭代器和生成器

2019-07-14 admin

我个人认为迭代器和生成器是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://segmentfault.com/a/1190000019755401

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69720.html

文章标题:[es6-迭代器(iterator)和生成器(generator)][1] - 什么是迭代器和生成器

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部