Массивы в JavaScript – это некая структура данных, ориентированная на хранение различных элементов, зачастую однотипных. Их главная особенность состоит в том, что они позволяют хранить некоторое количество значений в одной переменной. У них существуют интегрированные методы и свойства, благодаря которым возможно добавлять, удалять, обрабатывать, либо перебирать данные исходя из своих необходимостей и целей.
Все значения массива – это элементы. В свою очередь они имеют свой индекс. Переменные могут быть не только одного типа данных, но и разного. Это даст возможность организовывать более сложные структуры данных.
Создание массива
Существует два способа инициализировать массив:
1. Используя литерал – квадратные скобки, внутри которых перечислены элементы через запятую.
Синтаксис:
2. Используя конструктор Array().
Синтаксис:
В обоих способах в качестве параметров передается elementN – это переменные, из которых создается набор значений ExampleArr. ArrayLenght – это количество элементов, их значение по умолчанию не определено. После создания массив необходимо заполнить.
Создадим набор значений, который хранит данные об именах сотрудников некоторой компании двумя способами.
Первый способ:
Второй способ:
Доступ к элементам массива
Для получения доступа к элементу массива, применяются квадратные скобки с целочисленным значением его индекса внутри них.
Получим значение 2 элемента ранее созданного набора значений EmployeArr:
Нумерация индексов начинается с 0. Это стоит учитывать при обращении к N–ому элементу. Его индекс будет N–1. В нашем случае он будет равен 1.
Для изменения значения элемента на иное, нужно присвоить переменной новое значение, как это показано ниже:
Теперь EmployeArr содержит ‘Alex’, ‘Jack’ и ‘Oliver’.
Важное свойство, которое возвращает длину массива в JavaScript – length. Рассмотрим его применение на примере:
Длина EmployeArr в нашем случае будет 3.
Методы массивов
Методы работы с массивами в JavaScript позволяют разработчику эффективнее и удобнее работать с данными. Их использование поможет с преобразованием, сортировкой, перебором, добавлением, либо удалением элементов.
В статье будут рассмотрены большинство из существующих методов массивов в JavaScript, а для удобства они будут объединены в группы по принципу и логике работы.
Добавление и удаление элементов
Чтобы добавить или удалить элементы из массива, используется 4 основных метода. Это: push, pop, shift и unshift.
- push () – добавление одного или нескольких элементов в конец набора значений.
- pop () – удаление последнего элемента.
- shift () – удаление первого элемента.
- unshift () – добавление одного или несколько элементов в начало.
Рассмотрим данные методы на примере. В комментариях будет указан результат выполнения каждого из них.
Методы pop и shift возвращают значение удаленного элемента, а push и unshift – длину измененного массива.
Кроме перечисленных методов, стоит отметить универсальный метод splice. Благодаря ему можно вставить, удалить или заменить элементы.
Синтаксис метода splice ():
Параметры:
- startIndex – это индекс начала изменения набора значений. В случае, когда этот параметр будет превышать длину массива, значение стартового индекса будет равно длине. Либо примет разницу array.lenght и этого числа, если ввести отрицательное число.
- deleteCount – это число удаляемых элементов начиная с startIndex. Оно может быть равно 0. В этом случае с элементами ничего не произойдет.
- element1, element2, …. – элементы, которые будут добавлены в массив. Необязательный параметр.
Метод splice возвращает набор удаленных значений.
В примере рассмотрим несколько вариантов применения splice. В комментариях будет указан набор значений после выполнения метода.
Ниже мы удалим 2 элемента, начиная с 3:
Теперь удалим 1 элемент, начиная с 4, и добавим ‘Doberman’:
Перебор элементов
За перебор элементов массива отвечает метод forEach.
Синтаксис метода forEach ():
Параметры:
- callback – это основной параметр, а именно функция обратного вызова, которая будет единоразово осуществлена для каждого элемента. Ее аргументы: currentValue, index, array.
- currentValue - обрабатываемый элемент в наборе.
- index - индекс этого элемента.
- array – массив выбранного элемента.
- thisValue – это необязательный параметр. Он принимает значение, которое будет использовано в качестве this при вызове функции.
Возвращаемое значение - всегда undefined.
Приведем два примера. Один с использованием thisValue, другой – без.
Пример без параметра thisValue:
В результате получится новый набор значений NewDog, полностью повторяющий Dog.
Пример с параметром thisValue:
В результате получим набор doubleNumbers, который состоит из значений numbers, умноженных на два.
Поиск элемента в массиве
Осуществить поиск элементов помогут такие методы, как indexOf/lastIndexOf, includes, find/findIndex и filter.
Методы indexOf и lastIndexOf ищут нужное значение среди всех и возвращают его индекс при первом совпадении. Первый выполняет поиск с начала массива, а второй – с конца. Оба метода вернут –1, когда искомое значение не будет найдено.
Синтаксис методов indexOf () и lastIndexOf ():
Параметр searchElement одинаковый в обоих случаях. Это элемент, который нужно найти. С параметром fromIndex не так. Это стартовый для поиска индекс элемента. В случае использования indexOf, параметр fromIndex по умолчанию равен нулю. В методе lastIndexOf он равен array.lenght.
Рассмотрим использование методов на примере:
Результатом метода indexOf в примере выше будет 1, т.к. первое совпадение произошло с элементом, индекс которого равен 1. В случае с lastIndexOf результат будет равен 3.
Следующий метод поиска, которой мы рассмотрим - includes(). Он определяет, содержит ли набор значений определенный элемент, возвращая в зависимости от результата true или false.
Синтаксис метода includes ():
Параметры точно такие же, как и в ранее рассмотренных методах indexOf и lastIndexOf. Единственное отличие между ними – возвращаемое значение. Параметр fromIndex по умолчанию равен 0.
Рассмотрим использование метода includes() на примере:
Результатом использования метода includes() в первом случае будет true. Во втором – false.
На практике в JavaScript часто используются массивы из объектов. В таком случае следует проводить поиск, используя методы find и findIndex.
Синтаксис методов find () и findIndex ():
Параметры методов find и findIndex аналогичны forEach. При необходимости описание каждого параметра и аргумента можно посмотреть выше.
Рассмотрим использование методов find и findIndex на примере:
Возвращаемое значение при выполнении метода find будет ‘Jacob’, метода findIndex – 0.
Рассмотренные методы find и findIndex подходят для поиска одного объекта. Если же задача найти несколько, то ее можно решить с помощью другого метода - filter().
Синтаксис метода filter ():
Параметры данного метода, как и у прошлых двух аналогичны параметрам метода forEach.
Разберем случай, в котором будем искать работников, отработавших меньше двух лет:
В результате использования метода получим новый массив, состоящий из двух работников, стаж работы которых меньше двух лет.
Методы преобразования массива
Последняя группа методов массивов в JavaScript, которая будет рассмотрена в данной статье – это методы преобразования массива. К ним можно отнести: map, flat, flatmap, sort и reverse. Рассмотрим каждый из них более подробно ниже.
Map() организовывает новый набор значений с результатом вызова указанной callback–функции для каждого элемента.
Синтаксис метода map ():
В очередной раз видим такие же параметры, как у ранее рассмотренных методов.
Возвращаемым значением у данного метода будет новый массив с элементами результата функции callback.
Рассмотрим пример, который уже применялся ранее для forEach. В нём все данные из набора удваивались. Теперь вместо forEach будет map.
В результате получится новый набор значений doubleNumbers состоящий из чисел 2, 4, 6, 8, 10.
Используя метод map, количество строк кода заметно уменьшилось в сравнении с forEach. Также метод forEach используется только для перебора и ничего не возвращает. Map() в свою очередь возвращает новый массив такой же длины, что и оригинальный.
Flat() позволяет взаимодействовать с вложенным набором значений. Он возвращает новый массив. Все значения подмассивов рекурсивно “поднимаются” до указанного уровня.
Синтаксис метода flat ():
Depth - параметр уровней вложенности, на которое уменьшится мерность исходного массива. Если глубина вложенности неизвестна, можно указать значение параметра как Infinity. По умолчанию он равен единице.
Рассмотрим пример использования метода flat:
В результате получится NewArr [1, 2, 4, 5, 6, 7]. Также стоит отметить, что в наборе значений arr одно было пропущено. Метод flat удалил пустые слоты.
Два предыдущих метода можно объединить в один. Для этого существует flatmap.
Синтаксис метода flatmap ():
Приведем пример использования flatmap:
Результатом будет NewArr [2, 4, 6, 8, 10].
Метод sort позволяет отсортировать набор данных. Порядок сортировки по умолчанию соответствует порядку следования кодовых символов Unicode.
Синтаксис метода sort ():
В качестве параметра может быть указана функция, определяющая порядок сортировки.
Пример:
Результатом сортировки будет EmployeArr [ ‘Alex’, ‘Bob’, ‘George’, ‘Jack’, ‘Jacob’, ‘Oliver’].
Также стоит упомянуть метод reverse.
Синтаксис метода reverse ():
В примере изменим порядок имён сотрудников в ранее отсортированном массиве.
Результатом метода reverse будет EmployeArr [ ‘Oliver’, ‘Jacob’, ‘Jack’, ‘George’, ‘Bob’, ‘Alex’ ].
Разместите свой JavaScript-проект в облаке
477 ₽/мес
657 ₽/мес
Заключение
В этой статье были рассмотрены основные, но не все методы массивов в JavaScript. Не так просто запомнить их все сразу. Но с опытом, решая задачи и используя методы в коде, станет проще. Главное – запомнить, как они работают и для чего нужны, а при необходимости вы всегда можете обратиться к данной статье, чтобы вспомнить синтаксис или посмотреть примеры.
