JavaScript迭代器與生成器使用詳解
迭代器 (Iterator)
迭代器(Iterator)也叫遍歷器，是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作；JS中原有表示“集合”的數(shù)據(jù)結(jié)構(gòu)，主要是數(shù)組（Array）和對(duì)象（Object），ES6又新增了 Map 和 Set，這樣就有了四種數(shù)據(jù)集合。
如果用戶組合使用四種不同的數(shù)據(jù)結(jié)構(gòu)，比如數(shù)組的成員是對(duì)象或者對(duì)象的成員是Map，這樣就需要一種統(tǒng)一的接口機(jī)制，來處理所有不同的數(shù)據(jù)結(jié)構(gòu)，這里就需要借助 Iterator ，其作用為：為各種數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一簡便的訪問接口、使數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列、給ES6新增的遍歷方法 for...of 提供消費(fèi)。
Iterator工作原理
??需要自定義遍歷數(shù)據(jù)的時(shí)候，要想到迭代器，以下是使用原理：
創(chuàng)建一個(gè)指針對(duì)象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
第一次調(diào)用對(duì)象的 next 方法，指針自動(dòng)指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
接下來不斷調(diào)用 next 方法，指針一直往后移動(dòng)，直到指向最好一個(gè)成員
??每調(diào)用 next 方法返回一個(gè)包含 value 和 done 屬性的對(duì)象
<script>
// 聲明一個(gè)數(shù)組
const animals = ['大象','獅子','老虎','獵豹','猴子']
// 創(chuàng)建一個(gè)指針對(duì)象
let iterator = animals[Symbol.iterator]()
// 調(diào)用對(duì)象的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>
next()方法：返回一個(gè)對(duì)象，表示當(dāng)前數(shù)據(jù)成員的信息。這個(gè)對(duì)象具有 value 和 done 兩個(gè)屬性，value屬性返回當(dāng)前位置的成員，done屬性是一個(gè)布爾值，表示遍歷是否結(jié)束，即是否還有必要再一次調(diào)用next()方法。
自定義遍歷數(shù)據(jù)
當(dāng)我們使用 for...of 循環(huán)遍歷某種數(shù)據(jù)結(jié)構(gòu)時(shí)，該循環(huán)會(huì)自動(dòng)去尋找 Iterator 接口，其接口默認(rèn)部署在 Symbol.iterator 屬性上，Symbol.iterator屬性本身就是一個(gè)函數(shù)，就是當(dāng)前數(shù)據(jù)結(jié)構(gòu)默認(rèn)遍歷器生成函數(shù)，執(zhí)行這個(gè)函數(shù)就會(huì)返回一個(gè)遍歷器。
<script>
// 聲明一個(gè)對(duì)象
const classroom = {
name:'終極一班',
team: [
'汪大東',
'金寶三',
'花靈龍',
'中萬鈞',
'雷婷'
],
[Symbol.iterator](){
// 索引變量
let index = 0
// 引入函數(shù)外的this
let _this = this
return {
next:function(){
if(index<_this.team.length){
const result = {value:_this.team[index],done:false}
// 下標(biāo)自增
index++
// 返回結(jié)果
return result
}else{
return {value:undefined,done:true}
}
}
// 對(duì)于遍歷器對(duì)象來說，done: false和value: undefined屬性都是可以省略的，因此上面的makeIterator函數(shù)可以簡寫成下面的形式
// next:function(){
// return index<_this.team.length ? {value:_this.team[index++]}:{done:true}
// }
}
}
}
// 遍歷這個(gè)對(duì)象
for(let con of classroom){
console.log(con);
}
</script>
生成器 (Generator)
生成器函數(shù)是ES6提供的一種異步操作編程方案，語法行為與傳統(tǒng)函數(shù)完全不同。以前我們進(jìn)行異步編程的方法就是純回調(diào)函數(shù)，Generator函數(shù)與普通函數(shù)的區(qū)別在于：function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)，函數(shù)體內(nèi)部使用yield表達(dá)式，具體案例如下：
<script>
// 生成器其實(shí)就是一個(gè)特殊的函數(shù)，在function與函數(shù)名中間補(bǔ)上一個(gè)星號(hào)
// yield就是一個(gè)函數(shù)分隔符，使生成器函數(shù)執(zhí)行暫停，,yield關(guān)鍵字后面的表達(dá)式的值返回給生成器的調(diào)用者
function * person() {
console.log('hello world');
yield '第一分隔線'
console.log('hello world 1');
yield '第二分隔線'
console.log('hello world 2');
yield '第三分隔線'
}
let iterator = person()
// console.log(iterator); 打印的就是一個(gè)迭代器對(duì)象，里面有一個(gè) next() 方法，我們借助next方法讓它運(yùn)行
iterator.next()
iterator.next()
iterator.next()
</script>
既然上文代碼是一個(gè)迭代器對(duì)象，我們可以用 for...of 進(jìn)行一個(gè)遍歷。
<script>
function * person() {
yield '第一分隔線'
yield '第二分隔線'
yield '第三分隔線'
}
for(let v of person()){
console.log(v);//打印是yield后面字符串的內(nèi)容
}
console.log('-----------------');
// 方法補(bǔ)充：yield* 后面跟的是一個(gè)可遍歷的結(jié)構(gòu)，它會(huì)調(diào)用該結(jié)構(gòu)的遍歷器接口。
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = 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>生成器參數(shù)傳遞
生成器是可以進(jìn)行參數(shù)傳遞的，傳遞的參數(shù)還是需要借助next方法才可以，next方法也是可以傳遞參數(shù)的，傳遞的參數(shù)是作為上一個(gè) yield 的返回結(jié)果，說白了就是將原來的值給覆蓋了。
<script>
function * person(arg) {
console.log(arg);
let one = yield 111
console.log(one);
let two = yield 222
console.log(two);
let three = yield 333
console.log(three);
}
// 執(zhí)行獲取迭代器對(duì)象
let iterator = person('AAA')
console.log(iterator.next());
// next方法傳入實(shí)參
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));
</script>
Genterator 函數(shù)從暫停狀態(tài)到恢復(fù)運(yùn)行，它的上下文狀態(tài)（context）是不變的。通過next方法的參數(shù)，就有辦法在 Generator 函數(shù)開始運(yùn)行之后，繼續(xù)向函數(shù)體內(nèi)部注入值。也就是說，可以在 Generator 函數(shù)運(yùn)行的不同階段，從外部向內(nèi)部注入不同的值，從而調(diào)整函數(shù)行為。
使用生成器實(shí)現(xiàn)回調(diào)地獄功能
ES6誕生之前，異步編程大致有四種：回調(diào)函數(shù)、事件監(jiān)聽、發(fā)布/訂閱、Promise對(duì)象，如下案例講解回調(diào)地獄的實(shí)現(xiàn)：
<script>
// 案例： 1s打印111，2s打印222，3s打印333
// 回調(diào)地獄
setTimeout(()=>{
console.log(111);
setTimeout(()=>{
console.log(222);
setTimeout(()=>{
console.log(333);
},3000)
},2000)
},1000)
// 生成器
function one(){
setTimeout(()=>{
console.log(111);
iterator.next()
},1000)
}
function two(){
setTimeout(()=>{
console.log(222);
iterator.next()
},2000)
}
function three(){
setTimeout(()=>{
console.log(333);
iterator.next()
},3000)
}
function * gen(){
yield one()
yield two()
yield three()
}
let iterator = gen()
iterator.next()
</script>
生成器函數(shù)實(shí)例
生成函數(shù)在異步任務(wù)這一方面的表現(xiàn)
<script>
// 案例：用戶信息 商品信息 商品價(jià)格
function getUsers (){
setTimeout(()=>{
let data = '用戶信息'
iterator.next(data)
},1000)
}
function getGoods (){
setTimeout(()=>{
let data = '商品信息'
iterator.next(data)
},1000)
}
function getPrice (){
setTimeout(()=>{
let data = '商品價(jià)格'
iterator.next(data)
},1000)
}
// 生成器
function * gen(){
let users = yield getUsers()
console.log(users);
let goods = yield getGoods()
console.log(goods);
let price = yield getPrice()
console.log(price);
}
// 調(diào)用生產(chǎn)器函數(shù)
let iterator = gen()
iterator.next()
</script>
生成器—throw()
Generator 函數(shù)返回的遍歷器對(duì)象，都有一個(gè)throw方法，可以在函數(shù)體外拋出錯(cuò)誤，然后在 Generator 函數(shù)體內(nèi)捕獲。如果生產(chǎn)器函數(shù)內(nèi)部沒有部署try...catch代碼塊，那么拋出的錯(cuò)誤會(huì)直接被外部的catch代碼塊捕獲。如果 Generator 函數(shù)內(nèi)部和外部，都沒有部署try...catch代碼塊，那么程序?qū)?bào)錯(cuò)，直接中斷執(zhí)行。
<script>
var g = function* () {
try {
yield;
} catch (e) {
console.log('內(nèi)部捕獲', e);//a
}
};
var i = g();
i.next();
try {
i.throw('a');
i.throw('b');
} catch (e) {
console.log('外部捕獲', e);//b
}
</script>生成器—return()
生成器的return方法，可以返回給定的值，并且終結(jié)遍歷 Generator 函數(shù)。
<script>
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
console.log(g.next()) // { value: 1, done: false }
// 遍歷器對(duì)象g調(diào)用return()方法后，返回值的value屬性就是return()方法的參數(shù)foo。并且，Generator 函數(shù)的遍歷就終止了
console.log(g.return('foo')) // { value: "foo", done: true }
console.log(g.next()) // { value: undefined, done: true }
// 如果return()方法調(diào)用時(shí)，不提供參數(shù)，則返回值的value屬性為undefined。
function* gen1() {
yield 1;
yield 2;
yield 3;
}
var g1 = gen1();
console.log(g1.next()) // { value: 1, done: false }
console.log(g1.return()) // { value: undefined, done: true }
</script>如果 Generator 函數(shù)內(nèi)部有try...finally代碼塊，且正在執(zhí)行try代碼塊，那么return()方法會(huì)導(dǎo)致立刻進(jìn)入finally代碼塊，執(zhí)行完以后，整個(gè)函數(shù)才會(huì)結(jié)束，調(diào)用return()方法后，就開始執(zhí)行finally代碼塊，不執(zhí)行try里面剩下的代碼了，然后等到finally代碼塊執(zhí)行完，再返回return()方法指定的返回值
<script>
function* numbers () {
yield 1;
try {
yield 2;
yield 3;
} finally {
yield 4;
yield 5;
}
yield 6;
}
var g = 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>生成器簡寫
如果一個(gè)對(duì)象的屬性是 Generator 函數(shù)，可以用如下形式進(jìn)行簡寫：
<script>
let obj = {
// myGeneratorMethod: function * (){}
// 上面代碼可以簡寫成如下形式，在屬性前加一個(gè) Generator 函數(shù)即可。
* myGeneratorMethod(){}
}
</script>到此這篇關(guān)于JavaScript迭代器與生成器使用詳解的文章就介紹到這了,更多相關(guān)JS迭代器與生成器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
自動(dòng)完成JS類，用戶體驗(yàn)較好。封裝成類，方便使用。本站2009-03-03
這篇文章主要介紹了js操作cookie保存瀏覽記錄的方法,涉及JavaScript使用cookie記錄并保存用戶瀏覽網(wǎng)頁信息的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
window.location.href = window.location.href 跳轉(zhuǎn)無反應(yīng) a超鏈接onclic
js下window.location.href = window.location.href 跳轉(zhuǎn)無反應(yīng) a 超鏈接 onclick 點(diǎn)擊跳轉(zhuǎn)無反應(yīng)問題的解決方法2013-08-08
詳解JavaScript如何優(yōu)雅地實(shí)現(xiàn)創(chuàng)建多維數(shù)組
多維數(shù)組的意思是指三維或者三維以上的數(shù)組。這篇文章將通過示例為大家詳細(xì)講解一下JavaScript如何實(shí)現(xiàn)優(yōu)雅地創(chuàng)建多維數(shù)組，需要的可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了Javascript事件驅(qū)動(dòng)編程的相關(guān)資料,通過經(jīng)典案例向大家介紹Javascript事件驅(qū)動(dòng)編程，需要的朋友可以參考下2016-01-01
js中判斷數(shù)字\字母\中文的正則表達(dá)式 (實(shí)例)
js中判斷數(shù)字\字母\中文的正則表達(dá)式，需要的朋友可以參考下2012-06-06
JavaScript操作壓縮圖片原理不難，已有成熟 API，然而在實(shí)際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會(huì)越壓縮越大，加之終端（手機(jī)）類型眾多，有些手機(jī)壓縮圖片甚至變黑。本文將一步一步解決此類問題2021-05-05
在前端開發(fā)中,為了優(yōu)化用戶的交互體驗(yàn),常需要用到彈窗來進(jìn)行提示,引導(dǎo)用戶操作,下面這篇文章主要給大家介紹了關(guān)于uniapp中常用的幾種提示彈框的相關(guān)資料,需要的朋友可以參考下2022-09-09
javascript 子窗體父窗體相互傳值方法,一般都是用window.open函數(shù)，下面腳本之家給出具體的代碼。2010-05-05
這篇文章主要介紹了JavaScript中為事件指定處理程序的五種方式,結(jié)合實(shí)例形式簡單分析了JavaScript事件處理的相關(guān)原理與事件指定處理程序的五種常用方式,需要的朋友可以參考下2018-07-07