Статья, в которой рассмотрим что такое ассоциативный массив, как их можно создать в 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 можно в этой статье.
Комментарии ()