ES5 Array Method Map

Overview

map()method returns a new array that consists of the return value of each element in the original array that is called after a specified method.

Grammar

array.map(callback[, thisArg])

Parameters

callback

The

elements in the original array return a new element after the method.

currentValue

callbackThe first parameter of the array in which the element is currently passed.

index

callbackThe second parameter, the index of the element that is currently being passed in the array.

array

callback The third argument, called map the array of methods.

thisArg

callback this The object to point to when the function is executed.

Example: Convert a word in an array to a corresponding plural form.

The following code converts all the words in an array to the corresponding plural form.

function fuzzyplural (single) {  var result = Single.replace (/o/g, ' e ');     if (Single = = ' Kangaroo ')    {+ = ' se ';  } return result;} var words = ["foot", "Goose", "Moose", "Kangaroo"];console.log (Words.map (fuzzyplural)); // ["Feet", "geese", "Meese", "Kangareese"]

Example: Finding the square root of each element in an array

The following code creates a new array with a value of the square root of the corresponding number in the original array.

var numbers = [1, 4, 9]; var roots = Numbers.map (math.sqrt); /* */

Example: 在字符串上使用 mapMethod

The following example shows an String array of ASCII codes that correspond to each character in a string using the map method on one:

var map = Array.prototype.mapvarfunctionreturn x.charcodeat (0);}) // the value of a is [101, 108, 108, 111, +,, 111 , and 108, +]

Examples of Use tips

Normally, map a function in a method callback only needs to accept one parameter, which is the array element itself that is being traversed. But this does not mean that map only callback one parameter is passed. This thought inertia may make us make a mistake that is easy to make.

//what does the following statement return:["1", "2", "3"].map (parseint);//you may feel that [1, 2, 3]//but the actual result is [1, Nan, Nan]//when you normally use parseint, you only need to pass one parameter. But in fact, the parseint can have two parameters. The second argument is the binary number. Can be verified by the statement "alert (parseint.length) ===2".//when the map method calls the callback function, it passes three arguments: The element currently being traversed, the element index, and the original array itself.//The third parameter, parseint, is ignored, but the second parameter does not, that is, parseint the index value passed in as a binary number to use. This returns Nan./*//should use the following user function Returnintfunction ReturnInt (element) {return parseint (element,10);} ["1", "2", "3"].map (returnint);//return [n/a]*/

Compatibility with legacy environments (Polyfill)

mapIs the newly added method in the recent ECMA-262 standard, so some older browsers might not have implemented the method. In browsers that do not have native support map methods, you can use the following Javascript code to 实现它。 use the algorithm exactly as ECMA-262, 5th Edition stipulates. Assumptions Object , TypeError and Array have their original values. and callback.call the original value isFunction.prototype.call

//implement ECMA-262, Edition 5, 15.4.4.19//reference: http://es5.github.com/#x15.4.4.19if(!Array.prototype.map) {Array.prototype.map=function(callback, Thisarg) {varT, A, K; if( This==NULL) {      Throw NewTypeError ("This is a null or not defined"); }    //1. Assign o to the array that calls the map method.    varO = Object ( This); //2. Assign Len to the length of the array O.    varLen = o.length >>> 0; //3. If callback is not a function, the TypeError exception is thrown.    if(Object.prototype.toString.call (callback)! = "[Object Function]") {      Throw NewTypeError (callback + "is not a function"); }    //4. If the parameter thisarg has a value, the T is assigned to THISARG; otherwise t is undefined.    if(thisarg) {T=Thisarg; }    //5. Create a new array A, length is the original array o length lenA =NewArray (len); //6. Assign a value of K to 0K = 0; //7. When K < Len executes the loop.     while(K <Len) {      varKvalue, Mappedvalue; //Traverse O,k as the original array index      if(kinchO) {//Kvalue the value corresponding to the index K.Kvalue =o[K]; //the execution callback,this points to T, with three parameters. Kvalue: value, K: Index, O: the original array.Mappedvalue =Callback.call (T, Kvalue, K, O); //The return value is added to the new array A.a[K] =Mappedvalue; }      //k self-increment 1k++; }    //8. Return the new array a    returnA;      }; }

Reference: Https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

ES5 Array Method Map