JavaScript - Ассоциативные массивы

Статья, в которой рассмотрим что такое ассоциативный массив, как их можно создать в JavaScript и основные принципы работы с ним.

Что такое ассоциативный массив?

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

Представить структуру данных ассоциативного массива можно как совокупность пар «ключ-значение». В ассоциативном массиве каждое значение связано с определённым ключом. Доступ к значению осуществляется по имени ключа.

Представить ассоциативный массив можно как ящичек, в котором находятся коробочки. Каждая коробочка в этом ящичке имеет имя (ключ) и содержимое (значение).

Для того чтобы найти нужную коробочку в ящичке нужно знать её имя (ключ). Зная имя (ключ) коробочки можно получить её содержимое (значение).

Создание ассоциативного массива в JavaScript

В JavaScript начиная с релиза ECMAScript 2015 (6) для создания ассоциативного массива можно использовать объект Map.

До ECMAScript 2015 не существовало типа данных, предназначенного исключительно для создания ассоциативных массивов. Их создание осуществлялось посредством объектов.

В JavaScript имеется тип данных Array. Но данный тип данных предназначен только для создания массивов, у которых в качестве ключей используются числа (индексы).

Объект Map (ассоциативный массив)

Тип данных Map предназначен для создания ассоциативных массив (пар «ключ-значение»). В качестве ключа можно использовать как примитивные, так и ссылочные типы данных. Это одно из основных отличий от ассоциативных массивов как объектов, у которых в качестве ключа можно использовать только строки.

Пример создание ассоциативного массива (экземпляра объекта Map):

// создание пустого ассоциативного массива
var arr1 = new Map();  
  
// создание ассоциативного массива и добавление в него 3 пары "ключ-значение"
var arr = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);  

Узнать количество элементов в массиве можно осуществить с помощью свойства size:

arr.size; // 3

Добавление элемента в массив (в экземпляр объекта Map) осуществляется с помощью метода set:

// добавить в массив одну пару "ключ-значение"
arr.set('key4','value4');

// добавить в массив несколько пар "ключ-значение"
arr.set('key5','value5');
arr.set('key6','value6');
// или так
arr
  .set('key5','value5')
  .set('key6','value6');

Если в массиве есть уже такой ключ, то произойдёт установка нового значения, которое будет связано с ним:

arr.set('key1','new value');

Получить значение по ключу выполняется с помощью метода get:

// получить значение, ассоциированное с ключом 'key4'
arr.get('key4'); // 'value4'

Проверить есть ли ключ в массиве можно посредством метода has:

// есть ли в массиве arr ключ key2
arr.has('key2'); // true

Удалить из ассоциативного массива (экземпляра объекта Map) элемент по имени ключа можно с помощью метода delete:

arr.delete('key1'); // true

Данный метод возвращает true, если данный ключ существовал в массиве, в противном случае он возвращает false.

if (arr.delete('key1')) {
  console.log('Запись с ключом "key1" удалена из массива!');
} else {
  console.log('Запись с ключом "key1" не найдена в массиве!');
}

Очистить массив (удалить все элементы) можно выполнить с помощью метода clear.

arr.clear(); // очистим массив arr
arr.size; // 0 (количество элементов)

Перебор ассоциативного массива (объекта Map) обычно осуществляется с помощью цикла for...of. При этом итерацию можно организовать по ключам, значениям и записям ([key, values]).

Перебор ключей можно осуществить посредством итерируемого объекта MapIterator, возвращаемым методом keys:

for (let key of arr.keys()) {
  console.log(key);
}

Для перебора значений можно воспользоваться итерируемым объектом MapIterator, возвращаемым посредством методом values:

for (let value of arr.values()) {
  console.log(value);
}

Перебор записей ассоциативного массива с использованием метода entries:

for (let pair of arr.entries()) {
  // pair - это массив [key, values]
  console.log(pair[0]); // ключ
  console.log(pair[1]); // значение
  console.log(`Ключ = ${pair[0]}, значение = ${pair[1]}`);
}

