• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

es6 快速入门 系列 —— 迭代器 (Iterator) 和 生成器 (Generator)

互联网 diligentman 2个月前 (02-28) 16次浏览

其他章节请看:

es6 快速入门 系列

迭代器 (Iterator) 和 生成器 (Generator)

试图解决的问题

let colors = ['red', 'blue', 'green', 'yellow']for(let i = 0, len = colors.length; i < len; i++){ console.log(colors[i])}

上面是一段标准的 for 循环代码,变过变量 i 来跟踪 colors 的索引,虽然语法简单,但如果将多个循环嵌套则需要跟踪多个变量,代码复杂度会大增,一不小心就错误的使用了其他 for 循环的跟踪变量,导致程序出错。迭代器的出现旨在消除这种复杂性并减少循环中的错误

解决的方法

使用迭代器优化上述问题,请看代码:

let colors = ['red', 'blue', 'green', 'yellow']for(let color of colors){ console.log(color) // 依次输出:red blue green yellow}

每个集合(数组、Map和Set)类型都有一个默认的迭代器,在 for-of 循环中,如果没有显示指定则使用默认迭代器

关于迭代器是什么,生成器是什么,这里的数组、for-of和迭代器三者之间的关系又是什么,

所有这些疑问都能在下面的补充章节中找到解答

补充

什么是迭代器

下面我们用 es5 创建一个迭代器:

function createIterator(items){ let i = 0; let len = items.length; return {  next: function(){   const result = {    value: items[i],    done: i++ >= len   }   return result;  } }}let iterator = createIterator(['a', 'b', 'c'])console.log(iterator.next()) // { value: 'a', done: false }console.log(iterator.next()) // { value: 'b', done: false }console.log(iterator.next()) // { value: 'c', done: true }console.log(iterator.next()) // { value: undefined, done: true }

迭代器是一个特殊的对象,它有专门为迭代过程而设计的专有接口,所有的迭代器都有 next() 方法,每次调用 next() 都返回一个结果对象。结果对象有两个属性:一个是value,表示下一个将要返回的值;另一个是done,是一个布尔值类型的值,当没有更多返回数据时返回true

上面这个示例很复杂,es6 中迭代器的编写规则也很复杂,所以 es6 引入生成器,让创建迭代器的过程变得简单

什么是生成器

生成器是一种返回迭代器的函数。通过 function 关键字后面的星号(*)来表示,函数中会用到新的关键字 yield

下面我们用生成器重写上面的 createIterator() 方法:

// 星号* 可以紧挨着 function 关键字,也可以在中间加空格function *createIterator(items){ for(let i = 0, len = items.length; i < len; i++){  yield items[i] }}let iterator = createIterator(['a', 'b', 'c'])console.log(iterator.next()) // { value: 'a', done: false }console.log(iterator.next()) // { value: 'b', done: false }console.log(iterator.next()) // { value: 'c', done: false }console.l.........

展开阅读全文

举报

打赏

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

力扣数据库题目176第二高的薪水
八大排序算法-初学笔记
JavaSE 基础大纲
Virtual DOM 简直就是挥霍


喜欢 (0)