Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-03-10

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

2 <h2>Ассоциативный массив - что это?</h2>

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

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

5 <h2>Создаём ассоциативный массив в JavaScript</h2>

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

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

8 <h2>Ассоциативный массив: объект Map</h2>

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

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

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

12 Чтобы добавить элемент в массив (то есть в экземпляр объекта Map), используем метод set:

13 // добавляем в массив пару "ключ-значение" arr.set('key4','value4'); // добавляем в массив несколько пар "ключ-значение" arr.set('key5','value5'); arr.set('key6','value6'); // или так arr .set('key5','value5') .set('key6','value6');Когда в массиве такой ключ уже есть, установится новое значение, связанное с ним:

14 arr.set('key1','new value');Чтобы получить значение по ключу, используем метод get:

15 // получаем значение, которое ассоциировано с ключом 'key4' arr.get('key4'); // 'value4'Если хотим проверить, есть ли ключ в массиве, нам пригодится метод has:

16 // существует ли в массиве arr ключ key2 arr.has('key2'); // trueЧтобы удалить из ассоциативного JavaScript-массива элемент по имени ключа, применяем метод delete:

17 arr.delete('key1'); // trueЭтот метод вернёт true, если ключ существовал в массиве, иначе он вернёт false.

18 if (arr.delete('key1')) { console.log('Запись с ключом "key1" удалена из массива!'); } else { console.log('Запись с ключом "key1" в массиве не найдена!'); }Чтобы очистить массив и удалить все элементы, подойдёт метод clear.

19 arr.clear(); // очищаем массив arr arr.size; // 0 (число элементов)<h2>Перебор ассоциативного массива в JavaScript</h2>

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

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

22 for (let key of arr.keys()) { console.log(key); }Чтобы перебрать значения, воспользуйтесь итерируемым объектом MapIterator, который возвращается посредством методом values:

23 for (let value of arr.values()) { console.log(value); }Теперь посмотрим, как происходит перебор записей ассоциативного массива в JavaScript с применением метода entries:

24 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, поэтому его можно опустить:

25 for (let pair of arr) { console.log(`Ключ = ${pair[0]}, значение = ${pair[1]}`); }Вдобавок ко всему, перебрать ассоциативный массив в JavaScript мы можем посредством метода forEach.

26 arr.forEach(function(value,key) { console.log('key = ' + key +', value = ' + value); });Если нужно преобразовать ассоциативный массив в JSON и назад, подойдёт следующий способ:

27 let arr = new Map([ ['question', 'Текст вопроса...'], ['answer1', 'Ответ 1...'], ['answer2', 'Ответ 2...'], ]); // в JSON jsonStr = JSON.stringify([...arr]); // из JSON в Map mapArr = new Map(JSON.parse(jsonStr));<h2>Ассоциативный JavaScript-массив как объект</h2>

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

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

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

31 var myArray = { "ключ1": "значение1" ,"ключ2": "значение2" , ... }Теперь добавим в наш ассоциативный массив элемент (пару "ключ-значение"):

32 // добавляем в массив arr строку "текстовое значение", которое связано с ключом "key1" arr["key1"] = "текстовое значение" // добавляем в массив число 22, которое связано с ключом "key2" arr["key2"] = 22;Обратите внимание, что добавление элемента в JavaScript-массив выполнится лишь тогда, когда данного ключа в нём нет. Если ключ уже имеется, то выражение лишь поменяет значение уже существующего ключа.

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

34 arr.key1 = "текстовое значение" arr.key2 = 22;Чтобы получить значение элемента по ключу, подойдёт следующий синтаксис:

35 myArray["key1"]; myArray["key2"]; myArray.key1; myArray.key2;Чтобы получить число ключей (длину) ассоциативного массива, поступаем следующим образом:

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

37 Когда нужно проверить, существует ли ключ в нашем ассоциативном массиве:

38 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:

39 // myArray - ассоциативный массив for(key in myArray) { console.log(key + " = " + myArray[key]); }А чтобы преобразовать ассоциативный JavaScript-массив в JSON и назад, поступаем так:

40 - // Ассоциативный массив (объект) var myArr = { key1: "value1", key2: "value2", key3: "value3" }; // в JSON jsonStr = JSON.stringify(myArr); // из JSON в ассоциативный массив arr = JSON.parse(jsonStr); //получаем значение по ключу key1 (выводим в консоль) console.log(arr.key1);При написании статьи использовались материалы: - "<a>JavaScript - Ассоциативные массивы</a>"; - "<a>Ассоциат��вный массив как объект</a>"; - "<a>Настоящие ассоциативные массивы в JavaScript</a>".

40 + // Ассоциативный массив (объект) var myArr = { key1: "value1", key2: "value2", key3: "value3" }; // в JSON jsonStr = JSON.stringify(myArr); // из JSON в ассоциативный массив arr = JSON.parse(jsonStr); //получаем значение по ключу key1 (выводим в консоль) console.log(arr.key1);При написании статьи использовались материалы: - "<a>JavaScript - Ассоциативные массивы</a>"; - "<a>Ассоциативный массив как объект</a>"; - "<a>Настоящие ассоциативные массивы в JavaScript</a>".