The difference between the map of JS array and the Foreach method and its compatibility usage

Advanced browsers (including IE9 and above) support the map and foreach methods to loop through the array, with the same usage, but there are some differences that must be known in order to correctly select in the project

• Principle:
• Advanced browsers support the Foreach method
  Syntax: both foreach and map support 2 parameters: One is the callback function (Item,index,list) and the context;

• ForEach: Used to iterate over each item in the array; The method executes without a return value and has no effect on the original array;
• There are several items in the array, then the anonymous callback function passed in will need to be executed several times;
• Each time an anonymous function is executed, it is passed three parameter values: The current item in the array item, the index of the current item, and the original array input;
• Theoretically, this method has no return value, simply iterates through each item in the array, does not modify the original array, but we can modify the original array by the index of the array itself;
• The This in the Foreach method is ary, and this in the anonymous callback function is the default window;

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);//--> will change the original array;

• Map: Very similar to foreach, used to iterate through each item in the array, to iterate over each item in the array;
• Difference: The return value is supported in the callback function of map, and what is returned is equivalent to what the item in the array is (it does not affect the original array, but it is equivalent to cloning a copy of the original array and changing the corresponding item in the array of the cloned copy);
• Whether a foreach or a map supports 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 wording:
• Either foreach or map is incompatible under IE6-8 (incompatible cases do not have these two methods on Array.prototype), then we need to encapsulate a compatible method, the code is as follows:

/*** foreach Traversal array * @param callback [function] callback function; * @param context [object] context; */array.prototype.myforeach = function MyF Oreach (callback,context) {    context = context | | window;    if (' ForEach ' in Array.prototye) {        This.foreach (callback,context);        return;    }    Ie6-8 write the callback function execution logic for (var i = 0,len = This.length; i < len;i++) {        callback && Callback.call (Context,thi s[i],i,this);}    }

/*** Map Traversal Array * @param callback [function] callback function; * @param context [object] context; */array.prototype.mymap = function MyMap (callb Ack,context) {    context = context | | window;    if (' Map ' in Array.prototye) {        return this.map (Callback,context);    }    Ie6-8 the logical var newary = [] to write the callback function execution;    for (var i = 0,len = This.length; i < len;i++) {        if (typeof  callback = = = ' function ') {            var val = callback.cal L (context,this[i],i,this);            Newary[newary.length] = val;        }    }    return newary;}

The difference between the map of JS array and the Foreach method and its compatibility usage