JavaScript前端迭代器Iterator與生成器Generator講解
Iterator 概念
Iterator 提供了一種統(tǒng)一的接口機(jī)制，為各種不同數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。
定義 Iterator 就是提供一個(gè)具有 next() 方法的對(duì)象，每次調(diào)用 next() 都會(huì)返回一個(gè)結(jié)果對(duì)象，該結(jié)果對(duì)象有兩個(gè)屬性，value 表示當(dāng)前的值，done 表示遍歷是否結(jié)束。
function makeIterator(Array){
let index = 0;
return {
next: function(){
return (
Array.length > index ?
{value: Array[index++]}:
{done: true}
)
}
}
}
let iterator = makeIterator(['1','2'])
console.log(iterator.next()); // {value: '1'}
console.log(iterator.next()); // {value: '2'}
console.log(iterator.next()); // {done: true}
Iterator 的作用：
- 為各種數(shù)據(jù)結(jié)構(gòu)，提供一個(gè)統(tǒng)一的、簡便的訪問接口；
- 使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列；
- 供 for...of 消費(fèi)
默認(rèn) Iterator 接口
ES6 提供了 for of 語句遍歷迭代器對(duì)象，我們將上述創(chuàng)建的迭代器使用 for of 語句遍歷一下：
let iterator = makeIterator(['1','2'])
for (let value of iterator) {
console.log(value);
} // iterator is not iterable
結(jié)果報(bào)錯(cuò)說 iterator is not iterable，這是為什么呢？ ES6 規(guī)定默認(rèn)的 Iterator 接口部署在數(shù)據(jù)結(jié)構(gòu)的 Symbol.iterator 屬性中，如果一個(gè)數(shù)據(jù)結(jié)構(gòu)存在 Symbol.iterator 屬性，則該數(shù)據(jù)結(jié)構(gòu)可遍歷。
我們將自定義的 makeIterator 改造如下：
const MakeIterator = (Array) => ({
[Symbol.iterator](){
let index = 0;
return {
next(){
let length = Array.length;
if(index < length){
return {value: Array[index++]}
}else{
return {done: true}
}
}
}
}
})
for(let value of MakeIterator([1,2])){
console.log(value)
}
// 1
// 2
Iterator 的 return()
我們?yōu)?MakeIterator 添加 return 方法，如果 for...of 循環(huán)提前退出（通常是因?yàn)槌鲥e(cuò)，或者有 break 語句），就會(huì)調(diào)用 return() 方法，終止遍歷。
基于這一特性，如果一個(gè)對(duì)象在完成遍歷前，需要清理或釋放資源，我們可以部署 return() 方法，列入文件讀取失敗時(shí)關(guān)閉文件。
const MakeIterator = (Array) => ({
[Symbol.iterator](){
let index = 0;
return {
next(){
let length = Array.length;
if(index < length){
return {value: Array[index++]}
}else{
return {done: true}
}
},
return(){
return {done: true}
}
}
}
})
for(let value of MakeIterator([1, 2, 3])){
console.log(value) // 1
// 方式1
break;
// 方式2
// throw new Error('error');
}
原生具備 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)
- 數(shù)組
- Set
- Map
- 類數(shù)組對(duì)象，如 arguments 對(duì)象、DOM NodeList 對(duì)象、typedArray 對(duì)象
// arguments 對(duì)象
function sum(){
for(let value of arguments){
console.log(value)
}
}
sum(1,2)
// 1
// 2
// typedArray 對(duì)象
let typeArry = new Int8Array(2);
typeArry[0] = 1;
typeArry[1] = 2;
for(let value of typeArry){
console.log(value)
}
// 1
// 2
- Generator 對(duì)象
function* gen(){
yield 1;
yield 2;
}
for(let value of gen()){
console.log(value)
}
- String
Q: 為什么 Object 不具有原生 Iterator ？
A: 對(duì)象（Object）之所以沒有默認(rèn)部署 Iterator 接口，是因?yàn)閷?duì)象的哪個(gè)屬性先遍歷，哪個(gè)屬性后遍歷是不確定的。
本質(zhì)上，遍歷器是一種線性處理，對(duì)于任何非線性的數(shù)據(jù)結(jié)構(gòu)，部署遍歷器接口，就等于部署一種線性轉(zhuǎn)換。
不過，嚴(yán)格地說，對(duì)象部署遍歷器接口并不是很必要，因?yàn)檫@時(shí)對(duì)象實(shí)際上被當(dāng)作 Map 結(jié)構(gòu)使用，ES5 沒有 Map 結(jié)構(gòu)，而 ES6 原生提供了。
調(diào)用 Iterator 接口的場合
- 解構(gòu)賦值
let set = new Set().add('a').add('b').add('c');
let [x,y] = set; // x='a'; y='b'
- 擴(kuò)展運(yùn)算符
var str = 'hello'; [...str] // ['h','e','l','l','o']
擴(kuò)展運(yùn)算符是調(diào)用 Iterator 接口，那么 Object 沒有部署 Iterator 接口，為什么也能使用 ... 運(yùn)算符呢？
原因：擴(kuò)展運(yùn)算符分為兩種
- 一種是用在函數(shù)參數(shù)、數(shù)組展開的場合，這種情況要求對(duì)象是可迭代的（iterable）
- 另一種是用于對(duì)象展開，也就是 {…obj} 形式，這種情況需要對(duì)象是可枚舉的（enumerable）
let obj1 = {
name: 'qianxun'
}
let obj2 = {
age: 3
}
// 數(shù)組對(duì)象是可枚舉的
let obj = {...obj1, ...obj2}
console.log(obj) //{name: 'qianxun', age: 3}
// 普通對(duì)象默認(rèn)是不可迭代的
let obj = [...obj1, ...obj2]
console.log(obj) // object is not iterable
模擬實(shí)現(xiàn) for of
function forOf(obj, cb){
let iteratorValue = obj[Symbol.iterator]();
let result = iteratorValue.next()
while(!result.done){
cb(result.value)
result = iteratorValue.next()
}
}
forOf([1,2,3], (value)=>{
console.log(value)
})
// 1
// 2
// 3
Generator
認(rèn)識(shí) Generator
- 概念上
Generator 函數(shù)是 ES6 提供的一種異步編程解決方案。Generator 函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)；
Generator 函數(shù)還是一個(gè)遍歷器對(duì)象生成函數(shù)，執(zhí)行后返回一個(gè)遍歷器對(duì)象。
- 形式上
1.function 關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)；
2.函數(shù)體內(nèi)部使用 yield 表達(dá)式，定義不同的內(nèi)部狀態(tài)。
function* simpleGenerator(){
yield 1;
yield 2;
}
simpleGenerator()
如上我們創(chuàng)建了一個(gè)簡單的 Generator，我們帶著兩個(gè)問題進(jìn)行探究：
- Generator 函數(shù)運(yùn)行后會(huì)發(fā)生什么？
- 函數(shù)中的 yield 表達(dá)式有什么作用？
function* simpleGenerator(){
console.log('hello world');
yield 1;
yield 2;
}
let generator = simpleGenerator(); // simpleGenerator {<suspended}}
console.log(generator.next())
// hello world
// {value: 1, done: false}
console.log(generator.next())
// {value: 2, done: false}
Generator 生成器函數(shù)運(yùn)行后返回一個(gè)生成器對(duì)象，而普通函數(shù)會(huì)直接執(zhí)行函數(shù)內(nèi)部的代碼；每次調(diào)用生成器對(duì)象的 next 方法會(huì)執(zhí)行函數(shù)到下一次 yield 關(guān)鍵字停止執(zhí)行，并且返回一個(gè) {value: Value, done: Boolean} 的對(duì)象。
next 方法的參數(shù)
yield 表達(dá)式本身沒有返回值，或者說總是返回 undefined。next 方法可以帶一個(gè)參數(shù)，該參數(shù)就會(huì)被當(dāng)作上一個(gè) yield 表達(dá)式的返回值。通過 next 方法的參數(shù)，可以在 Generator 函數(shù)運(yùn)行的不同階段，從外部向內(nèi)部注入不同的值，從而調(diào)整函數(shù)行為。 由于 next 方法的參數(shù)表示上一個(gè) yield 表達(dá)式的返回值，所以在第一次使用 next 方法時(shí)，傳遞參數(shù)是無效的。
function sum(x){
return function(y){
return x + y;
}
}
console.log(sum(1)(2))
// 利用next傳參改寫
function* sum(x){
let y = yield x;
while(true){
y = yield x + y;
}
}
let gen = sum(2)
console.log(gen.next()) // 2
console.log(gen.next(1)) // 3
console.log(gen.next(2)) // 4
yield 表達(dá)式
yield 表達(dá)式的作用：定義內(nèi)部狀態(tài)和暫停執(zhí)行 yield 表達(dá)式 與 return 語句的區(qū)別
- yield 表達(dá)式表示函數(shù)暫停執(zhí)行，下一次再從該位置繼續(xù)向后執(zhí)行，而 return 語句不具備位置記憶的功能
- 一個(gè)函數(shù)里，只能執(zhí)行一個(gè) return 語句，但是可以執(zhí)行多個(gè) yield 表達(dá)式
- 任何函數(shù)都可以使用 return 語句，yield 表達(dá)式只能用在 Generator 函數(shù)里面，用在其他地方都會(huì)報(bào)錯(cuò)
- yield 表達(dá)式如果參與運(yùn)算放在圓括號(hào)里面；用作函數(shù)參數(shù)或放在賦值表達(dá)式的右邊，可以不加括號(hào)
function *gen () {
console.log('hello' + yield) ×
console.log('hello' + (yield)) √
console.log('hello' + yield 1) ×
console.log('hello' + (yield 1)) √
foo(yield 1) √
const param = yield 2 √
}
基于 Generator 生成器函數(shù)中可以支持多個(gè) yield，我們可以實(shí)現(xiàn)一個(gè)函數(shù)有多個(gè)返回值的場景：
function* gen(num1, num2){
yield num1 + num2;
yield num1 - num2;
}
let res = gen(2, 1);
console.log(res.next()) // {value: 3, done: false}
console.log(res.next()) // {value: 1, done: false}
Generator 與 Iterator 之間的關(guān)系
由于 Generator 函數(shù)就是遍歷器生成函數(shù)，因此可以把 Generator 賦值給對(duì)象的 Symbol.iterator 屬性，從而使得該對(duì)象具有 Iterator 接口。Generator 實(shí)現(xiàn)方式代碼更加簡潔。
let obj = {
name: 'qianxun',
age: 3,
[Symbol.iterator]: function(){
let that = this;
let keys = Object.keys(that)
let index = 0;
return {
next: function(){
return index < keys.length ?
{value: that[keys[index++]], done: false}:
{value: undefined, done: true}
}
}
}
}
for(let value of obj){
console.log(value)
}
Generator:
let obj = {
name: 'qianxun',
age: 3,
[Symbol.iterator]: function* (){
let keys = Object.keys(this)
for(let i=0; i< keys.length; i++){
yield this[keys[i]];
}
}
}
for(let value of obj){
console.log(value)
}
Generator.prototype.return()
return()方法，可以返回給定的值，并且終結(jié)遍歷 Generator 函數(shù)。
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
g.next() // { value: 1, done: false }
// 如果 return() 方法調(diào)用時(shí)，不提供參數(shù)，則返回值的 value 屬性為 undefined
g.return('foo') // { value: "foo", done: true }
g.next() // { value: undefined, done: true }
如果 Generator 函數(shù)內(nèi)部有 try...finally 代碼塊，且正在執(zhí)行 try 代碼塊，那么 return() 方法會(huì)導(dǎo)致立刻進(jìn)入 finally 代碼塊，執(zhí)行完以后，整個(gè)函數(shù)才會(huì)結(jié)束。
function* numbers () {
yield 1;
try {
yield 2;
yield 3;
} finally {
yield 4;
yield 5;
}
yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }
yield* 表達(dá)式
如果想在 Generator 函數(shù)內(nèi)部，調(diào)用另一個(gè) Generator 函數(shù)。我們需要在前者的函數(shù)體內(nèi)部，自己手動(dòng)完成遍歷，如果函數(shù)調(diào)用多層嵌套會(huì)導(dǎo)致寫法繁瑣不易閱讀，ES6 提供了 yield* 表達(dá)式作為解決方法。
委托給其他生成器
function* g1() {
yield 2;
yield 3;
}
function* g2() {
yield 1;
yield* g1();
yield 4;
}
const iterator = g2();
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: undefined, done: true }
委托給其他可迭代對(duì)象
function* gen(){
yield* [1,2,3]
}
console.log(gen().next()) // {value: 1, done: false}
Generator 函數(shù)的 this
Generator 函數(shù)返回一個(gè)遍歷器，ES6 規(guī)定這個(gè)遍歷器是 Generator 函數(shù)的實(shí)例，繼承了 Generator.prototype 對(duì)象上的方法，但無法獲取 this 上的屬性，因?yàn)檫@時(shí) this 是全局對(duì)象，而不是實(shí)例對(duì)象。
function* gen(){
this.a = 1
}
gen.prototype.say = function(){
console.log('hi')
}
let obj = gen()
console.log(obj instanceof gen) // true
obj.say() // hi
obj.next()
console.log(obj.a) //undefined
如果想像構(gòu)造函數(shù)一樣訪問實(shí)例屬性，可以修改 this 綁定到 Generator.prototype 上。
function* gen(){
this.a = 1
}
gen.prototype.say = function(){
console.log('hi')
}
let obj = gen.call(gen.prototype)
console.log(obj instanceof gen) // true
obj.say() // hi
obj.next()
console.log(obj.a) //1
Generator 實(shí)現(xiàn)一個(gè)狀態(tài)機(jī)
function* StateMachine(state){
let transition;
while(true){
if(transition === "INCREMENT"){
state++;
}else if(transition === "DECREMENT"){
state--;
}
transition = yield state;
}
}
const iterator = StateMachine(0);
console.log(iterator.next()); // 0
console.log(iterator.next('INCREMENT')); // 1
console.log(iterator.next('DECREMENT')); // 0以上就是JavaScript前端迭代器Iterator與生成器Generator講解的詳細(xì)內(nèi)容，更多關(guān)于JavaScrip前端迭代器生成器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序 側(cè)滑刪除（左滑刪除）的相關(guān)資料,需要的朋友可以參考下2017-05-05
微信小程序 WXDropDownMenu組件詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 WXDropDownMenu組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
Vue.js React與Angular流行前端框架優(yōu)勢對(duì)比
這篇文章主要為大家介紹了Vue.js React與Angular流行前端框架優(yōu)勢對(duì)比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解
這篇文章主要為大家介紹了JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 開發(fā)指南詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了獨(dú)立使用?umi?的核心插件模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了10分鐘內(nèi)講解Npm腳本使用教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
JS構(gòu)造函數(shù)和實(shí)例化的關(guān)系及原型引入
這篇文章主要介紹了JS構(gòu)造函數(shù)和實(shí)例化的關(guān)系及原型引入，下文圍繞JS構(gòu)造函數(shù)和實(shí)例化的關(guān)系及原型引入的西安海關(guān)資料展開全文內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
這篇文章主要介紹了微信小程序中的swiper組件詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
前端從開發(fā)到部署前都離不開 Webpack 的參與，本文結(jié)合了我們自己在開發(fā)中碰到的種種問題解決方案，同時(shí)借鑒了很多開源項(xiàng)目的配置來介紹一種用 3 個(gè) JS 文件來配置 Webpack 的方法。2017-09-09