JavaScript前端迭代器Iterator與生成器Generator介紹

這篇文章為大家帶來了關於JavaScript的相關知識，其中主要為大家介紹了JavaScript前端迭代器Iterator與生成器Generator講解，有需要的朋友可以藉鑑參考下，希望能夠有所幫助。

前端（vue）入門到精通課程：進入學習

Iterator 概念

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 消費

預設Iterator 介面

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

Iterator 的return()

我們為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');
}

原生具備Iterator 介面的資料結構

• 陣列

• 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 原生提供了。

呼叫Iterator 介面的場合

• 解構賦值

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

模擬實現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

認識Generator

• 概念上

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} 的對象。

next 方法的參數

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 表達式的作用：定義內部狀態和暫停執行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 與Iterator 之間的關係

由於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)
}

Generator.prototype.return()

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 }

yield* 表達式

如果想在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 函數的this

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

Generator 實作一個狀態機

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