您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript前端迭代器Iterator與生成器Generator怎么使用”,在日常操作中,相信很多人在JavaScript前端迭代器Iterator與生成器Generator怎么使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JavaScript前端迭代器Iterator與生成器Generator怎么使用”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
Iterator 提供了一種統一的接口機制,為各種不同數據結構提供統一的訪問機制。
定義 Iterator 就是提供一個具有 next() 方法的對象,每次調用 next() 都會返回一個結果對象,該結果對象有兩個屬性,value 表示當前的值,done 表示遍歷是否結束。
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 的作用:
為各種數據結構,提供一個統一的、簡便的訪問接口;
使得數據結構的成員能夠按某種次序排列;
供 for...of 消費
ES6 提供了 for of 語句遍歷迭代器對象,我們將上述創建的迭代器使用 for of 語句遍歷一下:
let iterator = makeIterator(['1','2']) for (let value of iterator) { console.log(value); } // iterator is not iterable
結果報錯說 iterator is not iterable,這是為什么呢? ES6 規定默認的 Iterator 接口部署在數據結構的 Symbol.iterator 屬性中,如果一個數據結構存在 Symbol.iterator 屬性,則該數據結構可遍歷。
我們將自定義的 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
我們為 MakeIterator 添加 return 方法,如果 for...of 循環提前退出(通常是因為出錯,或者有 break 語句),就會調用 return() 方法,終止遍歷。
基于這一特性,如果一個對象在完成遍歷前,需要清理或釋放資源,我們可以部署 return() 方法,列入文件讀取失敗時關閉文件。
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'); }
數組
Set
Map
類數組對象,如 arguments 對象、DOM NodeList 對象、typedArray 對象
// arguments 對象 function sum(){ for(let value of arguments){ console.log(value) } } sum(1,2) // 1 // 2 // typedArray 對象 let typeArry = new Int8Array(2); typeArry[0] = 1; typeArry[1] = 2; for(let value of typeArry){ console.log(value) } // 1 // 2
Generator 對象
function* gen(){ yield 1; yield 2; } for(let value of gen()){ console.log(value) }
String
Q: 為什么 Object 不具有原生 Iterator ?
A: 對象(Object)之所以沒有默認部署 Iterator 接口,是因為對象的哪個屬性先遍歷,哪個屬性后遍歷是不確定的。
本質上,遍歷器是一種線性處理,對于任何非線性的數據結構,部署遍歷器接口,就等于部署一種線性轉換。
不過,嚴格地說,對象部署遍歷器接口并不是很必要,因為這時對象實際上被當作 Map 結構使用,ES5 沒有 Map 結構,而 ES6 原生提供了。
解構賦值
let set = new Set().add('a').add('b').add('c'); let [x,y] = set; // x='a'; y='b'
擴展運算符
var str = 'hello'; [...str] // ['h','e','l','l','o']
擴展運算符是調用 Iterator 接口,那么 Object 沒有部署 Iterator 接口,為什么也能使用 ... 運算符呢?
原因:擴展運算符分為兩種
一種是用在函數參數、數組展開的場合,這種情況要求對象是可迭代的(iterable)
另一種是用于對象展開,也就是 {…obj} 形式,這種情況需要對象是可枚舉的(enumerable)
let obj1 = { name: 'qianxun' } let obj2 = { age: 3 } // 數組對象是可枚舉的 let obj = {...obj1, ...obj2} console.log(obj) //{name: 'qianxun', age: 3} // 普通對象默認是不可迭代的 let obj = [...obj1, ...obj2] console.log(obj) // object is not iterable
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 函數是 ES6 提供的一種異步編程解決方案。Generator 函數是一個狀態機,封裝了多個內部狀態;
Generator 函數還是一個遍歷器對象生成函數,執行后返回一個遍歷器對象。
形式上
1.function 關鍵字與函數名之間有一個星號;
2.函數體內部使用 yield 表達式,定義不同的內部狀態。
function* simpleGenerator(){ yield 1; yield 2; } simpleGenerator()
如上我們創建了一個簡單的 Generator,我們帶著兩個問題進行探究:
Generator 函數運行后會發生什么?
函數中的 yield 表達式有什么作用?
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 生成器函數運行后返回一個生成器對象,而普通函數會直接執行函數內部的代碼;每次調用生成器對象的 next 方法會執行函數到下一次 yield 關鍵字停止執行,并且返回一個 {value: Value, done: Boolean} 的對象。
yield 表達式本身沒有返回值,或者說總是返回 undefined。next 方法可以帶一個參數,該參數就會被當作上一個 yield 表達式的返回值。通過 next 方法的參數,可以在 Generator 函數運行的不同階段,從外部向內部注入不同的值,從而調整函數行為。 由于 next 方法的參數表示上一個 yield 表達式的返回值,所以在第一次使用 next 方法時,傳遞參數是無效的。
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 表達式的作用:定義內部狀態和暫停執行 yield 表達式 與 return 語句的區別
yield 表達式表示函數暫停執行,下一次再從該位置繼續向后執行,而 return 語句不具備位置記憶的功能
一個函數里,只能執行一個 return 語句,但是可以執行多個 yield 表達式
任何函數都可以使用 return 語句,yield 表達式只能用在 Generator 函數里面,用在其他地方都會報錯
yield 表達式如果參與運算放在圓括號里面;用作函數參數或放在賦值表達式的右邊,可以不加括號
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 生成器函數中可以支持多個 yield,我們可以實現一個函數有多個返回值的場景:
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 函數就是遍歷器生成函數,因此可以把 Generator 賦值給對象的 Symbol.iterator 屬性,從而使得該對象具有 Iterator 接口。Generator 實現方式代碼更加簡潔。
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) }
return()
方法,可以返回給定的值,并且終結遍歷 Generator 函數。
function* gen() { yield 1; yield 2; yield 3; } var g = gen(); g.next() // { value: 1, done: false } // 如果 return() 方法調用時,不提供參數,則返回值的 value 屬性為 undefined g.return('foo') // { value: "foo", done: true } g.next() // { value: undefined, done: true }
如果 Generator 函數內部有 try...finally
代碼塊,且正在執行 try
代碼塊,那么 return()
方法會導致立刻進入 finally
代碼塊,執行完以后,整個函數才會結束。
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 }
如果想在 Generator 函數內部,調用另一個 Generator 函數。我們需要在前者的函數體內部,自己手動完成遍歷,如果函數調用多層嵌套會導致寫法繁瑣不易閱讀,ES6 提供了 yield* 表達式作為解決方法。
委托給其他生成器
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 }
委托給其他可迭代對象
function* gen(){ yield* [1,2,3] } console.log(gen().next()) // {value: 1, done: false}
Generator 函數返回一個遍歷器,ES6 規定這個遍歷器是 Generator 函數的實例,繼承了 Generator.prototype 對象上的方法,但無法獲取 this 上的屬性,因為這時 this 是全局對象,而不是實例對象。
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
如果想像構造函數一樣訪問實例屬性,可以修改 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
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怎么使用”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。