Карта содержит пары ключ-значение, где ключи могут быть любого типа данных.
Карта запоминает исходный порядок вставки ключей.
Создает новую карту
Устанавливает значение ключа на карте
Получает значение ключа на карте.
Удаляет элемент карты, указанный ключом
Возвращает true, если ключ существует на карте.
Вызывает функцию для каждой пары ключ/значение на карте.
Возвращает итератор с парами [ключ, значение] на карте.
Возвращает количество элементов на карте
Вы можете создать карту JavaScript следующим образом:
Передача массива в new Map()
Создайте карту и используйте Map.set()
new Map()Вы можете создать карту, передав массив в конструктор new Map():
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
set()Вы можете добавлять элементы на карту с помощью метода set():
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
Метод set() также можно использовать для изменения существующих значений карты:
fruits.set("apples", 200);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.set("apples", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
get()Метод get() получает значение ключа на карте:
fruits.get("apples"); // Returns 500Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
sizeСвойство size возвращает количество элементов на карте:
fruits.size;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
delete()Метод delete() удаляет элемент карты:
fruits.delete("apples");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
has()Метод has() возвращает true, если ключ существует на карте:
fruits.has("apples");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
fruits.delete("apples");
fruits.has("apples");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
Итерируемый: не повторяемый напрямую.
Размер: не имеет свойства размера.
Типы ключей: ключи должны быть строками (или символами).
Порядок ключей: ключи расположены неправильно.
Значения по умолчанию. Иметь ключи по умолчанию.
Итерируемость: прямая итерация.
Размер: наличие свойства размера.
Типы ключей. Ключи могут иметь любой тип данных.
Порядок ключей. Ключи упорядочены по вставке.
Значения по умолчанию. Не иметь ключей по умолчанию.
forEach()Метод forEach() вызывает функцию для каждой пары ключ/значение на карте:
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value + "<br>"
})
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
entries()Метод entries() возвращает объект-итератор с [ключ, значения] на карте:
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
for (const x of fruits.entries()) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Карты JavaScript поддерживаются во всех браузерах, кроме Internet Explorer:
| Chrome | Edge | Firefox | Safari | Opera |