<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Ассоциативный массив в JS

Ассоциативный массив в JS

Ассоциативный массив в JS – это разновидность объекта. Чем ассоциативный массив отличается от обычного массива? Разгадка кроется в его названии, мы знаем, что элементы обычного массива хранятся под номерами (индексами), тогда, как, элементы ассоциативного массива, под именами. Имена мы придумываем сами, исходя из наших ассоциаций.

Как объявить ассоциативный массив?

Можно объявить пустой массив, представьте массив, как ящик стола, который пока пустой.

let zerro = {};

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

  • наушники - accessories
  • шоколадка - product
  • флакон духов – perfume

Теперь запишем это в виде ассоциативного массива. Данный синтаксис так же применяется для описания JSON объектов. Все предметы (элементы) лежащие в ящике стола распределяем по своим ячейкам, дальше будем ячейки называть ключами, а предметы – значениями, лежащими под разными ключами.

let box = {
  "accessories" : "наушники", // "ключ" : "значение",
  "product" : "шоколадка",
  "perfume" : "флакон духов",
};
console.log(box);

В консоли вывелся объект со своими свойствами (ключами) и их значениями.

Ассоциативный массив в JS.

К любому из ключей можно обратиться непосредственно и выведется его значение.

Первый способ:

console.log(box['perfume']);

Второй способ:

console.log(box.perfume);

Оба способа, приводят к одинаковому результату.

Ассоциативный массив в JS.

Как изменить значение ключа?

Указывает название объекта, ключ и новое название значения.

box.product = "конфетка";

Отныне, вместо шоколадки, в ящике стола, будет лежать конфетка.

Ассоциативный массив в JS.

Возникает законный вопрос, а зачем существует два синтаксиса обращения к элементам массива? Ведь в программировании ничто не делается просто так.

Добавим к нашему объекту новый ключ, состоящий из слов с пробелами между ними.

"user login" : 123, // цифра пишется без кавычек, это не строка

А теперь, попробуем обратиться к новому элементу массива через точку. Программа проигнорирует второе слово login, после пробела, а ключа под названием user, у нас нет, это приведет к ошибке.

console.log (box.user login); // ошибка

Однако, если прописать ключ (содержащий пробел) в виде строки в квадратных скобках, никакой ошибки не возникнет.

console.log( box['user login'] );

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

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

Всегда надо исходить из того, что нам неизвестно заранее кол-во элементов в массиве, поэтому запускаем цикл for in для перебора массива. Объявляем переменную x, пишем обязательно слово in. Таким образом, мы указываем, что будем перебирать массив box. В каждом новом круге цикла, в переменную x будет попадать ключ из массива.

for (let x in box){

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

Порядок вывода определяется самим разработчиком. Это прямым образом зависит от верстки страницы. Для начала сделаем разметку в HTML-документе, куда и будет выводиться данный массив.

<div id="box_out"></div>

Код вывода вместе с циклом в JS


// Получили элемент c id="box_out" и присвоили его переменной box_primer
let box_primer = document.getElementById('box_out');
// Запустили цикл for in
  for (let x in box){
// внутри парного тега div выведется ключ массива (x), через двоеточие
// – его значение и тег переноса строки.
  box_primer.innerHTML += x +' : '+box[x]+ '<br> ';
}

В результате у нас выведутся элементы массива.

Ассоциативный массив в JS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

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