Базовая работа с массивами в JavaScript

Содержание:

Программисты, начинающие работать с JS, сталкиваются с массивами и их функционированием. Много сложностей вызывает начало работы с ними. Информации по этому вопросу в Интернете много, но она вся разрозненная.

Ниже мы разберемся, с каких основ нужно начать работу с массивами. Вы получите полную базовую информацию. Она скомпонована не только под опытного программиста. Новички, которые только начинают свой путь, тоже могут воспользоваться ею.

Обращаемся к массиву

Чтобы обратиться к компоненту массива, необходимо ввести следующую команду:

console.log(array[0])

Что значит эта строка:

  • log показывает содержимое, находящееся в массиве;
  • array [0] представляет собой значение первого компонента массива.

Массивы начинаются с 0, поэтому нулевой компонент считается первым.

Выводим отдельный элемент

Подобное делается достаточно просто. Необходимо после переменной массива (arr) ввести [], внутри скобок необходимо написать номер элемента, например arr[3].

Небольшой пример:

Базовая работа с массивами в JavaScript

В программировании начало идет от нуля. Поэтому 3 – это не среда, а четверг.

Выводить можно разные элементы, а не только дни недели.

4 основных метода

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

Рассмотрим их:

  • map;
  • filter;
  • reduce;
  • spread.

map

Начинающие программисты часто пользуются им. Он дает возможность редактировать элементы массива.

Map получает функцию, которая вызывается на каждом из компонентов массива, затем он делает возвращение нового массива.

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

Базовая работа с массивами в JavaScript

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

Базовая работа с массивами в JavaScript

filter

Цель метода – это глубокая фильтрация массивов.

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

Функция делает возврат булевого значения:

  • true – сохранение компонента в массиве;
  • false – не сохраняем компонент.

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

Как пример, в массиве позволительно сохранять лишь нечетные цифры:

Базовая работа с массивами в JavaScript

Метод может использоваться для того, чтобы удалять компоненты внутри массива:

Базовая работа с массивами в JavaScript

reduce

Метод забирает массив значений и комбинирует их в единое целое. Он принимает 2 параметра:

  • функция Callback (редуктор);
  • опциональное стартовое значение.

Редуктор может принимать 4 параметра:

  1. Аккумулятор, собирающий в редукторы возвращенные значения.
  2. Значение массива.
  3. Индекс на данный момент.
  4. Массив, для которого вызывался метод.

Часто используется только 2 первых параметра.

Один из популярных примеров использования:

Базовая работа с массивами в JavaScript

В 1-й итерации аккумулятор представляет собой сумму и принимает первое значение 37. Возвращенное значение – 37 + n, здесь n = 12. В итоге получается 49.

Во 2-й итерации аккумулятор равняется 49. Возвращенное значение – 49 + 28 = 77.

Метод работает без сбоев. Его можно использовать для создания предыдущих 2 методов и других существующих.

Базовая работа с массивами в JavaScript

Методу reduce присваивается начальное значение []-аккумулятор.

spread

Метод используется с целью расширения значения одного массива внутри другого, а потом можно копировать и соединить несколько массивов.

Базовая работа с массивами в JavaScript

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

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

Базовая работа с массивами в JavaScript

Ассоциативные массивы

Язык JavaScript автоматически выявляют ключи для компонентов. Порой подобная процедура становится неудобной. Как пример, нам необходимо показать на мониторе название третьего дня недели, для этого мы пишем в квадратных скобках цифру 2, а не 3.

Чтобы исправить эту сложность, в JS предусмотрена возможность указания ключей в открытом виде – так, как необходимо программисту. Подобная процедура выполняется с использованием объектов (ассоциативных массивов). Они конструируются при помощи {}, внутри скобок записываются компоненты объекта в виде «ключ: значение».

Сделаем понедельник таким образом, чтобы он имел ключ 1, а не 0 (к остальным дням недели добавим единицу):

Базовая работа с массивами в JavaScript

Запись делается в таком виде: сначала идет ключ, далее идет : и за ним следует значение.

Ключ может иметь не только вид числа, он может также иметь вид строки. В качестве примера создадим массив, где ключами будут имена работников, а компонентами – их заработная плата:

Базовая работа с массивами в JavaScript

Выясняем заработную плату Васи:

Базовая работа с массивами в JavaScript

Разрешается не ставить кавычки возле строковых ключей:

Базовая работа с массивами в JavaScript

На ключи без знаков ‘’ ставятся заметные запреты. Им нельзя начинаться с цифр, нельзя ставить пробел внутри кавычек и цифровые символы.

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

Заключение

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

Еще раз вспомним, что мы прошли в статье:

  • обращение к массиву;
  • вывод отдельного элемента;
  • 4 метода;
  • ассоциативные массивы.

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

Хотите научиться большему? Если да, приглашаем вас на курс по обучению профессии Java-разработчика.

Возможно, вы сомневаетесь в актуальности профессии. Разработчики на языке Java являются достаточно востребованными на момент 2020 года. Связано это с тем, что Интернет с каждым годом только набирает обороты, растет популярность приложений, виджетов и разных игр. Где есть спрос, там есть и предложение, поэтому разработчики сейчас нужны компаниям.

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

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

По окончании курса вы получите сертификат, удостоверяющий вашу квалификацию. В компаниях наши сертификаты котируются как дипломы вуза. То есть, пройдя наш 4-месячный курс, вы получите знания на уровне того программиста, который отучился в вузе 4–5 лет.

Становитесь специалистом уже сегодня.

Спешите записаться! Количество мест ограничено.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!