剖析Javascript中forEach()底層原理，如何重寫forEach()

我們平時用的forEach()一般是這樣用的

var myArr = [1,5,8]

myArr.forEach((v,i)=>{
　　console.log(v,i)
})
//運行后是這樣的
1 0
5 1
8 2

其實底層還是把數組循環了一邊，並且在回調函數里傳了每個數組的值和下標

我們先用常規的方法去重寫forEach()

// 這里用const來定義函數，主要是為了防止當我們在開發時，如果別人用了這個名字重新給myForEach賦值時就會報錯，這樣就避免我們寫的方法會被別人意外覆蓋
const myForEach = function(arr, fn){
    let i
    for(i=0; i<arr.length; i++){
       fn(arr[i], i) 
    }      
}

方法已經寫好下面我們來測試一下新forEach()

這里是不是和上面用forEach()的輸出完全一致啊

但是調用方法和上面並不一樣，那我們怎么把他封裝到Array對象里去呢

這樣就要用到js里的原型鏈prototype，其實Javascript中所有的對象都是Object的實例，並繼承Object.prototype的屬性和方法

 還是直接看代碼吧↓

Array.prototype.newForEach = function(fn) {
    let i
    for(i=0; i<this.length; i++){
       fn(this[i], i)
    }      
}

好了開始測試

 

這個就完全和forEach一樣啦  good

當我們在開發項目時如果對后台返回的數據數組中每個數據都要做統一處理時，這時候我們就可以重寫forEach()

這樣大家都可以統一直接用這個方法，開發效率就會大大提高