Методы для работы с массивами в JavaScript

В этой статье мы рассмотрим наиболее популярные и часто используемые методы для работы с массивами в JavaScript. Рассмотрим их в следующе порядке:

1. Добавление/удаление элементов
2. Перебор массива
3. Поиск в массиве
4. Преобразование в массиве
5. isArray()

Методы для добавления и удаления элементов массива

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

push()

Этот метод добавляет новые элементы в конец массива. Принимает как аргумент элементы, которые нужно добавить, а возвращает длину нового массива:

  let arr = ["Apple", "Orange"];
  arr.push("Banana"); // добавление одного элемента
  arr.push("Cherry", "Lemon"); // добавление сразу нескольких элементов

  console.log(arr); // ["Apple", "Orange", "Banana", "Cherry", "Lemon"]

  let arrLength = arr.push("Lime"); // В переменной arrLength будет сохранена длина нашего массива - 6 элементов

  console.log('Length', arrLength); // Length 6

pop()

С помощью данного метода можно удалить последний элемент массива, а возвращает он значение этого элемента

Допустим вы хотите удалить элемент Lime, который мы добавили в массив раннее.

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];
  let removedEl = arr.pop(); // Удаляем элемент массива и получаем его значение, если это нужно для дальнейшей работы.
  console.log('Удаленный элемент - ', removedEl); // Lime
  
  arr.pop() // А так мы просто удалим последний элемент

shift()

С помощью данного метода мы можем извлечь элемент из начала массива.

Также есть «зеркальный» метод для добавления элемента в начало массива — unshift(). Только тут при добавлении нового элемента возвращается длинна нового массива (см. строку 9):

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];
  let firstEl = arr.shift();

  console.log('Первый элемент - ', firstEl);
  console.log('Массив', arr); // ["Orange", "Banana", "Cherry", "Lemon", "Lime"]

  let lengthArr = arr.unshift('Apple 2');
  console.log('Новый массив', arr); // ["Apple 2", "Orange", "Banana", "Cherry", "Lemon", "Lime"]
  console.log('Длинна нового массива', lengthArr); // 6

splice()

Этот метод более сложный… он как кухонный комбайн может делать всё — удалять, добавлять, заменять… Наиболее часто он используется если вам нужно произвести операции внутри массива, а не только с первыми или последними элементами.

shift(startIndex, deleteCount, item)
Итак, он принимает в качестве аргумента:

startIndex — индекс элемента, с которого нужно начать изменения

deleteCount — количество элементов для удаления. Если вы не хотите удалять, тогда нужно передать 0 в этот аргумент.

item — добавляемый элемент массива. Если третьим параметром ничего не передать, тогда будет произведено просто удаление

Теперь давайте рассмотрим на примере как удалить несколько элементов из массива:

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];
  arr.splice(0, 3); // удалит с 0 (включительно) по 3 элемент (не включая его)

  console.log(arr); // ["Cherry", "Lemon", "Lime"]

Чтобы удалить например элементы Bannana, Cherry нам нужно начать с индекса 2 и передать 2 (количество удаляемых элементов):

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];
  arr.splice(2, 2); // удалим элементы "Banana" и "Cherry"

  console.log(arr); // ["Apple", "Orange", "Lemon", "Lime"]

Теперь давайте добавим эти же элементы в середину массива:

  let arr = ["Apple", "Orange", "Lemon", "Lime"];
  arr.splice(2, 0, "Banana", "Cherry");

  console.log(arr); // ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"]

slice()

Этот метод возвращает новый массив, «вырезанный» по заданным в аргументах индексам. При этом оригинальный массив остается неизменным.

slice(start, end)

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

end — необязательный — индекс последнего элемента «вырезаемого» из массива. Если этот аргумент не передан, будет вырезан отрезок от start до конца массива.

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];

  let newArr = arr.slice(1, 3); // ["Orange", "Banana"]

  let newArr2 = arr.slice(3); // ["Cherry", "Lemon", "Lime"]

concat()

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

  let arr1 = ["Apple", "Orange", "Banana"];
  let arr2 = ["Cherry", "Lemon", "Lime"];

  let arr3 = arr1.concat(arr2); 

  console.log(arr3); // ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"]

Мы взяли массив arr2 и с помощью метода concat() соединили его с arr1. В итоге мы получили новый массив из 6 элементов.

Вы можете передать столько аргументов, сколько необходимо. Например, arr1.concat(arr2, arr3, arr4);

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

forEach()

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

currentElement — текущее значение в цикле

index — порядковый номер начиная с 0

array — перебираемый массив

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

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];
  arr.forEach((el, index) => {
    console.log(`${index} - ${el}`);
  });

  // В консоль выведется:
  // 0 - Apple
  // 1 - Orange
  // 2 - Banana
  // 3 - Cherry
  // 4 - Lemon
  // 5 - Lime

Массив также можно перебрать с помощью for…of — но это не метод, а оператор, поэтому он не рассматривается в данной статье.

Больше примеров по использованию метода forEach можете найти тут.

map()

Данный метод очень похож на метод forEach(), который мы рассмотрели ранее, но имеет одно основное отличие — он возвращает новый массив, в то время как forEach() ничего не возвращает, а просто выполняет callback для каждого элемента массива. Он имеет такие же параметры как и метод forEach()

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 2, 3, 4, 5];

arr1.forEach((item, index, arr) => {
    return arr[index] = item * 2;
})

const arr3 = arr2.map((item, index) => {
    return item * 2;
})

console.log('Первый массив:', arr1); // [2, 4, 6, 8, 10]
console.log('Второй массив:', arr2); // [1, 2, 3, 4, 5]
console.log('Третий массив:', arr3); // [2, 4, 6, 8, 10]

