Array.forEach原理，仿造一个类似功能

Posted 2020-11-29 WindEyes

Array.forEach原理，仿造一个类似功能

array.forEach

 // 设一个arr数组
        let arr = [12,45,78,165,68,124];
        let sum = 0;
        // 遍历该数组求和
        arr.forEach(function(item,index){
            sum += item;
        })
        console.log(sum);

如上

我们使用forEach可遍历一个数组，并取出其index,item,还有 数组本身

然后根据返回的值可以实现你想要的功能，比如求和

原理

该函数的原理是利用了Array的原型对象进行操作的，下面是依据此原理模仿forEach的例子，以此来说明一下该方法的原理

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

也就是当我们调用一次myForEach函数时，其中的fn将会被调用this.length-1次（其中的this指的自然是调用该方法的对象）

执行如下代码，可以发现输出结果确实与forEach一致

let arr = [12, 45, 78, 165, 68, 124]; 
Array.prototype.myForEach = function (fn) {
        for (let i = 0; i < this.length; i++) {
            fn(this[i], i, this);
        }
    };
    arr.myForEach(function (item, index, arr) {
        console.log("item:" + item + ",index:" + index + ",this:" + arr);
    })

当我们在调试台打断点在arr.muForEach(function(item,index,arr))..这一行时，再一步一步调试可以发现

执行myForEach后会调用该方法的for循环，而每一次for循环则会调用其中的fn,

此时则会执行我们在最后一个方法中写的：console.log("item:" + item + ",index:" + index + ",this:" + arr);

提问：若在for循环之后再加一个fn()，会发生什么？