Массивы в JavaScript — это специальный тип данных, который предназначен для хранения коллекции элементов (часто однотипных). У массивов есть встроенные свойства и методы для добавления, удаления и получения элементов, а также для их перебора. Любому JavaScript-разработчик стоит хорошо знать эти методы, так как они здорово облегчают работу.

В этой статье мы разберем 15 встроенных методов объекта Array.prototype:

• forEach()
• find()
• findIndex()
• some()
• every()
• includes()
• reverse()
• map()
• filter()
• reduce()
• sort()
• concat()
• fill()
• flat()
• flatMap()

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

// вместо такого кода
myAwesomeArray.some(test => {
  if (test === "d") {
    return test
  }
})

// мы будем использовать такой
myAwesomeArray.some(test => test === "d")

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

forEach()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

Результат: undefined

Этот метод просто выполняет функцию-коллбэк для каждого элемента в массиве.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
// john
// Ali
// Mass

find()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

Результат: первый подходящий элемент массива или undefined

Функции-коллбэк должна вернуть true, если элемент соответствует определенным критериями, или false, если не соответствует. Если вернулся результат true, итерация прекращается. Результатом работы метода становится найденный элемент.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.find(element => element.id === 3) // {id: 3, name: "Mass"}
myAwesomeArray.find(element => element.id === 7) // undefined

findIndex()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

Результат: индекс первого подходящего элемента массива или -1

Работает аналогично методу find, но возвращает не сам элемент, а его индекс в исходном массиве.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.findIndex(element => element.id === 3) // 2
myAwesomeArray.findIndex(element => element.id === 7) // -1

some()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

Результат: true или false

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

const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some(test => test === "d") // true

every()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

Результат: true или false

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

const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every(test => test === "d") // false

const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every(test => test === "a") // true

includes()

Параметры метода: значение для сравнения, индекс, с которого нужно начинать поиск (необязательный, по умолчанию — 0)

Результат: true или false

Работает аналогично методу some, то есть проверяет, есть ли в массиве хоть один подходящий под условие элемент. Однако в отличие от some принимает не функцию, а конкретное значение для сравнения. Сравнение строгое.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.includes(3) // true
myAwesomeArray.includes(8) // false
myAwesomeArray.includes('3') // false

reverse()

Результат: «перевернутый массив»

Мутация исходного массива: да, «переворот» массива происходит «на месте», без создания копии

Метод обращает порядок следования элементов массива — «переворачивает» его. Последний элемент становится первый, предпоследний — вторым и т. д.

const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse() // ['a', 'b', 'c', 'd', 'e']

map()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

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

Мутация исходного массива: нет

Функция-коллбэк получает элемент исходного массива и должна вернуть преобразованный элемент для нового массива.

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x) // [25, 16, 9, 4, 1]

filter()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

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

Мутация исходного массива: нет

Функция-коллбэк должна «фильтровать» элементы исходного массива, возвращая для них true (элемент удовлетворяет условию и должен быть в результирующем массиве) или false (элемент не удовлетворяет условию).

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass")
// [ {id: 3, name: "Mass"}, {id: 4, name: "Mass"} ]

reduce()

Параметры метода: функция-коллбэк, начальное значение аккумулятора

Параметры функции-коллбэка: текущее накопленное значение, текущий элемент массива, его индекс в исходном массиве, сам массив

Результат: «накопленное значение» аккумулятора

Коллбэк этого метода при итерации по массиву получает не только текущий элемент, но и «накопленное значение» — accumulator. Функция может изменять его в зависимости от значения элемента и обязательно должна вернуть новое «накопленное значение». Результатом работы всего метода является именно аккумулятор, измененный во всех коллбэках.

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

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.reduce((accumulator, value) => accumulator * value)
// 1 * 2 * 3 * 4 * 5 = 120

sort()

Параметры метода: функция-компаратор для сравнения двух значений

Результат: отсортированный массив

Мутация исходного массива: да, сортировка происходит «на месте» без создания копии массива

Функция-компаратор получает элементы исходного массива попарно (порядок сравнения зависит от используемого алгоритма сортировки). Если первый элемент условно «меньше» второго, то есть должен идти в отсортированном массиве перед ним, компаратор должен вернуть любое отрицательное число. Если первый элемент «больше» второго, то нужно вернуть положительное число. Если же элементы условно «равны», то есть их порядок в отсортированном массиве не важен, функция должна вернуть 0.

const myAwesomeArray = [5, 4, 3, 2, 1]

// Сортировка по возрастанию
myAwesomeArray.sort((a, b) => a - b) // [1, 2, 3, 4, 5]

// Сортировка по убыванию
myAwesomeArray.sort((a, b) => b - a) // [5, 4, 3, 2, 1]

concat()

Параметры метода: массивы для объединения с исходным (количество параметров не ограничено)

Результат: новый массив, состоящий из элементов всех полученных массивов

Мутация исходного массива: нет

Метод просто объединяет несколько массивов в один

const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]

myAwesomeArray.concat(myAwesomeArray2) // [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

fill()

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

Результат: Массив с измененными значениями.

Мутация исходного массива: да

Этот метод заменяет текущие элементы массива на указанное значение — «заполняет» массив указанным значением.

const myAwesomeArray = [1, 2, 3, 4, 5]

// Первый аргумент (0) - само значение для заполнения
// Второй аргумент (1) - индекс элемента, с которого нужно начать замену
// Третий аргумент (3) - индекс элемента, на котором нужно закончить замену
myAwesomeArray.fill(0, 1, 3) // [1, 0, 0, 4, 5]

flat()

Параметры метода: глубина разворачивания (по умолчанию 1)

Результат: новый массив, состоящий из элементов развернутых подмассивов

Мутация исходного массива: нет

Если в вашем исходном массиве есть вложенные массивы, то этот метод «развернет» их, уменьшив «мерность».

const myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat() // [1, 2, 3, 4, 5]

const myAwesomeArray2 = [[[1, 2], [3, 4]], 5]
myAwesomeArray2.flat(2) // [1, 2, 3, 4, 5]

flatMap()

Параметры метода: функция-коллбэк, значение this для коллбэка (необязательный)

Параметры функции-коллбэка: текущий элемент массива, его индекс в исходном массиве, сам массив

Комбинация методов flat() и map(). При этом сначала отрабатывает map — к каждому элементу применяется функция-коллбэк, которая должна вернуть его модифицированную версию. После этого отрабатывает flat с глубиной 1- мерность массива уменьшается.

const myAwesomeArray = [[1], [2], [3], [4], [5]]
myAwesomeArray.flatMap(arr => arr * 10) // [10, 20, 30, 40, 50]

// то же самое с flat() + map()
myAwesomeArray.map(arr => arr * 10).flat() // [10, 20, 30, 40, 50]

Больше информации о массивах:

Работа с массивами в JavaScript