ДокументацияJavaScriptМетоды массивов в JavaScript: map, filter, reduce, find, some, every
Начальный 12 мин чтения

Методы массивов в JavaScript: map, filter, reduce, find, some, every

Полный справочник по методам массивов JavaScript — forEach, map, filter, reduce, find, findIndex, some, every, includes, sort, flat. Примеры и частые задачи.

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

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

const nums = [1, 2, 3]
const empty = []
const mixed = [1, 'два', true, null]

const fromRange = Array.from({ length: 5 }, (_, i) => i + 1) // [1, 2, 3, 4, 5]
const filled = new Array(3).fill(0) // [0, 0, 0]

Массив — это объект. typeof [] возвращает 'object'. Для проверки:

Array.isArray([1, 2])   // true
Array.isArray('строка') // false
Array.isArray({})       // false

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

const fruits = ['яблоко', 'банан']

// В конец
fruits.push('груша')       // ['яблоко', 'банан', 'груша']

// В начало
fruits.unshift('ананас')   // ['ананас', 'яблоко', 'банан', 'груша']

// С конца — удаляет и возвращает
const last = fruits.pop()  // 'груша'

// С начала — удаляет и возвращает
const first = fruits.shift() // 'ананас'

// В любом месте — splice(индекс, сколько_удалить, ...что_добавить)
fruits.splice(1, 0, 'киви') // вставить 'киви' по индексу 1
fruits.splice(0, 1)         // удалить 1 элемент по индексу 0

Перебор: forEach

Выполняет функцию для каждого элемента. Ничего не возвращает:

const users = ['Анна', 'Иван', 'Мария']

users.forEach((name, index) => {
  console.log(`${index}: ${name}`)
})
// 0: Анна
// 1: Иван
// 2: Мария

Если нужно вернуть новый массив — используйте map.

map — преобразовать каждый элемент

Создаёт новый массив, применяя функцию к каждому элементу. Исходный массив не меняется.

const prices = [100, 200, 300]
const withDiscount = prices.map(price => price * 0.9)
// [90, 180, 270]

const users = [
  { name: 'Анна', age: 25 },
  { name: 'Иван', age: 30 },
]
const names = users.map(user => user.name)
// ['Анна', 'Иван']

// Индекс доступен вторым аргументом
const indexed = ['a', 'b', 'c'].map((item, i) => `${i}-${item}`)
// ['0-a', '1-b', '2-c']

filter — отфильтровать элементы

Возвращает новый массив с элементами, для которых функция вернула true:

const numbers = [1, 2, 3, 4, 5, 6]

const even = numbers.filter(n => n % 2 === 0) // [2, 4, 6]
const big = numbers.filter(n => n > 3)         // [4, 5, 6]

const users = [
  { name: 'Анна', age: 17 },
  { name: 'Иван', age: 25 },
  { name: 'Мария', age: 16 },
]
const adults = users.filter(user => user.age >= 18)
// [{ name: 'Иван', age: 25 }]

// Удалить falsy значения
const mixed = [0, 1, '', 'привет', null, undefined, false, true]
const truthy = mixed.filter(Boolean) // [1, 'привет', true]

find и findIndex — найти элемент

find возвращает первый подходящий элемент (или undefined). findIndex — его индекс (или -1):

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Иван' },
  { id: 3, name: 'Мария' },
]

users.find(user => user.id === 2)      // { id: 2, name: 'Иван' }
users.find(user => user.id === 99)     // undefined
users.findIndex(user => user.name === 'Мария') // 2

some и every — проверить условие

some — хотя бы один элемент удовлетворяет условию. every — все:

const ages = [18, 25, 30, 16]

ages.some(age => age < 18)   // true (есть 16)
ages.every(age => age >= 18) // false (не все совершеннолетние)

const scores = [85, 90, 92]
scores.every(s => s >= 80)   // true (все выше 80)

includes — содержит ли элемент

const fruits = ['яблоко', 'банан', 'груша']

fruits.includes('банан')  // true
fruits.includes('мандарин') // false

// С позиции (второй аргумент)
[1, 2, 3, 2].includes(2, 2) // true (ищет начиная с индекса 2)

Для поиска объектов используйте some:

const users = [{ name: 'Анна' }, { name: 'Иван' }]
users.some(u => u.name === 'Иван') // true

reduce — свернуть массив в одно значение

Принимает аккумулятор и текущий элемент, возвращает одно итоговое значение:

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

const sum = numbers.reduce((acc, num) => acc + num, 0) // 15

