一、內(nèi)部迭代器

迭代器模式，指的是提供一種方法順序訪問一個聚合對象或者數(shù)組中的各種元素，而又不暴露該對象的內(nèi)部表示。

內(nèi)部迭代器是自動的，將回調(diào)函數(shù)傳入迭代器進行執(zhí)行，訪問到每一個元素都會執(zhí)行傳入迭代器中的回調(diào)函數(shù)。

模擬內(nèi)部迭代器如下：

// 定義數(shù)組原型上的mapFn內(nèi)部迭代器
Array.prototype.mapFn = function (callback) {
    let arr = this;
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
        newArr[i] = callback(arr[i], i, arr)
    }
    return newArr
}
// 定義原始數(shù)組
var arr = [1, 2, 3, 4, 5];
// 定義回調(diào)函數(shù)
var callback = val => val * 2;
// 執(zhí)行數(shù)組的mapFn方法調(diào)用回調(diào)函數(shù)callback
var newArr = arr.mapFn(callback);
// 打印返回值
console.log(newArr)

callback函數(shù)可以傳入三個參數(shù)，第一個參數(shù)表示當前的值，第二個參數(shù)表示當前索引，第三個參數(shù)表示正在操作的數(shù)組。返回值為新數(shù)組。

當前例子中，callback指的是val => val * 2,通過數(shù)組的mapFn方法執(zhí)行callback函數(shù)，返回值為新的數(shù)組newArr。

在實際的使用中，Array.prototype.mapFn的內(nèi)部實現(xiàn)是看不到的，就像我們看不到數(shù)組的操作map和forEach一樣，這里如果將Array.prototype.mapFn作為黑盒子。就有如下的流程：

二、外部迭代器

外部迭代器是非自動的，提供了next方法，需要手動的去執(zhí)行next()以進行下一個元素的訪問。

// 定義迭代器生成函數(shù)
function makeIterator(array) {
    var nextIndex = 0;
    return {
        next: function () {
            return nextIndex < array.length ? {
                value: array[nextIndex++],
                done: false
            } : {
                value: undefined,
                done: true
            };
        }
    };
}
// 產(chǎn)生迭代器
var it = makeIterator(['a', 'b']);
// 通過迭代器暴露出來的next方法，外部調(diào)用迭代器
console.log(it.next()) // { "value": "a", "done": false }
console.log(it.next()) // { "value": "b", "done": false }
console.log(it.next()) // { "value": undefined, "done": true }

makeIterator返回next方法，每一次執(zhí)行都會執(zhí)行下一個迭代。done是否迭代結束，value是當前迭代獲取到的值。如果done為true，對應的value就是undefined。

在實際的使用中，makeIterator的內(nèi)部實現(xiàn)是看不到的，這里如果將makeIterator作為黑盒子。就有如下的流程：

總結：

目前JavaScript已經(jīng)內(nèi)置了多種內(nèi)部迭代器，比如forEach、map、filter和reduce等，內(nèi)部執(zhí)行回調(diào)函數(shù)function(value, index, currentArr){ xxxx }對每個訪問到的元素進行處理。通過generate和yield配合使用也可以產(chǎn)生外部迭代器，通過next()方法進行下一步的執(zhí)行。

以上就是拆開JavaScript迭代器模式內(nèi)部黑盒子的詳細內(nèi)容，更多關于JavaScript迭代器模式內(nèi)部黑盒子的資料請關注腳本之家其它相關文章！

最新評論