Вы здесь: Главная » JavaScript » ES6 » Работа с массивами объектов в JavaScript

Работа с массивами объектов в JavaScript

Если вы работали с массивами в JavaScript, то наверняка использовали ряд методов, которые позволяют перебрать все элементы массива и вывести их на экран или подсчитать сумму элементов-чисел. Однако для работы с реальными данными, которые передаются в сети в JSON-файлах или загружаются из базы данных вам, скорей всего, придется работать с массивами объектов.

Вывод массива с объектами

Разница между обычным массивом и массивом объектов не столь уж велика. Просто добавляется, как правило, точечный синтаксис при обращении к свойствам каждого объекта внутри массива. Например, мы можем сформировать нумерованный список при выводе информации о каждом объекте массива:

Нумерация списка начинается с нуля, для того чтобы сразу был понятен реальный индекс элемента в массиве. Имя животного выводится, как ${animal.name}, его вид - как ${animal.type} , а его возраст - как ${animal.age}. Имя выделено другим цветом.

Сортировка массива с объектами

Еще один момент связан с сортировкой массивов, в которых вместо чисел или строк находятся объекты. У каждого такого объекта может быть одно или несколько строковых свойств и одно или несколько числовых. Для сортировки по каждому из них стоит создавать свою функцию, т.к. передаваемые параметры могут быть разными. Например, мы можем написать такую функцию сортировки массива животных по свойству age:

Результат в консоли браузера нам выдаст список, в котором все животные разместились по возрастанию количества прожитых лет. Учтите, что метод array.sort() преобразует массив. Теперь элементы имеют другие индексы, чем при объявлении массива.

Массив объектов до сортировкиМассив объектов после сортировки
Рассмотрим еще сортировку по именам. Тут принцип точно такой же, но еще мы добавим функцию toLowerCase(), чтобы имена в верхнем и нижнем регистре отсортировывались по алфавитному порядку:

Результат выполнения сортировки в консоли браузера:

Сортировка по именам

Использование функций для вывода массива объектов

Давайте теперь несколько усложним себе задачу. Представим, что у нас есть кафе, в котором в виде объектов реализованы товары-блюда, которые можно выбирать, указывая их индекс и количество.

Для начала нам нужно сформировать сам массив объектов-блюд, каждый из которых внутри себя содержит такие свойства: название блюда, его фото, вес в граммах, цену в гривнах и количество в штуках (по умолчанию 1). Например, это выглядит таким образом:

Для оформления html-страницы нам понадобится ссылка на Bootstrap-4 с CDN и некоторые стили. Разметка будет простой:

Весь скрипт мы поместим в файл food-order.js. Вы можете назвать его по-другому, если захотите. Все основные html-теги мы будем выводить методом document.write(). Возможно, это не самый лучший способ, но он нагляден и дает понять, как работают функции.

При выводе блюд мы воспользуемся компонентом Bootstrap-4 Карточка с различными цветовыми классами для выделения тех или иных блюд. Кроме того, вам понадобится понимание того, как работает тернарный оператор в JavaScript.

Функция для вывода массива объектов

Выведем массив с помощью  функции printProduct(). В ней мы переберем все элементы массива методом forEach() и используем точечный снтаксис для обращения к нужным в разметке свойствам объекта:

Смотрим на полученный результат (открыть в новой вкладке):

Вывод количества продуктов

Следующая задача - изменить количество блюд так, как если бы их заказали по телефону, например. Мы сделаем 2 функции: первая будет изменять свойство quantity в объекте по переданному индексу, а вторая - отвечать за вывод блюд с указанием их количества. Если свойство quantity будет больше 1, то при выводе мы будем менять классы для управления цветом.

Для того чтобы отделить блюда с количеством большим, чем 1, выделим их голубым цветом, применив класс bg-primary, badge-primary, border-primary Bootstrap-4.

Обратите внимание на строку

В данном случае мы используем шаблонные строки из стандарта ES6, но не для вывода конкретного значения переменной, а для получения этого значения в зависимости от проверяемого условия. Читается это так: если количество (переменная qn) больше 1, выводим класс "border-primary", иначе выводим класс "border-success". Сделано это для того, чтобы не вводить дополнительных переменных для проверки этого и подобных условий.

Посмотреть пример в новой вкладке.

Выбор одного продукта

Теперь создадим функцию, которая выведет один выбранный по указанному индексу продукт.

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

Вы можете открыть пример в новой вкладке.

Выбор одного продукта

Теперь создадим функцию, которая выведет один выбранный по указанному индексу продукт.

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

Вы можете открыть пример в новой вкладке.

Выбор нескольких продуктов

Недостатком предыдущей функции является то, что при повторном ее вызове будет выведен еще один блок со всеми блюдами, в котором выделено лишь одно. Хотелось бы получить сразу несколько выделенных блюд, если в функцию мы передаем несколько параметров, а именно индексов элементов массива food. Давайте запишем такую функцию.

Здесь вроде бы не так много изменений по сравнению с предыдущей функцией. Даже не переименован аргумент функции, зато перед ним добавились три точки... Это оператор rest, добавленный в стандарте ES6, который позволяет преобразовать переданные параметры в массив и использовать для этого массива все методы класса Array, встроенного в  JavaScript.

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

Результат работы функции (открыть в новой вкладке):

Выбор нескольких продуктов с указанием их количества

В последней функции хочется объединить выбор нескольких продуктов с указанием их количества. Вот только возникает вопрос - каким образом нам передавать параметры в эту функцию? До сих пор мы ограничивались либо одним параметром, либо несколькими, которые затем с помощью rest-оператора преобразовывали в массив. Почему бы не воспользоваться подобным подходом и здесь, но немного с другой стороны? Т.е. мы будем передавать несколько параметров, которые будут сами небольшими массивами из 2-х элементов, первый из которых отвечает за индекс объекта-блюда в массиве food, а второй - за количество таких блюд. Не очень понятно? Тогда смотрим на код функции.

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

Передаваемые в функцию параметрыВ функции chooseProductsQn() в строке 11 мы проверяем, если индекс передаваемого параметра (item[0]) и индекс продукта (ind) совпадают, то мы меняем классы для вывода html-разметки блока.

Давайте посмотрим, как функция отформатирует нам вывод блоков (открыть в новой вкладке).

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *