Examples
Return a new array with the square root of all element values:
Nội dung chính
- Definition and Usage
- Return Value
- More Examples
- Browser Support
- Essential Map Methods
- How to Create a Map
- The new Map() Method
- The set() Method
- The get() Method
- The size Property
- The delete() Method
- The has() Method
- JavaScript Objects vs Maps
- The forEach() Method
- The entries() Method
- Browser Support
const numbers = [4, 9, 16, 25];
const newArr = numbers.map(Math.sqrt)
Try it Yourself »
Multiply all the values in an array with 10:
const numbers = [65, 44, 12, 4];
const newArr =
numbers.map(myFunction)
function myFunction(num) {
return num * 10;
}
Try it Yourself »
More examples below.
Definition and Usage
map() creates a new array from calling a function for every array element.
map() calls a function once for each element in an array.
map() does not execute the function for empty elements.
map() does not change the original array.
Syntax
array.map(function(currentValue, index, arr), thisValue)
Parameters
Parameter | Description |
function() | Required. A function to be run for each array element. |
currentValue | Required. The value of the current element. |
index | Optional. The index of the current element. |
arr | Optional. The array of the current element. |
thisValue | Optional. Default value undefined. A value passed to the function to be used as its this value. |
Return Value
Type | Description |
An array | The results of a function for each array element. |
More Examples
Get the full name for each person:
const persons = [
{firstname : "Malcom", lastname: "Reynolds"},
{firstname : "Kaylee", lastname: "Frye"},
{firstname : "Jayne", lastname: "Cobb"}
];
persons.map(getFullName);
function getFullName(item) {
return [item.firstname,item.lastname].join(" ");
}
Try it Yourself »
Browser Support
map() is an ECMAScript5 (ES5) feature.
ES5 (JavaScript 2009) fully supported in all browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |
A Map holds key-value pairs where the keys can be any datatype.
A Map remembers the original insertion order of the keys.
Essential Map Methods
new Map() | Creates a new Map |
set() | Sets the value for a key in a Map |
get() | Gets the value for a key in a Map |
delete() | Removes a Map element specified by the key |
has() | Returns true if a key exists in a Map |
forEach() | Calls a function for each key/value pair in a Map |
entries() | Returns an iterator with the [key, value] pairs in a Map |
size | Returns the number of elements in a Map |
How to Create a Map
You can create a JavaScript Map by:
- Passing an Array to new Map()
- Create a Map and use Map.set()
The new Map() Method
You can create a Map by passing an Array to the new Map() constructor:
Example
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Try it Yourself »
The set() Method
You can add elements to a Map with the set() method:
Example
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
Try it Yourself »
The set() method can also be used to change existing Map values:
The get() Method
The get() method gets the value of a key in a Map:
The size Property
The size property returns the number of elements in a Map:
The delete() Method
The delete() method removes a Map element:
The has() Method
The has() method returns true if a key exists in a Map:
JavaScript Objects vs Maps
Differences between JavaScript Objects and Maps:
Not directly iterable | Directly iterable |
Do not have a size property | Have a size property |
Keys must be Strings (or Symbols) | Keys can be any datatype |
Keys are not well ordered | Keys are ordered by insertion |
Have default keys | Do not have default keys |
The forEach() Method
The forEach() method calls a function for each key/value pair in a Map:
Example
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Try it Yourself »
The entries() Method
The entries() method returns an iterator object with the [key, values] in a Map:
Example
//
List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Try it Yourself »
Browser Support
JavaScript Maps are supported in all browsers, except Internet Explorer:
Chrome | Edge | Firefox | Safari | Opera |