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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.