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

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

Методы добавления/удаления

В главе Массивы мы уже говорили об этой группе методов. Среди них:

• arr.push(...items) - помогает добавить элементы в конец;
• arr.pop() - извлекает элемент из конца;
• arr.shift() - извлекает элемент из начала;
• arr.unshift(...items) - добавляет элементы в начало.

В этой главе мы расскажем о нескольких других методах.

Splice

Первый метод - это arr.splice. Он используется для добавления или удаления элементов в/из массива, а также для возвращения уже удаленных элементов. Таким образом, с помощью этого метода можно делать все: вставлять, удалять, заменять элементы.

Синтаксис выглядит так:

arr.splice(index[, deleteCount, elem1, ..., elemN])

Легче всего понять на примере.

В первом примере показано удаление элементов следующим образом:

В следующем примере мы удалим три элемента и заменим их на другие два:

Теперь вы можете заметить, что splice возвращает массив удаленных элементов, как показано ниже:

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

Slice

arr.slice - это простой метод, намного проще, чем arr.splice.

Его синтаксис следующий:

arr.slice([start], [end])

Этот метод возвращает новый массив, копируя в него все элементы от индекса start до end (но не включая end). Если и start, и end выражают отрицательные позиции из массива, то будет использовано значение end.

Он очень похож на метод end, но создает подмассивы вместо подстрок.

Вот пример:

Вы можете вызвать его без аргументов: str.slice создаст копию arr.

Concat

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

arr.concat(arg1, arg2...)

Он принимает любое количество аргументов (массивы или значения).

Результатом будет новый массив с элементами из arr, затем arg1, arg2 и так далее.

Если аргумент argN является массивом, все его элементы будут скопированы. В противном случае будет скопирован сам аргумент.

Например:

Итерация: forEach

Метод arr.forEach позволяет выполнить функцию для каждого элемента массива.

Вот синтаксис:

arr.forEach(function (item, index, array) {
  // ... do something with item
});

В следующем примере показаны все элементы массива:

// for each element call alert
["dog", "cat", "mouse"].forEach(alert);

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

В этой части мы рассмотрим методы поиска в массиве.

indexOf/lastIndexOf и includes

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

Что они делают:

• arr.indexOf(item, from) ищет элемент item, начиная с индекса from, и возвращает его к месту, где был найден, иначе -1.
• arr.lastIndexOf(item, from) аналогичен, но ищет справа налево.
• arr.includes(item, from) ищет элемент item, начиная с индекса from, и возвращает true, если элемент был найден.

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

Учтите, что эти методы используют сравнение ===. Таким образом, когда вы ищете false, он найдет false, а не ноль.

Find и FindIndex

Предположим, у вас есть массив с объектами и вы хотите найти объект с определенным условием. Тогда вам нужно использовать метод arr.find(fn) с этим синтаксисом:

let result = arr.find(function (item, index, array) {
  // if true is returned,the item is returned, and iteration is stopped
  // for falsy scenario returns undefined
});

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

• Элементом является item .
• Индексом будет его индекс index.
• Массивом является сам массив array.

В случае возврата true, поиск будет остановлен и будет возвращен элемент item-.

Например:

Фильтр

Этот метод ищет первый элемент, который заставляет функцию возвращать true.

let results = arr.filter(function (item, index, array) {
  // if true item is pushed to results and the iteration continues
  // returns empty array if nothing found
});

let result = arr.map(function (item, index, array) {
  // returns the new value instead of item
});

let value = arr.reduce(function (accumulator, item, index, array) {
  // ...
}, [initial]);