Основные методы массивов

map создаёт новый массив, преобразуя каждый элемент. filter создаёт новый массив с элементами, прошедшими проверку. find возвращает первый подходящий элемент. reduce сворачивает массив в одно значение.

Сначала короткое, но важное объяснение: все четыре метода принимают функцию — её называют callback (функция-аргумент). Метод сам вызывает эту функцию для каждого элемента массива. Стрелочную запись x => ... вы уже знаете из J10 — здесь она используется именно как короткий способ передать такую функцию. Почему функции можно передавать в другие функции и как это устроено, подробно разберём в J16 — пока воспринимайте это как данность.

Четыре основных метода массивов:

• map(callback) — создаёт НОВЫЙ массив:

const numbers = [1, 2, 3]; const doubled = numbers.map(x => x * 2); // doubled = [2, 4, 6] // numbers не изменился!

• filter(callback) — создаёт НОВЫЙ массив с подходящими элементами:

const numbers = [1, 2, 3, 4, 5]; const even = numbers.filter(x => x % 2 === 0); // even = [2, 4]

• find(callback) — возвращает ПЕРВЫЙ подходящий элемент:

const users = [{name: 'Анна', age: 25}, {name: 'Пётр', age: 30}]; const petr = users.find(u => u.name === 'Пётр'); // petr = {name: 'Пётр', age: 30}

• reduce(callback, initialValue) — сворачивает массив в одно значение:

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((acc, num) => acc + num, 0); // sum = 10

Правило:

• map → новый массив той же длины
• filter → новый массив (короче или той же длины)
• find → один элемент или undefined
• reduce → одно значение (число, строка, объект, массив)

map — как пропустить каждый элемент через трансформатор (конвейер). filter — как сито: пропускает только подходящее. find — как поиск: находит первое подходящее. reduce — как складывание: берёт все элементы и сворачивает в один результат.

**Самый простой:**

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6]

map проходит по каждому элементу и создаёт новый массив с результатом.

**Простой:**

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(x => x % 2 === 0);
const firstBig = numbers.find(x => x > 3);
console.log(even);    // [2, 4]
console.log(firstBig); // 4

filter возвращает массив подходящих. find возвращает первый подходящий.

**Реальный пример:**

const orders = [
  { product: 'Phone', price: 500 },
  { product: 'Laptop', price: 1200 },
  { product: 'Cable', price: 15 }
];

// Общая стоимость дорогих заказов (>100):
const total = orders
  .filter(o => o.price > 100)
  .reduce((sum, o) => sum + o.price, 0);

console.log(total); // 1700

Цепочка методов: сначала фильтруем, потом суммируем. Каждый метод возвращает результат для следующего.

**Неправильно:** Думать, что map изменяет исходный массив

**Почему:** map создаёт новый массив. Исходный не меняется.

**Правильно:** map возвращает НОВЫЙ массив. Присвойте результат переменной.

**Неправильно:** Путать find и filter

**Почему:** find возвращает один элемент, filter — массив.

**Правильно:** find → один элемент. filter → массив.

**Неправильно:** Забывать initialValue в reduce

**Почему:** Без initialValue и пустом массиве — TypeError. Всегда указывайте начальное значение.

**Правильно:** reduce((acc, val) => ..., 0) — всегда указывайте initialValue.

• map → новый массив (трансформация)
• filter → новый массив (фильтрация)
• find → один элемент или undefined
• reduce → одно значение (сворачивание)
• Все методы не изменяют исходный массив

Назад: Вы знаете массивы (J13) — теперь вы умеете эффективно с ними работать.

Вперёд: Следующий урок (J15) — перебор массивов: forEach и for...of подробнее.