Данный метод используется по умолчанию в for...of, поэтому его можно опустить:

for (let pair of arr) {
  console.log(`Ключ = ${pair[0]}, значение = ${pair[1]}`);
}

Кроме этого перебрать ассоциативный массив можно с помощью метода forEach.

arr.forEach(function(value,key) {
  console.log('key = ' + key +', value = ' + value);    
});

Преобразовать ассоциативный массив (объект Map) в JSON и обратно можно так:

let arr = new Map([
  ['question', 'Текст вопроса...'],
  ['answer1', 'Ответ 1...'],  
  ['answer2', 'Ответ 2...'], 
]);
// в JSON
jsonStr = JSON.stringify([...arr]);
// из JSON в Map
mapArr = new Map(JSON.parse(jsonStr));

Ассоциативный массив как объект

В качестве ассоциативного массива можно использовать объект.

Создать пустой ассоциативный массив (объект) можно одним из следующих способов:

// посредством литерала объекта
var arr = {};
// с использованием стандартной функции-конструктора Object
var arr = new Object();
// посредством Object.create
var arr = new Object.create(null);

Заполнить ассоциативный массив на этапе его создания можно так:

var myArray = { 
  "ключ1": "значение1"
 ,"ключ2": "значение2"
 , ... }

Добавить элемент (пару "ключ-значение") в ассоциативный массив можно следующим образом:

// добавить в массив arr строку «текстовое значение», связанное с ключом «key1»
arr["key1"] = "текстовое значение"
// добавить в массив число 22, связанное с ключом «key2»
arr["key2"] = 22;

Добавление элемента в массив будет выполняться только в том случае, если данного ключа в нём нет. Если данный ключ уже имеется в ассоциативном массиве, то это выражение просто изменит значение уже существующего ключа.

В качестве значения ключа можно использовать любой тип данных в JavaScript, в том числе и объекты.

В JavaScript кроме записи с использованием квадратных скобок можно также использовать точку. Но это доступно только ключей, имена которых отвечают правилам именования переменных.

arr.key1 = "текстовое значение"
arr.key2 = 22;

Получить значение (содержимое коробочки) элемента по ключу можно с помощью следующего синтаксиса:

myArray["key1"];
myArray["key2"];
myArray.key1;
myArray.key2;

Получить количество ключей (длину) ассоциативного массива можно так:

var myArray = { "key1":"value1", "key2":"value2", "key3":"value3"}
// 1 - получаем массив ключей с использованием метода keys
// 2 - используем свойство length, чтобы узнать длину массива
Object.keys(myArray).length; // 3

Удалить элемент из ассоциативного массива (объекта) выполняется с помощью оператора delete.

delete myArray["key1"];

Проверить есть ли ключ в ассоциативном массиве можно так:

var myArray = {"key1":"value1", "key2":"value2" };  
  
// 1 способ (c использованием метода hasOwnProperty)
if (myArray.hasOwnProperty("key1")) {
  console.log("Ключ key1 существует!");
} else {
  console.log("Ключ key1 не существует!");
}

// 2 способ
if ("key1" in myArray) {
  console.log("Ключ key1 есть в массиве!");
} else {
  console.log("Ключ key1 нет в массиве!");
}

Перебрать элементы ассоциативного массива (свойства объекта) можно выполнить с помощью цикла for...in:

// myArray - ассоциативный массив
for(key in myArray) {
  console.log(key + " = " + myArray[key]);
}

Преобразовать ассоциативный массив (созданный объект) в JSON и обратно можно так:

// Ассоциативный массив (объект)
var myArr = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

// в JSON
jsonStr = JSON.stringify(myArr);
// из JSON в ассоциативный массив (объект)
arr = JSON.parse(jsonStr);

//получить значение по ключу key1 (вывести в консоль)
console.log(arr.key1);

Более подробно познакомиться с форматом JSON можно в этой статье.