0Pricing
JavaScript Academy · Урок

map и filter — основы

Преобразуйте и отбирайте данные с помощью map и filter; объединяйте их в цепочки и избегайте мутаций для более надёжного кода

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

Введение в map и filter

Цель: преобразовывать элементы с помощью map и выбирать элементы с помощью filter.

  • map: преобразование
  • filter: выбор
  • Цепочка map → filter
  • Без изменения исходных данных
map и filter — основы — иллюстрация 1

Основы map

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

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
map и filter — основы — иллюстрация 2

Основы filter

filter возвращает только те элементы, для которых обратный вызов возвращает true (длина может измениться).

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
map и filter — основы — иллюстрация 3

Пример цепочки

Объединяйте шаги: используйте map для преобразования, а затем filter для выбора.

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
map и filter — основы — иллюстрация 4

Демонстрация без изменения данных

Неизменяемость: map/filter возвращают новые массивы, а исходный массив не изменяется.

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
map и filter — основы — иллюстрация 5

Советы по чистой работе с массивами

Советы:

  • Давайте небольшим обратным вызовам понятные имена (n, item).
  • Делайте цепочки короткими (не более 2–3 шагов).
  • Предпочитайте чистые обратные вызовы без побочных эффектов.
map и filter — основы — иллюстрация 6

Проверка map и filter

Быстрая проверка: преобразовать каждый элемент.

map и filter — основы — иллюстрация 7

Повторение

Повторение: используйте map для преобразования значений, фильтр — для выбора некоторых из них, а затем объединяйте эти методы, не изменяя исходный массив.

map и filter — основы — иллюстрация 8

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

Урок «map и filter — основы» бесплатный?

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

Чему я научусь в уроке «map и filter — основы»?

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

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

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

Сколько времени занимает урок «map и filter — основы»?

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

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

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

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

  1. map и filter — основы
  2. reduce, some/every и find — простые приёмы
← Назад к JavaScript Academy