Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use the map() method of the array in ecmascript 5. Xiaobian thinks it is quite practical, so share it with you as a reference. I hope you can gain something after reading this article.

In ecmascript, the map() method can call the specified callback function on each element of the array and return the array containing the results; syntax "array.map (function(currentValue,index,arr), thisValue)".

Operating environment of this tutorial: Windows 7 system, Javascript version 1.8.5, Dell G3 computer.

The map() method calls the specified callback function on each element of the array and returns an array containing the results.

The map() method processes elements sequentially in the order of the original array elements.

syntax

array.map (function(currentValue,index,arr), thisValue) Parameter Description function(currentValue, index,arr)

Must. Every element in the array executes this function.

Function parameters:

currentValue is required. Value of current element

Index is optional. Index value of current element

arr is optional. Array object to which the current element belongs

thisValue is optional. Object is used as the callback for this execution and passed to the function as the value of "this."

If thisValue is omitted, or null or undefined is passed, then this is the global object of the callback function.

The map() method returns a new array where each element is the callback return value of the associated original array element. The map() method calls the callbackfn function once for each element in the array (in ascending index order) and does not call callbacks for missing elements in the array.

In addition to array objects, the map() method can be used by any object that has a length attribute and has indexed attribute names, such as Arguments parameter objects.

The map() method does not modify the original array directly, but callback functions may modify it. The table shows the results obtained by modifying the array object after the map method is started.

callback function modifies the impact of the array map method Condition element after startup is passed to callback function Add element beyond original length of array No Add element to fill missing element in array Yes, if index has not been passed to callback function Element changed Yes, if element has not been passed to callback function Remove element from array No, unless element has been passed to callback function

Examples 1

The following example maps an array using the map() method, squares the value of each element in the array, multiplies the PI value, and returns the area value of the circle as the element value of the new array.

function f (radius) { var area = Math.PI * (radius * radius); return area.toFixed(0);}var a = [10,20,30];var a1 = a.map(f);console.log(a1);

Example 2

The following example demonstrates how to use thisArg in map by mapping an array using the map() method, dividing the value of each element in the array by a threshold, and returning the new array where both the callback function and threshold exist as properties of the object.

var obj = { val : 10, f : function (value) { return value % this.val; }}var a = [6,12,25,30];var a1 = a.map(obj.f, obj);console.log(a1); //6,2,5,0

Example 3

The following example demonstrates how to use JavaScript built-in methods as callback functions.

var a = [9, 16];var a1 = a.map(Math.sqrt);console.log(a1); //3,4

Example 4

The following example demonstrates how to apply the map method to an array of classes. In the example, map is applied to a string through the dynamically invoked method (Call), map will traverse each character in the string and call the callback function threeChars to intercept the left and right three characters of each character and map them to a new array.

function f (value, index, str) { return str.substring(index - 1, index + 2);}var s = "Thursday";var a = [].map.call(s, f);console.log(a); //Th,Thu,hur,urs,rsd,sda,day,ay

About "how to use the map() method of array in ecmscript 5" This article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.