JS:解析forEach()、map()原始碼及淺談兩者之間的區別

柒號發表於2018-04-20
JS原始碼

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']
複製程式碼

相關文章