Ассоциативные массивы в 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);
Комментарии: 57
Здравствуйте! Огромное спасибо за статью!
Я совсем новичек в изучении JS и решение некоторых задач вызывает затруднения. Буду очень благодарна, если сможете помочь.Суть задачи такая: есть два массива.
Необходимо написать функцию, которая будет генерировать объект пользователя с полями
Результат должен быть примерно такимname
,age
иjob
, заполненными случайным образом. Функция не должна принимать никаких параметров. Возраст пользователя может принимать значения между 18 и 30.
Бьюсь вторые сутки и всё никак((Добрый день! Код функции, генерирующей объект пользователя с полями
name
,age
иjob
:Пример на CodePen: codepen.io/itchief/pen/JjmwbvB
Спасибо огромное!
Со стрелочными функциями всё выглядит более аккуратно и компактно.Александр, доброго времени суток.
Только познаю js, увидела ваш сайт и хочу попросить помощи с ассоциативными массивами.Есть два инпута
Надеюсь понятно объяснила)a
иb
. При нажатии на кнопку функция должна получать изa
- ключ, изb
- значение и добавить их в массив. Все выводится вout-6
. Я сделала, но выводит, добавленный к массиву ключ и значение, только после второго клика. Не могу понять почему. Помогите, пожалуйста, и если можно с объяснением, что я сделала не так. Заранее спасибо.Добрый день! В функции, вы сначала создаёте переменную
out
со значением пустая строка. Далее в переменныеa
иb
складываете значения из соответствующих<input>
. Потом запускаете цикл, то есть перебираете свойства вa6
. Но вa6
вы не добавили новое ключ-значение. И поэтому вout
получаете строку только из того, что было вa6
на момент запуска циклаfor..in
. То, что вы добавили вa6
внутри циклаa6[a] = b
у вас сработает только при следующем запуске этого цикла. Поэтому это срабатывает у вас после второго клика.Поэтому, чтобы ваш пример корректно работал, нужно просто инструкцию
a6[a] = b;
поместить до цикла:Александр, спасибо вам большое!
Беру на вооружение, что иногда ошибку можно исправить путем переноса строки кода)Приветствую, Александр. Спасибо за ваши уроки.
Я только, только начал познавать JS и встала передо мной задача с массивом, которую я не в силах пока решить, но очень хочется.Получаю простой массив в виде цифровой секвенции.
например:но у массива динамически меняются значения и их количество
например:цифры это ключи к цветам
Как можно автоматически преобразовать цифровые значения в массиве на строки с названием цветов? Ну или получить новый массив?
в общем если такой: то получить: если: получить:Привет! Пожалуйста! Эту задачку можно решить очень большим количеством способов. Например, так:
Александр, большое спасибо! Я представлял себе более сложную функцию, но оказалось очень просто.
Здравствуйте! Заранее прошу прощения, если вопрос будет совсем уж глупым - я только начинаю познавать чудный мир JS!
Помогите, пожалуйста, с решением такой задачки:Есть два массива.
В одном лежат результаты:Во второй пишутся ответы пользователя:
Собственно, массив test формируется без проблем. А вот как на основе его элементов выбрать значения из answerArr? То есть если пользователь выбрал в качестве ответа на первый вопрос вариант "2", на второй - "4" и т.д., то из первой группы ответов вывести значение 2, из второй группы значение 4 и т.д. Проще говоря: как сделать выборку элементов из первого ассоциативного массива, используя значения из второго ассоциативного массива? Нигде не нашел таких примеров. Или я вообще велосипед изобретаю?Добрый день! Можно конечно попроще организовать структуру answerArr. В данном случае можно написать следующую функцию для получения текста вопроса из массива:
Огромное Вам спасибо! Действительно, очень изящное решение!
А вообще, так сказать, для общего развития - существуют какие-то функции или алгоритмы для сравнения двух ассоциативных массивов между собой (на предмет совпадений)?
Если нужно сравнить на полное совпадение, то можно через JSON:
Если необходимо отдельно по ключам, то, например, через forEach:
**
Выведите площадь круга числа после нажатия на кнопку…
**
так что буду благодарна если поможете
[
Переменной присвоено значение даты в формате '2025-12-31'. Преобразуйте эту дату в формат '31/12/2025'. (методы split для преобразования строки в массив чисел, arr[] – вызов элементов массива).
]
Эту задачку можно решить, например, так:
У меня такой вопрос: можно ли получить (записать в переменную) имя ключа из ассоциативного массива?
Мне нужно переделать ассоциативный массив [ [ «key1», «value1» ], [ «key2», «value2» ] ] в единый объект вида { key1: «value1», key2: «value2» }
А как можно вытащить content3, зная что это значение у третьего элемента?
Получить значение элемента по ключу можно так:
Я знаю, что это третий элемент (по порядку).
Например, так (в этом случае у вас отобразятся только овощи):
— при попытке добавления в массив пары ключ=>значения, при совпадении ключа — новый элемент не добавляется, ошибки нет
Таким образом, когда вы пытаетесь добавить в ассоциативный массив (объект) ключ, который уже имеется в нём, то он конечно в него ещё раз не будет добавлен. В этом случае просто произойдёт операция присвоения этому ключу нового значения. Если это значение такое же, то всё равно оно будет перезаписано новым значением, хоть оно и точно такое же.
Почему {0:5}[0] выдаёт ошибку, а +{0:5}[0] нет? Понятно, что операция "+" может пытаться превратить обьект в число, но в таком случае было бы NaN[0]. Со строками такой проблемы нет, т.е. {a:5}[a] работает нормально, и ({0:5})[0] тоже
Эту запись {0:5}[0] он не может понять и, следовательно, возникает ошибка «Uncaught SyntaxError: Unexpected token ':'». Если вы хотите её вычислить, то оберните в круглые скобки: ({0:5}[0]).В этом случае он поймёт, что вы хотите получить значение ключа «0».
Эта запись {a:5}[a] тоже не должна работать, скорее всего у вас где-то объявлена переменная «a».
Запись +{0:5}[0] не приводит к ошибке потому что здесь JavaScript понимает что ему нужно делать. Т.е. вычислить выражение, расположенное до «унарного плюса», а затем привести его к числу. Результат вычисления {0:5}[0] будет 5. Далее он 5 приводит к 5. Операнд «+» здесь выполняется самым последним, т.к. он имеет более низкий приоритет чем «[]».
Когда вы записываете так ({0:5})[0] вы тем самым расставляете приоритеты и JavaScript понимает что вы хотите. Т.к. операнд «()» имеет более высокий приоритет чем «[]».
Полный текст задачи:
При нажатии b-11 выполняете функцию f11. Функция должна получить ключ из i-11 и удалить запись из массива a11 с таким ключом. После этого вывести массив в out-11.
Мои попытки написать это тщетны.
есть данные:
хочу получить что-то такое при переборе объекта циклом for in:
Благодарю…
Например:
Затем сформировать нужный HTML код:
После этого вставить его, например, с помощью innerHTML в нужный элемент страницы.
Указали правильный путь!!!
Я совсем и забыл про replace!!!.. а то получал массив из 12 элементов и не знал как его дальше преобразовать.
Ещё раз СПАСИБО!!!
Подскажите, как из такой разметки получить данные (название — data_name, цена — price-item, количество — значение input name=«input_val») и записать в строку «название — цена — количество»
Попытался сделать таким образом, но как записать в строку не понимаю. Подскажите, пожалуйста, как сделать перебор и записать нужные данные в строку.
Чтобы вывести на экран 3 картинки со всеми свойствами. Если имя объектов совпадает, например просто «pic», то вопросов нет — Но когда имена разные «pic1», «pic2», «pic3» не понимаю какой синтаксис должен быть в цикле? Спасибо.
Это, например, можно выполнить с помощью цикла for..in:
Подскажите, а как можно достучаться до массивов вложенных в ассоциативный.
Допустим есть асс. массив:
Как из него получить имена, у которых вторым значением идет 0?
Это можно решить таким скриптиком:
let countryInform = {
Thailand: {
'population':'68 6158 58',
'capital': 'Bangkok'
},
China: {
'population': '1 404 328 611',
'capital':'Pekin'
},
India: {
'population':'1 349 857 000',
'capital': 'Deli'
},
}
Это можно выполнить с помощью одного цикла for..in:
Вывожу данные на html страницу из json'а.
Json примерно такой
Как организовать вывод по определенным ключам? Например выводить только «mr» или только «zk».
Или для каждого дива свой json и скрипт создавать? Правильно ли так?
q — это переменная, в которой находится ключ.
Далее проверяем, если в key нет этого ключа, то переходим к следующей итерации.