Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

map js

Всем привет! Приступим, так что же это за массивы такие ассоциативные? Дадим определение:

Ассоциативный массив - это упорядоченный список пар ключ/значение, где ключ и значение могут быть любого типа.

Эквивалентность или равенство ключей определяется вызовом метода Object.is(), поэтому ключи '5' и 5 в таком массиве будут считаться разными. Теперь посмотрим как создаются такие массивы на примере:

let map = new Map();
map.set('Ключ массива','Значение массива');
map.set('three',3);
map.set('Year',2017);

console.log(map.get('Ключ массива')); //Значение массива
console.log(map.get('three')); // 3
console.log(map.get('Year')); //2017

Как видите ассоциативный массив инициализируется через объект Map, затем с помощью метода set() мы устанавливаем в этот массив пару ключ и значение. В принципе добавлять ключ и значение в ассоциативный массив мы можем на стадии его инициализации:

let map = new Map([['Ключ массива','Значение массива'],['three',3],['Year',2017]]);

console.log(map.get('Ключ массива')); //Значение массива
console.log(map.get('three')); // 3
console.log(map.get('Year')); //2017

Результат как видите остался таким же.

Для того чтобы нам достать значение из такого массива нужно через матод get() обратиться к ключу этого значения.

Так с этим мы разобрались идем дальше. У ассоциативных массивов есть еще и ряд других методов давайте рассмотрим их.

has(key) - определяет присутствие указанного ключа в ассоциативном массиве.

let map = new Map([['Ключ массива','Значение массива'],['three',3],['Year',2017],['5',5]]);

console.log(map.has('key'));//false
console.log(map.has(5));//false
console.log(map.has('5'));//true

,то есть ли указанного ключа нет в массиве нам возвращается false, если есть, то true.

delete(key) - удаляет из ассоциативного массива указанный ключ и связанное с ним значение.

let map = new Map([['Ключ массива','Значение массива'],['three',3],['Year',2017],['5',5]]);

console.log(map);/* Map(4) {"Ключ массива" => "Значение массива", "three" => 3, "Year" => 2017, "5" => 5}*/
map.delete('three');
console.log(map); /* Map(3) {"Ключ массива" => "Значение массива", "Year" => 2017, "5" => 5}*/

Как видите результат после применения метода delete() мы удалили ключ three и его значение 3, все очень просто не правда ли?

clear() - удаляет из ассоциативного массива все ключи и их значения

let map = new Map([['Ключ массива','Значение массива'],['three',3],['Year',2017],['5',5]]);

console.log(map);/* Map(4) {"Ключ массива" => "Значение массива", "three" => 3, "Year" => 2017, "5" => 5}*/
map.clear();
console.log(map);//  {}

Как видите после применения метода clear() все наши значения и ключи были удалены из массива map.

Также у ассоциативных массивов есть такое свойство size, которое указывает количество пар ключ/значение. Рассмотрим на примере:

let map = new Map([['Ключ массива','Значение массива'],['three',3],['Year',2017],['5',5]]);

console.log(map.size);
map.delete('5');//4
console.log(map.size);//3
map.set('key1','value1');
map.set(10,'value3');
console.log(map.size);//5

Как мы видим вначале у нас в ассоциативном массиве 4 элемента, потом мы один удаляем у нас становится их три, и в конце мы еще добавляет два в итоге у нас становится 5.

Как видите ничего здесь сложного нет.

Давайте поговорим о переборе таких массивов, для этого можно использовать цикл forEach(), пример:

let map = new Map([['Ключ массива','Значение массива'],['three',3],['Year',2017],['5',5]]);

map.forEach(function(value, key, ownerMap){
    console.log(key+" : "+value);
    console.log(ownerMap === map);
});

С аргументами value и key, я думаю все понятно(значение и ключ), нас больше интересует третий аргумент ownerMap, который в нашем случае возвращает true.

ownerMap - функция обратного вызова которая получает пары ключ/значение в порядке их добавления в ассоциативный массив. Это отличает поведение цикла forEach() от работы с простыми массивами который передает элементы функции обратного вызова в порядке возрастания их числовых индексов.

На этом у меня все. Надеюсь вам было интересно и вы будете пользоваться полученными знаниями. Удачи!

Оцените статью

Еще статьи

window location JavaScript

Ссылки html

Переменные окружения PHP

CSS перенос слов

border image css

Скриншоты python

meter html

wget python

linux systemd

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.