JavaScript - Ассоциативные массивы
Статья, в которой рассмотрим что такое ассоциативный массив, как их можно создать в 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 можно в этой статье.
Например, так (в этом случае у вас отобразятся только овощи):
— при попытке добавления в массив пары ключ=>значения, при совпадении ключа — новый элемент не добавляется, ошибки нет
Таким образом, когда вы пытаетесь добавить в ассоциативный массив (объект) ключ, который уже имеется в нём, то он конечно в него ещё раз не будет добавлен. В этом случае просто произойдёт операция присвоения этому ключу нового значения. Если это значение такое же, то всё равно оно будет перезаписано новым значением, хоть оно и точно такое же.
Почему {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 нет этого ключа, то переходим к следующей итерации.