AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ES6--》了解并应用迭代器与生成器

2022-09-27 111
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ES6中迭代器与生成器讲解

迭代器

迭代器(Iterator)也叫遍历器，是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作；JS中原有表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又新增了Map和 Set，这样就有了四种数据集合。

如果用户组合使用四种不同的数据结构，比如数组的成员是对象或者对象的成员是Map，这样就需要一种统一的接口机制，来处理所有不同的数据结构，这里就需要借助 Iterator ，其作用为：为各种数据结构提供统一简便的访问接口、使数据结构的成员能够按某种次序排列、给ES6新增的遍历方法 for...of 提供消费。

Iterator工作原理

🧑‍需要自定义遍历数据的时候，要想到迭代器，以下是使用原理：

👨‍🦼创建一个指针对象，指向当前数据结构的起始位置

👨‍🦽第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

👩‍🦽接下来不断调用 next 方法，指针一直往后移动，直到指向最好一个成员

🏃每调用 next 方法返回一个包含 value 和 done 属性的对象

<script>// 声明一个数组constanimals= ['大象','狮子','老虎','猎豹','猴子']
// 创建一个指针对象letiterator=animals[Symbol.iterator]()
// 调用对象的next方法console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
</script>

图片.png

next()方法返回一个对象，表示当前数据成员的信息。这个对象具有value和done两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next()方法。

自定义遍历数据

当我们使用 for...of 循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口，其接口默认部署在 Symbol.iterator 属性上，Symbol.iterator属性本身就是一个函数，就是当前数据结构默认遍历器生成函数，执行这个函数就会返回一个遍历器。

<script>// 声明一个对象constclassroom= {
name:'终极一班',
team: [
'汪大东',
'金宝三',
'花灵龙',
'中万钧',
'雷婷'        ],
        [Symbol.iterator](){
// 索引变量letindex=0// 引入函数外的thislet_this=thisreturn {
next:function(){
if(index<_this.team.length){
constresult= {value:_this.team[index],done:false}
// 下标自增index++// 返回结果returnresult                    }else{
return {value:undefined,done:true}
                    }
                }
// 对于遍历器对象来说，done: false和value: undefined属性都是可以省略的，因此上面的makeIterator函数可以简写成下面的形式// next:function(){//     return index<_this.team.length ? {value:_this.team[index++]}:{done:true}// }            }
        }
    }
// 遍历这个对象for(letconofclassroom){
console.log(con);
    }
</script>

图片.png

生成器

生成器函数是ES6提供的一种异步操作编程方案，语法行为与传统函数完全不同。以前我们进行异步编程的方法就是纯回调函数，Generator函数与普通函数的区别在于：function关键字与函数名之间有一个星号，函数体内部使用yield表达式，具体案例如下：

<script>// 生成器其实就是一个特殊的函数，在function与函数名中间补上一个星号// yield就是一个函数分隔符，使生成器函数执行暂停，,yield关键字后面的表达式的值返回给生成器的调用者function*person() {
console.log('hello world');
yield'第一分隔线'console.log('hello world 1');
yield'第二分隔线'console.log('hello world 2');
yield'第三分隔线'    }
letiterator=person()
// console.log(iterator); 打印的就是一个迭代器对象，里面有一个 next() 方法，我们借助next方法让它运行iterator.next()
iterator.next()
iterator.next()
</script>

图片.png

既然上文代码是一个迭代器对象，我们可以用 for...of 进行一个遍历。

<script>function*person() {
yield'第一分隔线'yield'第二分隔线'yield'第三分隔线'    }
for(letvofperson()){
console.log(v);//打印是yield后面字符串的内容    }
console.log('-----------------');
// 方法补充：yield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。letgenerator=function* () {
yield1;
yield* [2,3,4];
yield5;
    };
variterator=generator();
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: 4, done: false }console.log(iterator.next()); // { value: 5, done: false }console.log(iterator.next()); // { value: undefined, done: true }</script>

生成器参数传递

生成器是可以进行参数传递的，传递的参数还是需要借助next方法才可以，next方法也是可以传递参数的，传递的参数是作为上一个 yield 的返回结果，说白了就是将原来的值给覆盖了。

<script>function*person(arg) {
console.log(arg);
letone=yield111console.log(one);
lettwo=yield222console.log(two);
letthree=yield333console.log(three);
    }
// 执行获取迭代器对象letiterator=person('AAA')
console.log(iterator.next());
// next方法传入实参console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));
</script>

图片.png

Genterator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数，就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。

使用生成器实现回调地狱功能

ES6诞生之前，异步编程大致有四种：回调函数、事件监听、发布/订阅、Promise对象，如下案例讲解回调地狱的实现：

<script>// 案例： 1s打印111，2s打印222，3s打印333// 回调地狱setTimeout(()=>{
console.log(111);
setTimeout(()=>{
console.log(222);
setTimeout(()=>{
console.log(333);
            },3000)
        },2000)
    },1000)
// 生成器functionone(){
setTimeout(()=>{
console.log(111);
iterator.next()
        },1000)
    }
functiontwo(){
setTimeout(()=>{
console.log(222);
iterator.next()
        },2000)
    }