Разбор аргументов: (аккумулятор, текущий_элемент, индекс, массив) => новое_значение_аккумулятора. Второй аргумент reduce — начальное значение аккумулятора (0 в примере выше).

Подсчёт количества

const fruits = ['яблоко', 'банан', 'яблоко', 'груша', 'банан', 'яблоко']

const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1
  return acc
}, {})
// { яблоко: 3, банан: 2, груша: 1 }

Группировка

const users = [
  { name: 'Анна', role: 'admin' },
  { name: 'Иван', role: 'user' },
  { name: 'Мария', role: 'admin' },
]

const grouped = users.reduce((acc, user) => {
  if (!acc[user.role]) acc[user.role] = []
  acc[user.role].push(user)
  return acc
}, {})
// { admin: [{ name: 'Анна' }, { name: 'Мария' }], user: [{ name: 'Иван' }] }

Свёртка в объект

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Иван' },
]

const byId = users.reduce((acc, user) => {
  acc[user.id] = user
  return acc
}, {})
// { 1: { id: 1, name: 'Анна' }, 2: { id: 2, name: 'Иван' } }

sort — сортировка

Сортирует массив на месте (мутирует). Без аргумента — как строки:

[10, 2, 30, 1].sort() // [1, 10, 2, 30] — лексикографически!

Для чисел нужна функция сравнения:

const nums = [10, 2, 30, 1]

nums.sort((a, b) => a - b)  // [1, 2, 10, 30] — по возрастанию
nums.sort((a, b) => b - a)  // [30, 10, 2, 1] — по убыванию

Сортировка объектов:

const users = [
  { name: 'Анна', age: 25 },
  { name: 'Иван', age: 20 },
  { name: 'Мария', age: 30 },
]

users.sort((a, b) => a.age - b.age) // по возрасту

Если нужно сохранить оригинал — создайте копию:

const sorted = [...nums].sort((a, b) => a - b)

flat и flatMap

flat раскрывает вложенные массивы:

[1, [2, 3], [4, [5]]].flat()     // [1, 2, 3, 4, [5]] — глубина 1
[1, [2, 3], [4, [5]]].flat(2)    // [1, 2, 3, 4, 5] — глубина 2
[1, [2, 3], [4, [5]]].flat(Infinity) // [1, 2, 3, 4, 5]

flatMapmap + flat(1) за один проход:

const sentences = ['Привет мир', 'Как дела']

sentences.flatMap(s => s.split(' '))
// ['Привет', 'мир', 'Как', 'дела']

join — объединить в строку

['2025', '01', '15'].join('-') // '2025-01-15'
[1, 2, 3].join()               // '1,2,3' (разделитель по умолчанию — запятая)
['a', 'b', 'c'].join('')       // 'abc'

slice — извлечь часть

Не мутирует. Возвращает новый массив:

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

arr.slice(1, 3)   // [2, 3] — с индекса 1 по 3 (не включая 3)
arr.slice(2)      // [3, 4, 5] — с индекса 2 до конца
arr.slice(-2)     // [4, 5] — последние 2

reverse — перевернуть

Мутирует исходный массив:

const arr = [1, 2, 3]
arr.reverse() // [3, 2, 1]
console.log(arr) // [3, 2, 1] — изменён!

Без мутации:

const reversed = [...arr].reverse()

Цепочка методов

Методы, возвращающие массивы, можно вызывать цепочкой:

const users = [
  { name: 'Анна', age: 17, active: true },
  { name: 'Иван', age: 25, active: true },
  { name: 'Мария', age: 30, active: false },
  { name: 'Олег', age: 22, active: true },
]

const result = users
  .filter(user => user.active)
  .filter(user => user.age >= 18)
  .map(user => user.name)
  .sort()
// ['Иван', 'Олег']

Шпаргалка: мутирующие vs немутирующие

Не мутируют (возвращают новый массив/значение): map, filter, find, findIndex, some, every, includes, reduce, slice, flatMap, flat, concat, join

Мутируют (изменяют исходный массив): push, pop, shift, unshift, splice, sort, reverse, fill

Всегда проверяйте — если метод мутирует, и оригинал нужен — создайте копию через [...arr].

Итог

  • map — преобразовать, filter — отфильтровать, reduce — свернуть в одно значение
  • find — найти первый элемент, some/every — проверить условие
  • sort, reverse, splice — мутируют массив, остальные — нет
  • Цепочка методов — мощный инструмент, пишите читаемый код