es6 -- 生成器 · 前端知識 -- 學習整理

>[success] # 生成器 1. 生成器是ES6中新增的一種函數控制、使用的方案，它可以讓我們更加靈活的控制函數什么時候繼續執行、暫停執行等 2. 生成器對象是由一個 **generator function** 返回的，并且它符合可迭代協議和迭代器協議。因此生成器對象既是**迭代器，也是可迭代對象** >[info] ## **generator function** -- 生成器函數 1. 生成器函數需要在function的后面加一個符號：\* 2. 生成器函數可以通過yield關鍵字來控制函數的執行流程 3. 生成器函數的返回值是一個Generator（生成器）,生成器可以理解成一個特殊的**迭代器** 4. 調用一個生成器函數并不會馬上執行它里面的語句，而是返回一個這個**生成器的迭代器（iterator ）對象**。當這個迭代器的** next() 方法被首次（后續）調用時**，其內的語句會執行到第一個 **（后續）出現yield的位置為止**，**yield 后緊跟迭代器要返回的值**。**yield 關鍵詞最后返回一個迭代器對象，該對象有 value 和 done 兩個屬性** >[danger] ##### 生成一個生成器 1. 當是函數的時候需要在方法名前加'*' 來表示當前函數是生成器 2. 當是函數表達式的時候在function 和小括號中間添加一個'*' 3. 下面案例中當生成器函數執行返回了一個具備**next 方法的**，**迭代器（iterator ）對象**（當調用next 時候返回結構{done: false, value: 1}），**迭代器（iterator ）對象**中**yield 返回值即為value** ~~~ /* 生成器函數: 1.function后面會跟上符號: * 2.代碼的執行可以被yield控制 3.生成器函數默認在執行時, 返回一個生成器對象 * 要想執行函數內部的代碼, 需要生成器對象, 調用它的next操作 * 當遇到yield時, 就會中斷執行 */ function *createIterator() { // function* createIterator 星號也可以在function后面0 yield 1 yield 2 } // 返回的是一個迭代器解釋了生成器返回迭代器對象 let iteratorr = createIterator() console.log(iteratorr.next()) // {done: false, value: 1} console.log(iteratorr.next()) // {done: false, value: 2} console.log(iteratorr.next()) // {done: true, value: undefined} ~~~ * 表達式 ~~~ // 生成器 let createIterator = function *() { yield 1 } ~~~ 4. 內部調用return 會提前終止 ~~~ function* generator() { yield 1 return 15 yield 2 } let itor = generator() console.log(itor.next()) console.log(itor.next()) console.log(itor.next()) // 打印結果： { value: 1, done: false } { value: 15, done: true } // done 為true 結束了 { value: undefined, done: true } // done 為true 結束了 ~~~ >[danger] ##### 生成器函數特點 ~~~ 1.function* 函數名字(){} 創建生成器函數(generator function)，它返回一個Generator?對象,因此這類函數名的函數不能使用new，而是類似工廠模式效果通過調用函數直接生成對象 2.如圖直接雖然是函數形式調用但是返回的是對象 function* generator() { console.log('OK'); } const itor = generator() console.log(itor instanceof generator); //true console.log(({}).toString.call(itor)); //"[object Generator]" 3.因為生成器創建一個迭代器對象，對象是原型鏈指向了他構造函數的原型鏈，因此如下 generator.prototype.__proto__===GeneratorFunction.prototype + next + return + throw + Symbol.toStringTag : 'Generator' GeneratorFunction.prototype.__proto__===?.prototype + Symbol.iterator 即生成的迭代器對象具備 next return throw 方法,在迭代器章節介紹了return 作用 ~~~ * 不能new 實列 ![](https://img.kancloud.cn/32/08/3208dc0f351646a6046ee9c5552502e7_418x144.png) * 返回是對象 ![](https://img.kancloud.cn/ab/39/ab3964c9a2596e65a4a15a8df3e82784_576x247.png) * type of 判讀類型 tt() 執行后沒有返回值，t()執行后是迭代器對象 ![](https://img.kancloud.cn/fc/6e/fc6e74f249d0b9ec6c3185aba911edfb_324x206.png) >[danger] ##### yield ~~~ 1. yield 可以返回任何值或者表達式 2. 每遇到一個 'yield'的語句循環都會停止，每次需要調用迭代器的next()方法才會進入下一個'yield'語句 3.'yield'關鍵字只能在生成器內部使用 ~~~ * 可以配合循環使用 ~~~ // 生成器函數 function *createIterator(items) { for(let i=0;i<items.length;i++){ yield items[i] } } let iteratorr = createIterator([1,2]) console.log(iteratorr.next()) // {done: false, value: 1} console.log(iteratorr.next()) // {done: false, value: 2} console.log(iteratorr.next()) // {done: true, value: undefined} ~~~ * 對第三條的說明下面代碼會報錯 ~~~ function *createIterator(items) { items.forEach(function (item) { yield item }) } ~~~ >[danger] ##### 對象方法使用 1. **return**傳值后這個生成器函數就會結束，之后調用**next不會繼續生成值了** ~~~ function* generator() { console.log('A'); yield 1; console.log('B'); yield 2; console.log('C'); yield 3; console.log('D'); return 4; } let itor = generator(); /* console.log(itor.next()); //{value: 1, done: false} console.log(itor.return('RETURN')); //{value: 'RETURN', done: true} // 如果不傳參value 是對應值 console.log(itor.return()); //{value: undefined, done: true} // 如果不傳參value 是undefined console.log(itor.throw('xxx')); //直接拋出異常信息，沒有返回值，后續的代碼都不能執行了 */ // 執行NEXT方法，可以讓GENERATOR函數中的代碼執行；每一次執行NEXT，遇到YEILD則結束； // 返回結果是具備DONE/VALUE的對象，并且VALUE值是YEILD后面的值； console.log(itor.next()); //輸出’A‘ {value: 1, done: false} console.log(itor.next()); //輸出’B‘ {value: 2, done: false} console.log(itor.next()); //輸出’C‘ {value: 3, done: false} console.log(itor.next()); //輸出’D‘ {value: 4, done: true} console.log(itor.next()); //{value: undefined, done: true} ~~~ 2. 關于 throw，拋出異常后我們可以在生成器函數中捕獲異常 ~~~ function* generator() { try { console.log('A') let A = yield 1 console.log('B', A) let B = yield 2 console.log('C', B) } catch (e) { console.log(e, '異常') // 異常傳參異常 } } let itor = generator() console.log(itor.next()) //{value: 1, done: false} console.log(itor.throw('異常傳參')) //{value: undefined, done: true} console.log(itor.next()) //{value: undefined, done: true} ~~~ * catch語句中不能繼續yield新的值了，但是可以在catch語句外使用yield繼續中斷函數的執行 ~~~ function* generator() { try { console.log('A') let A = yield 1 console.log('B', A) let B = yield 2 console.log('C', B) } catch (e) { console.log(e, '異常') // 異常傳參異常 } yield 3 yield 4 } let itor = generator() console.log(itor.next()) //{value: 1, done: false} console.log(itor.throw('異常傳參')) //{ value: 3, done: false } console.log(itor.next()) //{ value: 4, done: false } console.log(itor.next()) //{value: undefined, done: true} console.log(itor.next()) //{value: undefined, done: true} ~~~ * 沒有在內部捕獲異常 ![](https://img.kancloud.cn/ed/ca/edca161b5409c3c93923f19608a78ce8_362x275.png) 3. next 傳參，我們在調用next函數的時候，可以給它傳遞參數，那么這個參數會作為上一個yield語句的返回值 ~~~ function* generator() { console.log('A'); let A = yield 1; console.log('B', A); let B = yield 2; console.log('C', B); } let itor = generator(); console.log(itor.next()); //{value: 1, done: false} // 每一次NEXT傳遞的值「第一次傳遞的值沒用」：都是作為上一次YEILD的返回結果 console.log(itor.next(100)); //{value: 2, done: false} console.log(itor.next(200)); //{value: undefined, done: true} // 打印結果： A { value: 1, done: false } B 100 { value: 2, done: false } C 200 { value: undefined, done: true } ~~~ * yield 是返回一個迭代器 ~~~ function* generator1() { yield 1; yield 2; } function* generator2() { yield 3; yield generator1(); yield 4; } let itor = generator2(); console.log(itor.next()); //{value: 3, done: false} console.log(itor.next()); //{value: generator1執行創建的迭代器對象, done: false} console.log(itor.next()); //{value: 4, done: false} console.log(itor.next()); //{value: undefined, done: true} function* generator1() { yield 1; yield 2; } function* generator2() { yield 3; // yield*：可以進入到其他生成器中進行迭代 yield* generator1(); yield 4; } let itor = generator2(); console.log(itor.next()); //{value: 3, done: false} console.log(itor.next()); //{value: 1, done: false} console.log(itor.next()); //{value: 2, done: false} console.log(itor.next()); //{value: 4, done: false} console.log(itor.next()); //{value: undefined, done: true} ~~~ >[danger] ##### 語法糖 -- yield\*來生產一個可迭代對象 1. 種yield的語法糖，只不過會依次迭代這個可迭代對象，每次迭代其中的一個值 ~~~ const nums = [100, 22, 66, 88, 55] function* createArrayIterator(arr) { yield* arr } ~~~ * 等同 ~~~ function* createArrayIterator(arr) { for (let i = 0; i < arr.length; i++) { yield arr[i] } } ~~~ >[danger] ##### 在class 使用 1. class 中沒有function 因此省略寫法 *加方法 ~~~ class Person { constructor(name, age, height, friends) { this.name = name this.age = age this.height = height this.friends = friends } // 實例方法 *[Symbol.iterator]() { yield* this.friends } } ~~~