拆開JavaScript迭代器模式內部黑盒子
一、內部迭代器
迭代器模式，指的是提供一種方法順序訪問一個聚合對象或者數(shù)組中的各種元素，而又不暴露該對象的內部表示。
內部迭代器是自動的，將回調函數(shù)傳入迭代器進行執(zhí)行，訪問到每一個元素都會執(zhí)行傳入迭代器中的回調函數(shù)。
模擬內部迭代器如下：
// 定義數(shù)組原型上的mapFn內部迭代器
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];
// 定義回調函數(shù)
var callback = val => val * 2;
// 執(zhí)行數(shù)組的mapFn方法調用回調函數(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的內部實現(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方法，外部調用迭代器
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的內部實現(xiàn)是看不到的，這里如果將makeIterator作為黑盒子。就有如下的流程：
總結：
目前JavaScript已經(jīng)內置了多種內部迭代器，比如forEach、map、filter和reduce等，內部執(zhí)行回調函數(shù)function(value, index, currentArr){ xxxx }對每個訪問到的元素進行處理。通過generate和yield配合使用也可以產(chǎn)生外部迭代器，通過next()方法進行下一步的執(zhí)行。
以上就是拆開JavaScript迭代器模式內部黑盒子的詳細內容，更多關于JavaScript迭代器模式內部黑盒子的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)點贊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細介紹了原生js實現(xiàn)上傳圖片控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
今天，測試報過來一個js bug, 在IE8下有個js錯誤，但是在其它瀏覽器下(Firefox, Chrome, IE9)下面都很正常。后來調試發(fā)現(xiàn)原因是在IE8下，js數(shù)組沒有indexOf方法。2013-04-04
這篇文章主要介紹了微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了JavaScript ES2019中的8個新特性詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)新年倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
關于javascript中json 對象數(shù)組之間相互轉化問題
這篇文章主要介紹了關于javascript中json 對象數(shù)組之間相互轉化問題,在實際應用中，JSON對象和數(shù)組的結構可能更加復雜，需要根據(jù)具體情況進行相應的處理和轉換，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了JS實現(xiàn)獲取剪貼板內容的方法,涉及javascript基于clipboardData操作剪貼板的相關技巧,需要的朋友可以參考下2016-06-06
JavaScript中的for...of和for...in循環(huán)容易遇到的問題及解決方法總結
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語法,但它們在使用時可能會引發(fā)一些意想不到的問題,本文將分享我在使用這兩種循環(huán)時所遇到的坑和經(jīng)驗,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了Vue formData實現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08