Бесплатная миграция IT-инфраструктуры в облако

Методы массивов Javascript: что это такое и как с ними работать

Илья Ушаков
Илья Ушаков
Технический писатель
08 сентября 2022 г.
2167
12 минут чтения
Средний рейтинг статьи: 5

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

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

Использование .map() Для Итерации Элементов Массива В Javascript

Создание массива

Существует два способа инициализировать массив:

1. Используя литерал – квадратные скобки, внутри которых перечислены элементы через запятую. 

Синтаксис:

const ExampleArr = [element0, element1, …, elementN];

2. Используя конструктор Array().

Синтаксис:

const ExampleArr = new Array(element0, element1[, …[, elementN]]);
const ExampleArr = new Array(arrayLenght);

В обоих способах в качестве параметров передается elementN – это переменные, из которых создается набор значений ExampleArr. ArrayLenght – это количество элементов, их значение по умолчанию не определено. После создания массив необходимо заполнить. 

Создадим набор значений, который хранит данные об именах сотрудников некоторой компании двумя способами.

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

var EmployeArr = [‘Alex’, ‘Bob’, ‘Oliver’];

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

var EmployeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);

Доступ к элементам массива 

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

Получим значение 2 элемента ранее созданного набора значений EmployeArr:

var EmployeArr = new Array( ‘Alex’, ‘Bob’, ‘Oliver’ );
console.log ( EmployeArr[1] ); 

Нумерация индексов начинается с 0. Это стоит учитывать при обращении к N–ому элементу. Его индекс будет N–1. В нашем случае он будет равен 1.

Для изменения значения элемента на иное, нужно присвоить переменной новое значение, как это показано ниже:

var EmployeArr = new Array( ‘Alex’, ‘Bob’, ‘Oliver’ );
EmployeArr[1] = ‘Jack’;

Теперь EmployeArr содержит ‘Alex’, ‘Jack’ и ‘Oliver’.

Важное свойство, которое возвращает длину массива в JavaScript – length. Рассмотрим его применение на примере:

var EmployeArr = new Array( ‘Alex’, ‘Bob’, ‘Oliver’ );
console.log ( EmployeArr.length ); 

Длина EmployeArr в нашем случае будет 3.

Методы массивов

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

В статье будут рассмотрены большинство из существующих методов массивов в JavaScript, а для удобства они будут объединены в группы по принципу и логике работы. 

Добавление и удаление элементов

Чтобы добавить или удалить элементы из массива, используется 4 основных метода. Это: push, pop, shift и unshift.

  • push () – добавление одного или нескольких элементов в конец набора значений.
  • pop () – удаление последнего элемента.
  • shift () – удаление первого элемента.
  • unshift () – добавление одного или несколько элементов в начало.

Рассмотрим данные методы на примере. В комментариях будет указан результат выполнения каждого из них.

var arr = new Array( ‘Alex’, ‘Bob’, ‘Oliver’ );
arr.push ( ‘Jack’ ); // ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’
arr.unshift ( ‘Jacob’, ‘George’ ); //; ‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’
arr.pop (); // ‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’
arr.shift (); // ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’

Методы pop и shift возвращают значение удаленного элемента, а push и unshift – длину измененного массива.

Кроме перечисленных методов, стоит отметить универсальный метод splice. Благодаря ему можно вставить, удалить или заменить элементы.

Синтаксис метода splice ():

array.splice( startIndex, deleteCount [, element1[, element2[, ...]]] );

Параметры: 

  • startIndex – это индекс начала изменения набора значений. В случае, когда этот параметр будет превышать длину массива, значение стартового индекса будет равно длине. Либо примет разницу array.lenght и этого числа, если ввести отрицательное число. 
  • deleteCount – это число удаляемых элементов начиная с startIndex. Оно может быть равно 0. В этом случае с элементами ничего не произойдет. 
  • element1, element2, …. – элементы, которые будут добавлены в массив. Необязательный параметр.

Метод splice возвращает набор удаленных значений.

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

Ниже мы удалим 2 элемента, начиная с 3:

var Dog = new Array( ‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’ );
Dog.splice ( 2, 2 ); // ‘Beagle’, ‘Boxer’, ‘Dachshund’, ‘Dalmatian’

Теперь удалим 1 элемент, начиная с 4, и добавим ‘Doberman’:

var Dog = new Array( ‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’ );
Dog.splice ( 3, 1, ‘Doberman’ ); // ‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Doberman’, ‘Dachshund’, ‘Dalmatian’

Перебор элементов

За перебор элементов массива отвечает метод forEach.

Синтаксис метода forEach ():

arr.forEach( function callback( currentValue, index, array ), thisValue );

Параметры:

  • callback – это основной параметр, а именно функция обратного вызова, которая будет единоразово осуществлена для каждого элемента. Ее аргументы: currentValue, index, array.
    • currentValue - обрабатываемый элемент в наборе.
    • index - индекс этого элемента.
    • array – массив выбранного элемента.
  • thisValue – это необязательный параметр. Он принимает значение, которое будет использовано в качестве this при вызове функции.

Возвращаемое значение - всегда undefined.

Приведем два примера. Один с использованием thisValue, другой – без.

Пример без параметра thisValue:

var Dog = new Array( ‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’ );
var NewDog = [ ];
Dog.forEach ( function ( element ) {
NewDog.push ( element );
})

В результате получится новый набор значений NewDog, полностью повторяющий Dog.

Пример с параметром thisValue:

var numbers = [1, 2, 3, 4, 5];
var doubleNumbers = [ ];
var myObject = {
    double: function( element ) {
        return element * 2;
    }
};

numbers.forEach (
    function ( element ) {
        doubleNumbers.push( this.double( element ) ); 
    }, myObject
);

В результате получим набор doubleNumbers, который состоит из значений numbers, умноженных на два.

Поиск элемента в массиве

Осуществить поиск элементов помогут такие методы, как indexOf/lastIndexOf, includes, find/findIndex и filter. 

Методы indexOf и lastIndexOf ищут нужное значение среди всех и возвращают его индекс при первом совпадении. Первый выполняет поиск с начала массива, а второй – с конца. Оба метода вернут –1, когда искомое значение не будет найдено.

Синтаксис методов indexOf () и lastIndexOf ():

array.indexOf( searchElement, fromIndex )
array.lastIndexOf( searchElement, fromIndex )

Параметр searchElement одинаковый в обоих случаях. Это элемент, который нужно найти. С параметром fromIndex не так. Это стартовый для поиска индекс элемента. В случае использования indexOf, параметр fromIndex по умолчанию равен нулю. В методе lastIndexOf он равен array.lenght

Рассмотрим использование методов на примере:

var Employe = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘George’, ‘Oliver’, ‘Jack’);
Employe.indexOf ( ‘George’ );
Employe.lastIndexOf ( ‘George’ );

Результатом метода indexOf в примере выше будет 1, т.к. первое совпадение произошло с элементом, индекс которого равен 1. В случае с lastIndexOf результат будет равен 3.

Следующий метод поиска, которой мы рассмотрим - includes(). Он определяет, содержит ли набор значений определенный элемент, возвращая в зависимости от результата true или false.

Синтаксис метода includes ():

array.includes( searchElement, fromIndex )

Параметры точно такие же, как и в ранее рассмотренных методах indexOf и lastIndexOf. Единственное отличие между ними – возвращаемое значение. Параметр fromIndex по умолчанию равен 0.

Рассмотрим использование метода includes() на примере:

var Employe = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);
Employe.includes ( ‘Alex’ );
Employe.includes ( ‘Jacob’, 3 );

Результатом использования метода includes() в первом случае будет true. Во втором – false.

На практике в JavaScript часто используются массивы из объектов. В таком случае следует проводить поиск, используя методы find и findIndex.

Синтаксис методов find () и findIndex ():

arr.find( function callback( currentValue, index, array ), thisValue ); 
arr.findIndex( function callback( currentValue, index, array ), thisValue ); 

Параметры методов find и findIndex аналогичны forEach. При необходимости описание каждого параметра и аргумента можно посмотреть выше.

Рассмотрим использование методов find и findIndex на примере:

var Employe = new Array( ‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’ );
Employe.find ( element => element == ‘Jacob’ );
Employe.findIndex ( element => element == ‘Jacob’ );

Возвращаемое значение при выполнении метода find будет ‘Jacob’, метода findIndex – 0.

Рассмотренные методы find и findIndex подходят для поиска одного объекта. Если же задача найти несколько, то ее можно решить с помощью другого метода - filter(). 

Синтаксис метода filter ():

var filteredArray = arr.filter( function( currentValue, index, array ), thisValue ); 

Параметры данного метода, как и у прошлых двух аналогичны параметрам метода forEach.

Разберем случай, в котором будем искать работников, отработавших меньше двух лет:

var Employe = [ 
{name: “Jacob”, experience: 3},
{name: “George”, experience: 1},
{name: “Alex”, experience: 1},
{name: “Bob”, experience: 4}
];

var result = Employe.filter( element => element.experience <2 );

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

Методы преобразования массива

Последняя группа методов массивов в JavaScript, которая будет рассмотрена в данной статье – это методы преобразования массива. К ним можно отнести: map, flat, flatmap, sort и reverse. Рассмотрим каждый из них более подробно ниже.

Map() организовывает новый набор значений с результатом вызова указанной callback–функции для каждого элемента.

Синтаксис метода map ():

var newArray = array.map( function( currentValue, index, arr ), thisValue ); 

В очередной раз видим такие же параметры, как у ранее рассмотренных методов.

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

Рассмотрим пример, который уже применялся ранее для forEach. В нём все данные из набора удваивались. Теперь вместо forEach будет map.

var numbers = [1, 2, 3, 4, 5];
var doubleNumbers = numbers.map( 
    function double( element ) {
        return element * 2;
    }
);
console.log( doubleNumbers );

В результате получится новый набор значений doubleNumbers состоящий из чисел 2, 4, 6, 8, 10. 

Используя метод map, количество строк кода заметно уменьшилось в сравнении с forEach. Также метод forEach используется только для перебора и ничего не возвращает. Map() в свою очередь возвращает новый массив такой же длины, что и оригинальный.

Flat() позволяет взаимодействовать с вложенным набором значений. Он возвращает новый массив. Все значения подмассивов рекурсивно “поднимаются” до указанного уровня.

Синтаксис метода flat ():

var newArray = arr.flat(depth);

Depth - параметр уровней вложенности, на которое уменьшится мерность исходного массива. Если глубина вложенности неизвестна, можно указать значение параметра как Infinity. По умолчанию он равен единице.

Рассмотрим пример использования метода flat:

var arr = [1, 2, , [4, 5, [6, 7]]];
var NewArr = arr.flat(Infinity);

В результате получится NewArr [1, 2, 4, 5, 6, 7]. Также стоит отметить, что в наборе значений arr одно было пропущено. Метод flat удалил пустые слоты.

Два предыдущих метода можно объединить в один. Для этого существует flatmap. 

Синтаксис метода flatmap ():

var new_array = arr.flatMap( function callback( currentValue, index, arr ), thisValue )

Приведем пример использования flatmap:

var arr = [[1], [2], [3], [4], [5]];
var NewArr = arr.flatMap( element => element * 2 );

Результатом будет NewArr [2, 4, 6, 8, 10].

Метод sort позволяет отсортировать набор данных. Порядок сортировки по умолчанию соответствует порядку следования кодовых символов Unicode.

Синтаксис метода sort ():

array.sort( function( firstValue, secondValue ) ); 

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

Пример:

var EmployeArr = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);
EmployeArr.sort ();

Результатом сортировки будет EmployeArr [ ‘Alex’, ‘Bob’, ‘George’, ‘Jack’, ‘Jacob’, ‘Oliver’].

Также стоит упомянуть метод reverse. 

Синтаксис метода reverse ():

array.reverse();

В примере изменим порядок имён сотрудников в ранее отсортированном массиве.

var EmployeArr = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);
EmployeArr.sort ();
var reversed = EmployeArr.reverse();

Результатом метода reverse будет EmployeArr [ ‘Oliver’, ‘Jacob’, ‘Jack’, ‘George’, ‘Bob’, ‘Alex’ ].

Разместите свой JavaScript-проект в облаке

Заключение

В этой статье были рассмотрены основные, но не все методы массивов в JavaScript. Не так просто запомнить их все сразу. Но с опытом, решая задачи и используя методы в коде, станет проще. Главное – запомнить, как они работают и для чего нужны, а при необходимости вы всегда можете обратиться к данной статье, чтобы вспомнить синтаксис или посмотреть примеры.

Хотите внести свой вклад?
Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию
img-server
08 сентября 2022 г.
2167
12 минут чтения
Средний рейтинг статьи: 5
Пока нет комментариев