Principle:
- The Advanced browser supports 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) { = item*10;}) Console.log (res); // -->undefined; Console.log (ary); // changes to 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:
/** * The foreach traversal array * @param callback [function] callback function; * @param context [object] context;*/Array.prototype.myForEach=functionMyforeach (callback,context) {context= Context | |window; if(' ForEach 'inchArray.prototye) { This. ForEach (Callback,context); return; } //Ie6-8 Write your own callback function execution Logic for(vari = 0,len = This. length; I < len;i++) {Callback&& Callback.call (Context, This[I],i, This); }}
/** * Map Traversal array * @param callback [function] callback function; * @param context [object] context;*/Array.prototype.myMap=functionMyMap (callback,context) {context= Context | |window; if(' Map 'inchArray.prototye) {return This. Map (Callback,context); } //Ie6-8 Write your own callback function execution Logic varNewary = []; for(vari = 0,len = This. length; I < len;i++) { if(typeofcallback = = = ' function ') { varval = Callback.call (Context, This[I],i, This); Newary[newary.length]=Val; } } returnnewary;}
Arrays in JavaScript traverse the foreach () and Map () methods and the compatibility notation