JavaScript前端迭代器Iterator與生成器Generator講解

Posted on by

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 {&lt;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

以上就是JavaScript前端迭代器Iterator與生成器Generator講解的詳細內容，更多關於JavaScrip前端迭代器生成器的資料請關註WalkonNet其它相關文章！

推薦閱讀：