JavaScript Academy · Урок

Декларативное преобразование данных

Преобразуйте данные с помощью map, filter и reduce.

«Декларативное преобразование данных» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Декларативный и императивный подходы

Императивный код описывает HOW (циклы, счётчики, изменения состояния). Декларативный код описывает WHAT. Методы массивов, такие как map, filter и reduce, позволяют описывать преобразования без ручных циклов.

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

map: преобразование каждого элемента

map возвращает новый массив той же длины, в котором каждый элемент преобразован вашей функцией. Исходный массив не изменяется.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: выбор некоторых элементов

filter возвращает новый массив, содержащий только те элементы, для которых ваше условие возвращает истинное значение.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: свёртка в одно значение

reduce сворачивает массив в одно значение, накапливая результат. Передайте функцию свёртки и начальное значение.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Объединение операций в цепочку

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

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Практический конвейер

Объедините filter, map и reduce, чтобы одним выражением получить ответ на вопрос о наборе данных.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Преобразование в новые структуры

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

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce умеет строить что угодно

reduce предназначен не только для суммирования. С его помощью можно создавать объекты, группировать данные и даже заново реализовать map и filter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

Порядок имеет значение

Фильтрация до преобразования позволяет не преобразовывать элементы, которые всё равно будут отброшены. Для ясности и эффективности размещайте недорогие фильтры в начале цепочки.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Никаких изменений

Эти методы никогда не изменяют исходный массив. Благодаря этому конвейеры безопасны и предсказуемы и идеально соответствуют функциональному стилю.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap для вложенных результатов

Если map возвращает массивы, flatMap за один шаг выполняет map и разворачивает один уровень вложенности.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Быстрая проверка

Декларативные преобразования.

Итоги

Декларативное преобразование описывает WHAT, а не HOW. map преобразует, filter выбирает, а reduce сворачивает данные в одно значение; объединяйте их в понятные конвейеры. Ни один из них не изменяет исходный массив, ранняя фильтрация эффективна, а reduce может создавать структуры любого вида. Используйте flatMap, когда map возвращает массивы.

Часто задаваемые вопросы

Урок «Декларативное преобразование данных» бесплатный?

Да — полный текст урока «Декларативное преобразование данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Декларативное преобразование данных»?

Преобразуйте данные с помощью map, filter и reduce. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Декларативное преобразование данных»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy