Что такое карта в JavaScript и как ее использовать?
Проще говоря, карту можно рассматривать как объект особого типа, который дает дополнительные преимущества по сравнению с такими объектами, как:
- Они могут иметь любой тип данных в качестве своего ключа, в отличие от объектов, которые ограничены только строкой и символами.
- Порядок вставки сохраняется при получении значений на карте.
- Они итерабельны, т. е. к ним можно получить доступ, используя for…of.
Чтобы инициализировать карту:
var map = new Map();
Теперь, если мы увидим тип карты, это будет только объект, но основное различие между картой и обычным объектом заключается в том, что обычные объекты имеют свойство прототипа объекта, а карта имеет свойство прототипа типа карта.
const obj = { name: 'Avinash' };
console.log(obj);
Output --> name: "Avinash"
[[Prototype]]: Object
const map = new Map();
map.set(name,'Avinash');
console.log(map);
Output --> Map(1) {'' => 'Avinash'}[[Entries]]0: {"" => "Avinash"}size: 1[[Prototype]]: Map
Итак, как вы можете видеть в приведенном выше примере, объект напрямую наследуется от прототипа объекта, тогда как в случае карты он наследуется от прототипа карты.
Теперь, когда мы разобрались с базовой структурой Map, давайте посмотрим, как мы можем ее использовать, и посмотрим на некоторые часто используемые свойства/методы.
- Создание карты
let map = new Map(); // A new Map is created.
2. Чтобы добавить значение на карту, используется метод set, в котором первый параметр является ключевым и может быть любым объектом, функцией, массивом или любым типом тип данных.
const newObj = {name : 'ABC'}
map.set(true,"true");
map.set(function () {}, "Function defined");
map.set(newObj, "Object Defined");
map.set(1,"Number 1");
console.log(map);
Output
Map(4) {true => 'true', ƒ => 'Function defined', {…} => 'Object Defined', 1 => 'Number 1'
3. Чтобы получить количество записей или размер карты, мы можем просто использовать свойство size.
console.log(map.size); // 4
4. Чтобы удалить конкретный ключ, используйте метод delete, передав ключ в качестве удаляемого аргумента.
console.log(map.delete(1)); // true
Метод Delete возвращает логическое значение true, если свойство удалено с карты, и false, если мы указали какое-либо несуществующее свойство при удалении.
5. Чтобы сбросить карту, используйте метод clear.
map.clear();
console.log(map); // Map(0) {size: 0}
6. Чтобы проверить наличие ключа внутри карты, используйте метод has.
console.log(map.has(nameObj)); // true
Здесь следует отметить, что приведенное выше сравнение основано на ссылке, поэтому, если вы передаете объект напрямую, он вернет false.
Лучшее решение — присвоить объект переменной и использовать ее в качестве ключа. а также при проверке с помощью has.
7. Чтобы получить все ключи объекта карты, мы используем метод keys.
console.log(map.keys())
// Output
[Map Iterator] { true, [Function], { name: 'ABC' }, 1 }
8. Точно так же, чтобы получить значения в объекте карты, мы используем метод values.
console.log(map.values())
// Output
[Map Iterator] {
'true',
'Function defined',
'Object Defined',
'Number 1'
}
9. Чтобы получить пару ключ-значение в объекте карты, используйте метод entries.
console.log(map.entries());
// Output
[Map Entries] {
[ true, 'true' ],
[ [Function], 'Function defined' ],
[ { name: 'ABC' }, 'Object Defined' ],
[ 1, 'Number 1' ]
}
10. Повторите карту. В отличие от объектов, карты повторяемы, т. е. их можно использовать с for…of.
for (let value of map) {
console.log(value);
}
// Output
[ true, 'true' ]
[ [Function], 'Function defined' ]
[ { name: 'ABC' }, 'Object Defined' ]
[ 1, 'Number 1' ]
11. Итерация по карте также возможна с forEach().
map.forEach((value, key) => console.log(`Key - ${key} has value - ${value}`));
Key - true has value - true
Key - function () {} has value - Function defined
Key - [object Object] has value - Object Defined
Key - 1 has value - Number 1
Итак, это вкратце об использовании Карт и о том, когда их можно использовать над объектами.
Для быстрой справки см. Шпаргалку ниже:
Надеюсь, вы смогли узнать здесь что-то новое.
Вы можете прочитать о других моих статьях здесь и, кроме того, вы можете подписаться на мою рассылку, чтобы получать последние опубликованные мной темы.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
