The difference between Javascript's map and forEach

principle:
Advanced browsers support forEach method
syntax: both forEach and map support 2 parameters: one is the callback function (item, index, list) and context;

forEach: used to traverse each item in the array; the execution of this method has no return value and has no effect on the original array;
If there are several items in the array, the anonymous callback function passed in needs to be executed several times;
Each time the anonymous function is executed, three parameter values are passed to it: the current item item in the array, the index of the current item, and the original array input;
In theory, this method has no return value, it just traverses each item in the array without modifying the original array; but we can modify the original array by ourselves through the index of the array;
This in the forEach method is ary, and this in the anonymous callback function is window by default;

var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
     input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->The original array will be changed;

map: very similar to forEach, it is used to traverse each item in the array, and is used to traverse each item in the array;
Difference: The callback function of map supports return return value; what is returned is equivalent to changing this item in the array to what (it does not affect the original array, but is equivalent to cloning a copy of the original array, and the cloned The corresponding item in the array of this copy has changed);
Both forEach and map support the second parameter value. The second parameter means to modify this in the anonymous callback function.

var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
     return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]；

Compatible spelling:
Neither forEach nor map is compatible under IE6-8 (in the case of incompatibility, there are no two methods on Array.prototype), then we need to encapsulate a compatible method by ourselves. The code is as follows:

/**
* forEach iterates over the array
* @param callback [function] callback function;
* @param context [object] context;
*/
Array.prototype.myForEach = function myForEach(callback,context){
    context = context || window;
    if('forEach' in Array.prototye) {
        this.forEach(callback,context);
        return;
    }
    // IE6-8 write the logic executed by the callback function by yourself
    for(var i = 0,len = this.length; i < len;i++) {
        callback && callback.call(context,this[i],i,this);
    }
}

/**
* map traverse the array
* @param callback [function] callback function;
* @param context [object] context;
*/
Array.prototype.myMap = function myMap(callback,context){
    context = context || window;
    if('map' in Array.prototye) {
        return this.map(callback,context);
    }
    // IE6-8 write the logic executed by the callback function by yourself
    var newAry = [];
    for(var i = 0,len = this.length; i < len;i++) {
        if(typeof  callback === 'function') {
            var val = callback.call(context,this[i],i,this);
            newAry[newAry.length] = val;
        }
    }
    return newAry;
}

The difference between Javascript's map and forEach

Guess you like