functionthree(){
setTimeout(()=>{
console.log(333);
iterator.next()
        },3000)
    }
function*gen(){
yieldone()
yieldtwo()
yieldthree()
    }
letiterator=gen()
iterator.next()
</script>

1.gif

image.gif生成器函数实例

生成函数在异步任务这一方面的表现

<script>// 案例：用户信息 商品信息 商品价格functiongetUsers (){
setTimeout(()=>{
letdata='用户信息'iterator.next(data)
        },1000)
    }
functiongetGoods (){
setTimeout(()=>{
letdata='商品信息'iterator.next(data)
        },1000)
    }
functiongetPrice (){
setTimeout(()=>{
letdata='商品价格'iterator.next(data)
        },1000)
    }
// 生成器function*gen(){
letusers=yieldgetUsers()
console.log(users);
letgoods=yieldgetGoods()
console.log(goods);
letprice=yieldgetPrice()
console.log(price);
    }
// 调用生产器函数letiterator=gen()
iterator.next()
</script>

1.gif

生成器—throw()

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。如果生产器函数内部没有部署try...catch代码块，那么抛出的错误会直接被外部的catch代码块捕获。如果 Generator 函数内部和外部，都没有部署try...catch代码块，那么程序将报错，直接中断执行。

<script>varg=function* () {
try {
yield;
    } catch (e) {
console.log('内部捕获', e);//a    }
    };
vari=g();
i.next();
try {
i.throw('a');
i.throw('b');
    } catch (e) {
console.log('外部捕获', e);//b    }
</script>

生成器—return()

生成器的return方法，可以返回给定的值，并且终结遍历 Generator 函数。

<script>function*gen() {
yield1;
yield2;
yield3;
    }
varg=gen();
console.log(g.next())        // { value: 1, done: false }// 遍历器对象g调用return()方法后，返回值的value属性就是return()方法的参数foo。并且，Generator 函数的遍历就终止了console.log(g.return('foo')) // { value: "foo", done: true }console.log(g.next())        // { value: undefined, done: true }// 如果return()方法调用时，不提供参数，则返回值的value属性为undefined。function*gen1() {
yield1;
yield2;
yield3;
    }   
varg1=gen1();
console.log(g1.next()) // { value: 1, done: false }console.log(g1.return()) // { value: undefined, done: true }</script>

如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束，调用return()方法后，就开始执行finally代码块，不执行try里面剩下的代码了，然后等到finally代码块执行完，再返回return()方法指定的返回值

<script>function*numbers () {
yield1;
try {
yield2;
yield3;
        } finally {
yield4;
yield5;
        }
yield6;
    }
varg=numbers();
console.log(g.next()) // { value: 1, done: false }console.log(g.next()) // { value: 2, done: false }console.log(g.return(7)) // { value: 4, done: false }console.log(g.next()) // { value: 5, done: false }console.log(g.next()) // { value: 7, done: true }</script>

生成器简写

如果一个对象的属性是 Generator 函数，可以用如下形式进行简写：

<script>letobj= {
// myGeneratorMethod: function * (){}// 上面代码可以简写成如下形式，在属性前加一个 Generator 函数即可。*myGeneratorMethod(){}
    }
</script>


文章标签：
JavaScript
前端开发
亦世凡华、
目录
相关文章
浩泽学编程
|
4月前
|
JavaScript
ES6之迭代器
ES6之迭代器
浩泽学编程
37 0
游客j4mujezz7vm7y
|
1天前
生成器 迭代器
生成器 迭代器
游客j4mujezz7vm7y
7 0
远近高低各不同
|
4月前
ES6初步了解迭代器
ES6初步了解迭代器
远近高低各不同
27 0
前端每日三省
|
JavaScript 前端开发
迭代器和生成器
在JavaScript中，迭代器（`Iterator`）是一个对象，用于在可迭代的数据结构中遍历和访问每个元素，而不必暴露该数据结构的内部结构。
前端每日三省
63 0
摘星月为妆。
|
存储 Python
18.从入门到精通:Python迭代器与生成器 迭代器 创建一个迭代器 StopIteration 生成器
18.从入门到精通:Python迭代器与生成器 迭代器 创建一个迭代器 StopIteration 生成器
摘星月为妆。
70 0
foofish
|
存储 Python 容器
理解 Python 迭代对象、迭代器、生成器
理解 Python 迭代对象、迭代器、生成器
foofish
137 0
xgrang
|
Python
生成器和迭代器
生成器和迭代器
xgrang
50 0
SouthernWind
|
JavaScript 前端开发
ES6——迭代器
迭代器(iterator)：是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作。
SouthernWind
79 0
游客6w5iiviqxobva
迭代器Iterator、生成器Generator详解
迭代器Iterator、生成器Generator详解
游客6w5iiviqxobva
117 0
迭代器Iterator、生成器Generator详解
_Eureka_
|
JavaScript 前端开发
迭代器、生成器
JS查漏补缺系列是我在学习JS高级语法时做的笔记，通过实践费曼学习法进一步加深自己对其的理解，也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解JavaScript中的迭代器、生成器
_Eureka_
90 0