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

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

內(nèi)部迭代器是自動(dòng)的，將回調(diào)函數(shù)傳入迭代器進(jìn)行執(zhí)行，訪問(wèn)到每一個(gè)元素都會(huì)執(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ù)可以傳入三個(gè)參數(shù)，第一個(gè)參數(shù)表示當(dāng)前的值，第二個(gè)參數(shù)表示當(dāng)前索引，第三個(gè)參數(shù)表示正在操作的數(shù)組。返回值為新數(shù)組。

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

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

二、外部迭代器

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

// 定義迭代器生成函數(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']);
// 通過(guò)迭代器暴露出來(lái)的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í)行都會(huì)執(zhí)行下一個(gè)迭代。done是否迭代結(jié)束，value是當(dāng)前迭代獲取到的值。如果done為true，對(duì)應(yīng)的value就是undefined。

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

總結(jié)：

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

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

最新評(píng)論