Статья в которой рассматривается основные действия, связанные с созданием и управлением ассоциативными массивами в JavaScript.

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

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

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

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

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

JavaScript - Пустой ассоциативный массив

JavaScript - Ассоциативный массив, состоящий из 4 элементов

JavaScript - Как получить значение элемента ассоциативного массива

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

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

Создание ассоциативных массивов в JavaScript осуществляется таким же образом, как и создание собственных объектов.

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

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

Добавление элементов в ассоциативный массив

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

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

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

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

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

Получения значения по ключу в ассоциативном массиве

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

myArray["ключ1"];
myArray["ключ2"];

Заполнение ассоциативного массива на этапе его создания осуществляется следующим образом:

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

Перебор элементов ассоциативного массива осуществляется с помощью цикла for..in:

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

Узнать длину ассоциативного массива можно следующим образом:

1. Сначала необходимо получить массив с именами ключей с помощью метода keys():

var myArray = { "key1":"value1", "key2":"value2", "key3":"value3"}
//получить массив с именами ключей
Object.keys(myArray);
// --> ["key1", "key2", "key3"]

2. С помощью свойства length узнать у полученного массива его длину:

Object.keys(myArray).length
// --> 3

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

delete myArray["key1"];

Осуществить проверку наличия ключа в ассоциативном массиве можно так:

var myArray = {"key1":"value1", "key2":"value2" };
//1 способ
if ("key1" in myArray) {
  alert("Ключ key1 существует.");
} else {
  alert("Ключ key1 не существует.");
}
//2 способ
if (myArray.hasOwnProperty("key1")) {
  alert("Ключ key1 существует.");
} else {
  alert("Ключ key1 не существует.");
}

Примечание

Если кроме рассмотренного ограничения (заключение ключей в двойные кавычки) добавить ещё следующие:

  • строковые значения свойств заключать в двойные кавычки;
  • не использовать комментарии.

То вместо базового объекта JavaScript, получим его нотацию – JSON.

Применение формата JSON по сравнению с использованием обычного объекта принесёт дополнительные возможности, которые позволят:

  • преобразовывать строку JSON в объект (метод JSON.parse);
  • преобразовывать объект JSON в строку (метод JSON.stringify).

Это позволит более просто хранить или передавать данные (ассоциативный массив).

//объект JSON
var myJSONObject = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};

//получить значение по ключу key2 (вывести в консоль)
console.log(myJSONObject["key2"]);

//преобразовать JSON-объект в массив
var str = JSON.stringify(myJSONObject);
//вывести строку JSON в консоль
console.log(str);

//преобразовать JSON-строку в объект
var obj = JSON.parse(str);
//вывести объект в консоль
console.log(obj);

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

JavaScript - Ассоциативный массив в формате JSON

Более подробно познакомиться с форматом JSON можно в следующей статье: JavaScript - Формат данных JSON