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

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

webfanat вконтакте webfanat youtube

map js

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() от работы с простыми массивами который передает элементы функции обратного вызова в порядке возрастания их числовых индексов.

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

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

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm