•principle:
• Advanced browser supports forEach method
Syntax: Both forEach and map support 2 parameters: one is the callback function (item, index, list) and context;
•forEach: used to iterate through each item in the array; this method execution has no return value and has no effect on the original array;
•There are several items in the array, so the anonymous callback function passed in needs to be executed several times;
•Every time an anonymous function is executed, three parameter values are also passed to it: the current item in the array, the index index of the current item, and the original array input;
•Theoretically, this method does not return a value, it just traverses every item in the array and does not modify 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);//-->will change the original array;•map: is very similar to forEach. It is used to iterate through each item value in an array and to iterate through each item in an array;
•Difference: The return return value is supported in the map callback function; what is return is equivalent to changing this item in the array to why (it does not affect the original array, it is just equivalent to cloning a copy of the original array and changing the corresponding items in the cloned array);
•Each or map supports the second parameter value. The second parameter means modifying 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 writing method:
• Whether it is forEach or map in IE6-8 (there are no two methods on Array.prototype when incompatible), we need to encapsulate both compatible methods ourselves, the code is as follows:
/*** forEach traversal 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; } //In IE6-8, write the logic for the execution of the callback function by yourself for(var i = 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 = function myMap(callback,context){ context = context || window; if('map' in Array.prototye) { return this.map(callback,context); } //IE6-8 logic to write the callback function execution 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;}PS: If there are any errors in the above writing method, please correct it, ^^
The above introduction to array traversal forEach() and map() methods and compatible writing methods in JavaScript are all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.