[js高手之路] es6系列教程 - 迭代器與生成器詳解

什么是迭代器？

迭代器是一種特殊對象，這種對象具有以下特點：

1，所有對象都有一個next方法

2，每次調用next方法，都會返回一個對象，該對象包含兩個屬性，一個是value, 表示下一個將要返回的值。另一個是done，他是一個布爾值，用來表示該迭代器是否還有數據可以返回.

3，迭代器還會保存一個內部指針指向當前集合中的值

設計模式中有個迭代模式，跟迭代器是差不多的，我之前有寫過2篇文章關於迭代模式：

[js高手之路] 設計模式系列課程 - 迭代器(1)

[js高手之路] 設計模式系列課程 - DOM迭代器(2)

 

用es5的方式，封裝一個迭代器：

function createIterator( arr ){
    var i = 0;
    return {
        next : function(){
            var done = ( i >= arr.length );
            var value = !done ? arr[i++] : undefined;
            return {
                done : done,
                value : value
            }
        }
    };
}

var iterator = createIterator( [ 10, 20, 30 ] );
console.log( iterator.next() ); // { done : false, value : 10 }
console.log( iterator.next() ); // { done : false, value : 20 }
console.log( iterator.next() ); // { done : false, value : 30 }
console.log( iterator.next() ); // { done : true, value : undefined }

然后你再看看是否符合我們上面說的迭代器對象的特點.

有了迭代器的基礎之后，我們就來看看，什么是生成器？

生成器是一種返回迭代器的函數，通過function關鍵字后的星號( * )來表示，函數中會用到新的關鍵字yield.  星號可以緊跟function后面 也可以在function后面加個空格.

function *createIterator(){
    yield 10;
    yield 20;
    yield 30;
}

var iterator = createIterator();
console.log( iterator.next() ); // { done : false, value : 10 }
console.log( iterator.next() ); // { done : false, value : 20 }
console.log( iterator.next() ); // { done : false, value : 30 }
console.log( iterator.next() ); // { done : true, value : undefined }

通過上面這段程序，你應該看出來了，結果跟我們之前用es5實現的迭代器是差不多的。但是你在這個生成器函數中壓根就沒有看見next方法，done和value屬性。因為生成器函數內部實現了迭代器。重點要關注下這個yield關鍵字，它有什么特點？

1，每當執行完一條yield語句，函數就會自動停止執行， 執行完yield 10之后，函數就會自動停止。

2，下一次調用next方法，就會執行yield 20，函數又會自動停止，

3，下一次調用next方法，就會執行yield 30，函數自動停止

4，下一次在調用，沒有可以迭代的元素，value返回undefined

用yield關鍵字返回數組的當前值

function *createIterator( arr ){
    for( var i = 0, len = arr.length; i < len; i++ ) {
        yield arr[i];
    }
}
var iterator = createIterator( [ 10, 20, 30 ] );
console.log( iterator.next() ); // { done : false, value : 10 }
console.log( iterator.next() ); // { done : false, value : 20 }
console.log( iterator.next() ); // { done : false, value : 30 }
console.log( iterator.next() ); // { done : true, value : undefined }

使用yield關鍵字，需要注意的地方：

yield關鍵字只能在生成器內部使用，在生成器內部的函數使用也會報錯.

function show(){
    yield 10;
}
show();

這種使用方式會報錯，下面這種使用，也會報錯

function *createIterator( arr ){
    for( var i = 0, len = arr.length; i < len; i++ ) {
        return function(){
            yield arr[i];
        }
    }
}

生成器支持函數表達式的寫法，但是不支持箭頭函數

var createIterator = function *( arr ){
    for( var i = 0, len = arr.length; i < len; i++ ) {
        yield arr[i];
    }
}
var iterator = createIterator( [ 10, 20, 30 ] );
console.log( iterator.next() ); // { done : false, value : 10 }
console.log( iterator.next() ); // { done : false, value : 20 }
console.log( iterator.next() ); // { done : false, value : 30 }
console.log( iterator.next() ); // { done : true, value : undefined }

var createIterator = *( arr )=>{
    for( var i = 0, len = arr.length; i < len; i++ ) {
        yield arr[i];
    }
}

var *createIterator = ( arr )=>{
    for( var i = 0, len = arr.length; i < len; i++ ) {
        yield arr[i];
    }
}

上面這2種箭頭寫法是不支持的.

生成器可以添加在對象中

var obj = {
    createIterator : function *( arr ){
        for( var i = 0, len = arr.length; i < len; i++ ) {
            yield arr[i];
        }
    }
};
var iterator = obj.createIterator( [ 10, 20, 30 ] );
console.log( iterator.next() ); // { done : false, value : 10 }
console.log( iterator.next() ); // { done : false, value : 20 }
console.log( iterator.next() ); // { done : false, value : 30 }
console.log( iterator.next() ); // { done : true, value : undefined }

也可以用對象的簡寫方式:

var obj = {
    *createIterator( arr ){
        for( var i = 0, len = arr.length; i < len; i++ ) {
            yield arr[i];
        }
    }
};
var iterator = obj.createIterator( [ 10, 20, 30 ] );
console.log( iterator.next() ); // { done : false, value : 10 }
console.log( iterator.next() ); // { done : false, value : 20 }
console.log( iterator.next() ); // { done : false, value : 30 }
console.log( iterator.next() ); // { done : true, value : undefined }