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

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

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

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

При этом в качестве ключа используется не порядковый номер (индекс), а некоторая строка, которую мы устанавливаем сами.

Таким образом представить ассоциативный массив можно как набор пар «ключ-значение». При этом каждое значение связано с определённым ключом.

Для того чтобы получить значение необходимо знать ключ.

Способы создания ассоциативных массивов

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

Создание ассоциативных массивов в JavaScript можно выполнить двумя разными способами:

• с помощью объекта Map (появился в языке, начиная с версии ECMAScript 2015);
• посредством объектов.

Коллекция Map

Map – это коллекция «ключ-значение», которую можно использовать для создания ассоциативных массивов.

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

Создание пустой коллекции:

// создание пустого ассоциативного массива
const arr = new Map();

Создании коллекции с инициализацией начальных значений:

// создание ассоциативного массива и помещения в него трех пар «ключ-значение»
const arr = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

В этом примере строки «key1», «key2» и «key3» являются ключами, а «value1», «value2» и «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));

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

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

Создание пустого ассоциативного массива через объект:

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

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

const myArray = {
  'key1': 'value1',
  'key2': 'value2',
  ...
}

Добавление нового элемента (пары «ключ-значение»):

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

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

В качестве значения можно использовать не только примитивные типы данных, но и ссылочные.

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

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

Получение значения ключа:

console.log( myArray['key1'] );
console.log( myArray['key2'] );
console.log( myArray.key1 );
console.log( myArray.key2 );

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

const myArray = {'key1': 'value1', 'key12: 'value2', 'key3': 'value3'};
// Используем keys, чтобы получить массив ключей. А затем с помощью length их длину
Object.keys(myArray).length; // 3

Удаление ключа выполняется с помощью оператора delete:

delete myArray['key1'];

Выполнить проверку (наличия) ключа можно так:

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

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

Перебор ключей с помощью цикла for...in:

// myArray - объект как ассоциативный массив
for(key in myArray) {
  console.log( `${key} = ${myArray[key]}` );
}

Преобразовать объект, используем в качестве ассоциативного массива, в JSON и обратно можно так:

// ассоциативный массив
const arr = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

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