Detailed explanation of forEach, $.each and map methods in JavaScript

In our previous article, we introduced to you a detailed explanation of the foreach statement in php, as well as an introduction to the use of foreach and each, so today we will introduce to you about orEach and $.each in JS and Detailed description of map method!

forEach is the most basic one of the new Array methods in ECMA5, which is traversal and looping. For example, the following example:

[1, 2 ,3, 4].forEach(alert);

is equivalent to the following for loop

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
 alert(array[k]);
}

Array. In the new methods of ES5, the parameters are all function types, by default There are parameters passed, and the function callback in the forEach method supports 3 parameters. The first one is the traversed array content; the second one is the corresponding array index, and the third one is the array itself.

Therefore, we have:

[].forEach(function(value, index, array) {
  // ...
});

Compare the $.each method in jQuery:

$.each([], function(index, value, array) {
  // ...
});

will find that, The first and second parameters are exactly opposite. Please pay attention and don’t remember them wrongly. The same is true for similar methods later, such as $.map.

var data=[1,3,4] ; 
var sum=0 ;
data.forEach(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  sum+=val            
})
console.log(sum);          // ==> 8

map

The map here does not mean "map", but "mapping". [].map(); The basic usage is similar to the forEach method:

array.map(callback,[ thisObject]);

The parameters of callback are also similar:

[].map(function(value, index, array) {
  // ...
});

The function of the map method is not difficult to understand, "mapping", that is, the original The array is "mapped" into the corresponding new array. The following example is to find the square of a numerical item:

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  return val*val           
})
console.log(Squares);        // ==> [1, 9, 16]

Note: Since forEach and map are new array methods in ECMA5, browsers below IE9 do not support it yet (the damn IE), but, All the above functions can be achieved by extending from the Array prototype, such as the forEach method:

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function() {
    /* 实现 */
  };
}

Summary:

This article introduces it in detail# The forEach, $.each and map methods in ##JavaScript are basically similar in use. You can choose according to your own needs!
Related recommendations:

A brief introduction to foreach and each in JS

Detailed explanation of Foreach syntax in JavaScript

FOREACH in JavaScript Examples of using array methods

The above is the detailed content of Detailed explanation of forEach, $.each and map methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!