Introduction to array traversal forEach() and map() methods and compatible writing methods in JavaScript

•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.