Hướng dẫn map in map javascript

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

Return Value

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:

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

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:

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: