Методы массивов Javascript: что это такое и как с ними работать
Массивы в 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. Не так просто запомнить их все сразу. Но с опытом, решая задачи и используя методы в коде, станет проще. Главное – запомнить, как они работают и для чего нужны, а при необходимости вы всегда можете обратиться к данной статье, чтобы вспомнить синтаксис или посмотреть примеры.