The array traversal in JavaScript () and the map () method and the compatibility writing _javascript tips

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 through each item in the array; This method does not have a return value, nor does it affect the original array;

• There are several items in the array, so the anonymous callback function passed in will need to be executed several times;

• Each time the anonymous function is executed, it is also passed three parameter values: the current item item in the array, the index of the current item, and the original array input;

• Theoretically this method does not return a value, it simply traverses each item in the array and does not modify the original array, but we can modify the original array by our own index of the array;

This in the foreach method is ary, and this default in the anonymous callback function is 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, which is used to traverse each of the values in the array, to traverse each item in the array;

• Difference: The return value is supported in the callback function of map; What returns is the equivalent of turning this item in the array into something (without affecting the original array, which is equivalent to cloning the original array and changing the corresponding item in the array of the cloned copy);

• Both foreach and map support the second parameter value, and the second argument means that the this in the anonymous callback function is modified.

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:

• Whether a foreach or a map is incompatible under IE6-8 (not compatible with 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];
Array.prototype.myForEach = function Myforeach (callback,context) {Context
  = context | | window;
  if (' ForEach ' in Array.prototye) {
    This.foreach (callback,context);
    return;
  }
  Ie6-8 The logic for the execution of the callback function
  (var i = 0,len = This.length I < len;i++) {
    callback && Callback.call (cont ext,this[i],i,this);
  }

/**
* Map traverses array
* @param callback [function] callback function;
* @param context [object];
Array.prototype.myMap = function Mymap (callback,context) {Context
  = context | | window;
  if (' Map ' in Array.prototye) {return
    this.map (callback,context);
  }
  Ie6-8 the logical
  var newary = [] That writes the callback function to execute itself;
  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 the above wording is wrong, please correct me, ^^

The above JavaScript in the array traversal foreach () and map () method and the introduction of the compatibility is small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.