剖析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()

image

这里是不是和上面用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)
    }      
}

好了开始测试

image

这个就完全和forEach一样啦 good

当我们在开发项目时如果对后台返回的数据数组中每个数据都要做统一处理时，这时候我们就可以重写forEach()

这样大家都可以统一直接用这个方法，开发效率就会大大提高