Также преимуществом данного метода является то, что к нему можно «чейнить» другие методы, например filter()/sort(). К примеру, вам нужно изменить какой-то массив, скажем добавить 2 к каждому значению, и потом отфильтровать его и выбрать только те элементы, которые делятся на 2 без остатка:

const arr = [1, 2, 3, 4, 5];

const multiple = arr.map(item => {
    return item + 2;
}).filter(item => {
    // Проверяем делится ли текущий элемент массива на 2 без остатка
    if (item % 2 === 0) return item;
})

console.log(multiple); // [4, 6]

Это пример выдуманный и вряд ли вы такое будете делать, но он был нужен только для того чтобы показать, что вы можете применить 2 метода подряд.

reduce()

Данный метод используется для прохождения по массиву с сохранением промежуточного значения. Допустим, у нас есть массив значений и нам нужно узнать общую сумму из этого массива:

const arr = [22, 35, 57, 41, 60];

const sum = arr.reduce((current, accum) => {
    return current + accum;
}, 0);

console.log(sum); // 215

Мы также могли бы использовать метод forEach() для этого, но reduce() может пригодиться и для более сложных операций.

Этот метод принимает следующий параметры:

someArray.reduce(callback(previousValue, currentItem, index, arr), initialValue)

callback — это функция, которая будет вызываться на каждой иттерации. Ее параметры:

previousValue — предыдущее значение
currentItem — текущее значение
index — индекс элемента массива
arr — иттерируемый массив

Второй параметр функции initialValue — начальное значение. В примере выше я задал начальное значение 0, но мы также могли задать его как 100 и тогда итоговый результат был бы 315.

Больше примеров, а также написание полифила для метода reduce()

Поиск в массиве

Если вам нужно найти какое-либо значение в массиве, тогда вы можете использовать следующие методы:

indexOf / lastIndexOf и includes

Эти 3 метода очень схожи, поэтому рассматриваются вместе. Допустим нам нужно определить индекс элемента в нашем массиве со значением Cherry для дальнейшей работы с ним, скажем для замены на Pineapple

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];
const index = arr.indexOf("Cherry")
console.log(index) // 3

arr[index] = 'Pineapple';
console.log(arr) // ['Apple', 'Orange', 'Banana', 'Pineapple', 'Lemon', 'Lime']

Сначала мы получили индекс элемента, затем присвоили ему новое значение. Если данный элемент не будет найден в массиве, то метод indexOf() вернет -1

lastIndexOf() — делает тоже самое, только начинает свой поиск с конца массива.

includes() — ищет значение сначала и возвращает true, если элемент присутствует в данном массиве

Также у этих методов есть второй аргумент — from — он нужен в том случае, если вы хотите начать поиск с определенного элемента.

find() / findIndex()

Эти методы возвращают первый найденный элемент / индекс элемента в массиве и прекращают работу. Возвращается -1 в случае, если элемента нет в массиве.

  let arr = ["Apple", "Orange", "Banana", "Cherry", "Lemon", "Lime"];
  let cherry = arr.find(item => item === "Cherry");
  let index = arr.findIndex(item => item === "Cherry");
  console.log(cherry, index); // Cherry 

filter()

Возвращает массив из всех элементов, которые удовлетворяют заданному условию. Возьмем, для более наглядного примера, массив из чисел от 1 до 6 и предположим нам нужно в новом массиве получить только числа меньшие или равные 4:

  let arr = [1, 2, 3, 4, 5, 6];

  let newArr = arr.filter(el => el <= 4);
  console.log(newArr);

some() / every()

Проверяют удовлетворяют ли элементы массива заданным условиям.

some() — проверяeт до первого элемента удовлетворяющего условиям и возвращает true или false.

every() — в этом методе каждый элемент должен соответствовать заданному условию.

  let arr = [1, 2, 3, 4, 5, 6];

  let some1 = arr.some(item => item >= 4); // true
  let some2 = arr.some(item => item <= 0); // false
  
  let every1 = arr.every(item => item >= 0); // true
  let every2 = arr.every(item => item >= 10); // false

Другие методы массивов

sort()

Данный метод, как вы поняли из названия, производит сортировку массива.

const arr = [57, 35, 22, 60, 41];

arr.sort();

console.log(arr); // [22, 35, 41, 57, 60]

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

const arr = [1, 7, 3, 15];

arr.sort();

console.log(arr); // [1, 15, 3, 7]

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

const arr = [1, 7, 3, 15];

arr.sort((a, b) => {
    return (a - b);
})
console.log(arr); // [1, 3, 7, 15]

// или в обратном порядке

arr.sort((a, b) => {
    return (b - a);
})
console.log(arr); //[15, 7, 3, 1]

reverse()

С помощью этого метода мы просто можем изменить порядок элементов в массиве на обратный:

const arr = ['Bill', 'John', 'Adam', 'Britt'];

arr.reverse();

console.log(arr);

split()/join()

И последние 2 метода помогают нам преобразовывать строки в массив и наоборот — из массива сделать строку.

const arr = ['Bill', 'John', 'Adam', 'Britt'];

const arrayToString = arr.join(', '); // Выведем каждый элемент через запятую
console.log(arrayToString); // 'Bill, John, Adam, Britt'

const str = 'Bill, John, Adam, Britt';

const stringToArray = str.split(', '); // В данном случае запятая выступает разделителем для элементов массива
console.log(stringToArray); // ['Bill', 'John', 'Adam', 'Britt']

Array.isArray()

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

const arr = ['Bill', 'John', 'Adam', 'Britt'];
const str = 'Bill, John, Adam, Britt';

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(str)); // false