Examples of javascript Array map Method

The jsmap () method returns a new array consisting of the return values after each element in the original array calls a specified method. This article describes how to use javascript Array map to help programmers. For more information, see. Javascript map Overview

map()Method returns a new array consisting of the return values after each element in the original array calls a specified method.

Javascript map syntax

array.map(callback[, thisArg])

Javascript map Parameters

callbackThe element in the original array returns a new element after this method.

1. currentValue callbackThe first parameter, the element currently passed in the array.
2. index callbackThe second parameter, the index of the currently passed element in the array.
3. array callbackThe third parametermapMethod array.

thisArgRuncallbackFunction timethisObject.

Javascript map description

mapThe method calls each element of the original array in order.callbackFunction.callbackThe returned values after each execution form a new array.callbackThe function will only be called with a value index; those that have never been assigned or useddeleteThe deleted index is not called.

callbackThe function will automatically pass in three parameters: array elements, element indexes, and the original array itself.

IfthisArgIf the parameter has a valuecallbackWhen a function is called,thisAll pointthisArgParameter. If this parameter is omittedthisArg Parameter,Or the value is null.Orundefined, This points to the global object.

map Do not modify the original array itself that calls it (of course, you cancallbackChange the original array during execution ).

When the map method is used to process arrays, the range of array elements is determined before the first call of the callback method. During the execution of the map method, the newly added elements in the original array will not be accessed by callback. If the existing elements are changed or deleted, the value of the elements passed to callback is the value at the time when the map method traverses them. The deleted elements are not accessed.

Javascript map instance

Example: convert words in the array into the corresponding plural form.

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

function fuzzyPlural(single) {  var result = single.replace(/o/g, 'e');    if( single === 'kangaroo'){    result += 'se';  }  return result; }var words = ["foot", "goose", "moose", "kangaroo"];console.log(words.map(fuzzyPlural));// ["feet", "geese", "meese", "kangareese"]

Example: Find the square root of each element in the array

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

Var numbers = [1, 4, 9]; var roots = numbers. map (Math. sqrt);/* the value of roots is [1, 2, 3], and the value of numbers is still [1, 4, 9] */

Example:Use map on stringsMethod

The example below demonstratesStringUse the map method to obtain an array consisting of the ASCII code corresponding to each character in the string:

Var map = Array. prototype. mapvar a = map. call ("Hello World", function (x) {return x. charCodeAt (0);}) // The value of a is [72,101,108,108,111, 32, 87,111,114,108,100]

Use Cases of javascript map

Generally,mapMethodcallbackThe function only needs to accept one parameter, that is, the elements of the array being traversed. But this does not meanmapOnlycallbackA parameter is input. This mindset inertia may make a mistake that is easy to make.

// What does the following statement return? ["1", "2", "3"]. map (parseInt); // you may think of [1, 2, 3] // but the actual result is [1, NaN, naN] // when parseInt is used, you only need to pass one parameter. but in fact, parseInt can have two parameters. the second parameter is the hexadecimal number. the statement "alert (parseInt. length) = 2 "to verify. // when the map method calls the callback function, it will pass three parameters: the elements being traversed, the element index, and the original array. // The third parameter parseInt will be ignored, but the second parameter will not. That is to say, parseInt will use the passed index value as the base number. then NaN. /* // use the following User Function returnIntfunction returnInt (element) {return parseInt (element, 10);} ["1", "2", "3"]. map (returnInt); // Returns [1, 2, 3] */

Javascript map is compatible with the old environment (Polyfill)

mapIs a newly added method in the latest ECMA-262 standard; so some older browsers may not implement this method. If there is no native supportmapIn the method browser, you can use the following Javascript codeImplement it.The algorithm used is exactly what ECMA-262, version 5th stipulates. Assume thatObject,TypeError, AndArrayHas their original values. Andcallback.callThe original value is alsoFunction.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) {var T, A, k; if (this = null) {throw new TypeError ("this is null or not defined ");} // 1. assign O to the array that calls the map method. var O = Object (this); // 2. assign len to the length of array O. var len = O. length >>> 0; // 3. if callback is not a function, a TypeError exception is thrown. if (Object. prototype. toString. call (callback )! = "[Object Function]") {throw new TypeError (callback + "is not a function");} // 4. if the thisArg parameter has a value, assign T to thisArg; otherwise, T is undefined. if (thisArg) {T = thisArg;} // 5. create A new Array A with the length of the original Array O length len A = new Array (len); // 6. assign k to 0 k = 0; // 7. when k <len, execute the loop. while (k <len) {var kValue, mappedValue; // traverses O, k is the original array index if (k in O) {// kValue is the value corresponding to index k. kValue = O [k]; // execute callback. this points to T and there are three parameters. they are kValue: value, k: Index, and O: original array. mappedValue = callback. call (T, kValue, k, O); // Add the returned value to the new array. A [k] = mappedValue;} // k increases by 1 k ++;} // 8. returns the new array A return ;};}