21.05.20 в 12:41

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

Теги: javascript, js, массив, объект, ассоциативные массивы

В этой статье мы поговорим про ассоциативные массивы. Поймём, что это такое, рассмотрим основные принципы работы с такими массивами. А также обсудим, как создать ассоциативный массив в JavaScript.

Ассоциативный массив — что это?

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

Мы можем представить ассоциативный массив в виде небольшого ящика, где находятся отделения. Каждое отделение имеет имя (это ключ) и содержимое (это значение). Естественно, чтобы найти нужное отделение в ящике, мы должны знать имя отделения (ключ). Зная это имя, мы сможем получить содержимое отделения (значение).

Создаём ассоциативный массив в JavaScript

Начиная с релиза ECMAScript 2015 (6), в JavaScript мы можем использовать для создания ассоциативного массива объект Map. До этого релиза в JavaScript не существовали типы данных, предназначенные лишь для создания ассоциативных массивов, поэтому создавались такие массивы с помощью объектов.

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

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

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

Давайте посмотрим, как создаётся ассоциативный массив (экземпляр объекта Map):

// создаём пустой ассоциативный массив
var arr1 = new Map();  

// создаём ассоциативный массив и добавляем три пары "ключ-значение"
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

Чтобы удалить из ассоциативного JavaScript-массива элемент по имени ключа, применяем метод 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 (число элементов)

Перебор ассоциативного массива в JavaScript

Как правило, перебор ассоциативного массива осуществляется посредством цикла 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);
}

Теперь посмотрим, как происходит перебор записей ассоциативного массива в JavaScript с применением метода 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]}`);
}

Вдобавок ко всему, перебрать ассоциативный массив в JavaScript мы можем посредством метода forEach.

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

Если нужно преобразовать ассоциативный массив в JSON и назад, подойдёт следующий способ:

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

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

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

Для создания пустого ассоциативного массива (объекта) нам подойдёт один из следующих вариантов:

// с помощью литерала объекта
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 способ (задействуем метод 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]);
}

А чтобы преобразовать ассоциативный JavaScript-массив в JSON и назад, поступаем так:

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

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

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

При написании статьи использовались материалы: — «JavaScript — Ассоциативные массивы»; — «Ассоциативный массив как объект»; — «Настоящие ассоциативные массивы в JavaScript».

Компьютерное зрение