Home >Web Front-end >JS Tutorial >What is the use of the map() method of arrays in ecmascript 5?
In ecmascript, the map() method can call the specified callback function for processing on each element of the array, and return an array containing the results; syntax "array.map(function(currentValue,index,arr) , thisValue)".
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
The map() method can call the specified callback function for each element of the array and return 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)
Parameters | Description |
---|---|
function(currentValue, index,arr) |
Required. Function, each element in the array will execute this function. Function parameters:
|
thisValue | Optional. The object is used as the execution callback, passed to the function, and used as the value of "this". If thisValue is omitted, or null or undefined is passed in, then the this of the callback function is the global object. |
The map() method will return a new array, where each element is the callback function return value of the associated original array element. For each element in the array, the map() method calls the callbackfn function once (in ascending index order) and does not call the callback function for missing elements in the array.
In addition to array objects, the map() method can be used by any object that has a length property and has an indexed property name, such as an Arguments parameter object.
The map() method does not directly modify the original array, but the callback function may modify it. The results obtained by modifying the array object after the map method is started are shown in the table.
Conditions after the map method is started | Whether the element is passed to the callback function |
---|---|
Add elements beyond the original length of the array | No |
Add elements to fill missing elements in the array | Yes, if the index has not been passed to the callback function |
The element has changed | Yes, if the element has not been passed to the callback function |
Remove element from array | No unless the element has been passed to the callback function |
Example 1
The following example uses the map() method to map an array, square the value of each element in the array, multiply it by the PI value, use the area value of the returned circle as the element value of the new array, and finally return 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 uses the map() method to map an array and divide the value of each element in the array by A threshold, and then returns this new array where both the callback function and the threshold exist as properties of the object. This method demonstrates how to use the thisArg parameter in the map.
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 use the map method to apply to a class array. In the example, map is applied to a string through the dynamic calling method (Call). Then map will traverse each character in the string and call the callback function threeChars to intercept the three characters to the left and right of each character and map it to in 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
【Related recommendations: javascript learning tutorial】
The above is the detailed content of What is the use of the map() method of arrays in ecmascript 5?. For more information, please follow other related articles on the PHP Chinese website!