JS:解析forEach()、map()源碼及淺談二者之間的區別

forEach()源碼解析

var arr = [1, 2, 3, 4, 5]
Array.prototype.myForEach = function(fn){
    var len = this.length;
    for(var i = 0; i < len; i ++){
        //將元素傳給回調函數
        fn(this[i],i);
    }
}
arr.myForEach(function (ele, index){
    console.log(ele, index);
})
複製代碼

map()源碼解析

var arr = [1, 2, 3, 4, 5]
Array.prototype.myMap = function(fn){
    var len = this.length;
    //建立新數組
    var arr = [];
    for(var i = 0; i < len; i ++){
        arr.push(fn(this[i],i))
    }
    return arr;
}
var aa = arr.myMap(function(ele, index){
    return ele * 2;
})
console.log(aa);
複製代碼

相同點

1）都是循環遍歷數組中的每一項；

2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；

3）this都是指向調用方法的數組；

4) 只能遍歷數組；

不相同點

1）map()建立了新數組，不改變原數組；forEach()能夠改變原數組。

2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。

3map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每一個元素，將元素傳給回調函數。

1) 用forEach()爲數組中的每一個元素添加屬性

var arr = [
    {name : 'kiwi', age : 12},
    {name : 'sasa', age : 22},
    {name : 'alice', age : 32},
    {name : 'joe', age : 42}
]
arr.forEach(function(ele, index){
    if(index > 2){
        ele.sex = 'boy';
    }else{
        ele.sex = 'girl';
    }
    return arr1
})
console.log(arr)//元素組發生改變
//[{name: "kiwi", age: 12, sex: "girl"},{name: "sasa", age: 22, sex: "girl"},{name: "alice", age: 32, sex: "girl"},{name: "joe", age: 42, sex: "boy"}]
複製代碼

2) 遇到空缺比較

['a', , 'b'].forEach(function(ele,index){
    console.log(ele + '. ' + index);
})
//0.a
//2.b
['a', , 'b'].map(function(ele,index){
    console.log(ele + '. ' + index);
})
//['0.a', , '2.b']
複製代碼