Массивы и их методы

01 Что такое массив

До сих пор каждая переменная хранила одно значение: одно имя, одну цену, одну оценку. Но в жизни данные чаще идут списком: список покупок на Шохмансуре, расписание уроков на неделю, оценки всей группы за экзамен. Заводить переменные item1, item2, item3… неудобно: а если покупок будет сто?

Массив — это одна переменная, в которой хранится упорядоченный список значений. «Упорядоченный» значит, что у каждого значения есть своё место: первое, второе, третье и так далее.

Массив

упорядоченный список значений в квадратных скобках: ["нон", "чой"].

Элемент

одно значение внутри массива, например "нон".

Индекс

номер места элемента. Считается с нуля: 0, 1, 2…

Длина

сколько элементов в массиве. Узнаём через .length.

Как создать массив

Пишем квадратные скобки, внутри — значения через запятую. Пустые скобки [] — пустой массив, в который потом можно что-то добавить.

const shopping = ["нон", "чой", "шакар", "зардолу"];
const scores = [78, 92, 65];
const empty = [];

console.log(shopping); // → ["нон", "чой", "шакар", "зардолу"]
console.log(scores);   // → [78, 92, 65]
console.log(empty);    // → []

Почему индексы начинаются с нуля

Индекс — это не «номер по порядку», а смещение: сколько шагов нужно сделать от начала массива, чтобы дойти до элемента. До первого элемента идти не нужно — ноль шагов, поэтому его индекс 0. До второго — один шаг, индекс 1. Так устроена память компьютера, и почти все языки программирования считают так же.

Отсюда простое правило: индекс последнего элемента = длина − 1. В массиве из 4 элементов последний индекс — 3.

Читаем элементы: индекс, length, at

const wagons = ["локомотив", "вагон-ресторан", "купе", "плацкарт"];

console.log(wagons.length);             // → 4
console.log(wagons[0]);                 // → локомотив
console.log(wagons[2]);                 // → купе
console.log(wagons[wagons.length - 1]); // → плацкарт
console.log(wagons.at(-1));             // → плацкарт
console.log(wagons.at(-2));             // → купе

wagons[wagons.length - 1] — классический способ взять последний элемент: длина 4, значит последний индекс 3. Современный способ короче: wagons.at(-1). Метод at понимает отрицательные числа: −1 — последний, −2 — предпоследний.

Меняем элемент по индексу

Обращаемся к ячейке по индексу и присваиваем новое значение — старое просто заменится.

const schedule = ["HTML", "CSS", "JavaScript"];
schedule[1] = "Figma";

console.log(schedule);     // → ["HTML", "Figma", "JavaScript"]
console.log(schedule[5]);  // → undefined
console.log(schedule[-1]); // → undefined

Если обратиться к индексу, которого нет, JavaScript не выдаст ошибку, а вернёт undefined — «здесь ничего нет». Обратите внимание: schedule[-1] тоже undefined. Отрицательные индексы в квадратных скобках не работают — для этого есть at(-1).

Разные типы в одном массиве

const student = ["Мадина", 19, true, null];
console.log(student);        // → ["Мадина", 19, true, null]
console.log(student.length); // → 4

Так писать можно, но на практике в одном массиве обычно хранят однотипные данные: только цены, только имена, только оценки. С таким массивом проще работать — все элементы можно обработать одинаково.

const-массив всё равно можно менять

Это удивляет почти всех. const запрещает переприсвоить переменную, то есть положить в неё другой массив. Но менять содержимое того же массива можно.

const cart = ["нон"];
cart[1] = "чой";
console.log(cart); // → ["нон", "чой"]

const cart = ["нон"];
cart = ["самбуса"]; // пытаемся положить в переменную другой массив

Перебор массива циклом

Чаще всего с массивом нужно что-то сделать для каждого элемента. Вы уже знаете цикл for — он отлично подходит, когда нужен индекс.

const grades = [5, 4, 5, 3];

for (let i = 0; i < grades.length; i++) {
  console.log(`Оценка №${i + 1}: ${grades[i]}`);
}
// Выведет:
// Оценка №1: 5
// Оценка №2: 4
// Оценка №3: 5
// Оценка №4: 3

Если индекс не нужен, удобнее for...of: на каждом шаге в переменную попадает очередной элемент.

const fruits = ["зардолу", "гранат", "черешня"];

for (const fruit of fruits) {
  console.log(`Купить: ${fruit}`);
}
// Выведет:
// Купить: зардолу
// Купить: гранат
// Купить: черешня

Есть ли элемент в массиве: includes и indexOf

Два маленьких, но очень полезных метода. includes(значение) отвечает «да/нет», а indexOf(значение) возвращает индекс первого совпадения или -1, если ничего не нашлось.

const menu = ["оши палав", "самбуса", "курутоб"];

console.log(menu.includes("самбуса")); // → true
console.log(menu.includes("манту"));   // → false
console.log(menu.indexOf("курутоб"));  // → 2
console.log(menu.indexOf("манту"));    // → -1

Перед методами: мутирующие и немутирующие

Дальше в уроке будет много методов — встроенных функций, которые есть у каждого массива и вызываются через точку: arr.push(...). Все они делятся на две группы, и это деление надо держать в голове всегда.

Возвращайтесь к этой таблице, когда сомневаетесь. Каждый метод мы разберём подробно.

const shopping = ["нон", "чой", "шакар", "зардолу", "гранат"];

// 1. первая покупка
// 2. последняя покупка через length
// 3. последняя покупка через at
// 4. строка "Всего покупок: ..."

нон
гранат
гранат
Всего покупок: 5

const lessons = ["HTML", "CSS", "JavaScript", "Git"];

// 1. замените "CSS" на "Figma" по индексу
// 2. выведите список: "1. HTML", "2. ..." циклом for

1. HTML
2. Figma
3. JavaScript
4. Git

const scores = [78, 92, 65, 88, 100, 54, 91];

let sum = 0;
let excellent = 0;

// ваш код здесь

Сумма: 568
Средний балл: 81.1
Отличников (90+): 3
Есть 100 баллов: true
Позиция 54: 5

02 push и pop: добавить и убрать в конце

Самые частые операции со списком — положить что-то в конец и забрать последнее. Пользователь добавил товар в корзину — push. Нажал «Отменить последнее действие» — pop.

push — добавить в конец

const stack = ["нон", "нон"];
const newLength = stack.push("нон с кунжутом");

console.log(newLength); // → 3
console.log(stack);     // → ["нон", "нон", "нон с кунжутом"]

stack.push("патыр", "фатир"); // можно добавить сразу несколько
console.log(stack.length);    // → 5

pop — забрать последний

const orders = ["самбуса", "курутоб", "шакароб"];
const last = orders.pop();

console.log(last);   // → шакароб
console.log(orders); // → ["самбуса", "курутоб"]

const empty = [];
console.log(empty.pop()); // → undefined

Из пустого массива pop() вернёт undefined — ошибки не будет, просто забирать нечего.

let cart = ["нон"];
cart = cart.push("чой");
console.log(cart); // 2 — массив потерян!

const cart = ["нон"];
cart.push("чой");
console.log(cart); // ["нон", "чой"]

const queue = ["Фарход", "Мадина", "Рустам"];

const first = queue.shift();
console.log(first); // → Фарход
console.log(queue); // → ["Мадина", "Рустам"]

const len = queue.unshift("Абдулло-ака");
console.log(len);   // → 3
console.log(queue); // → ["Абдулло-ака", "Мадина", "Рустам"]

После shift и unshift у всех оставшихся элементов меняются индексы: каждый сдвигается на одно место. Помните об этом, если сохранили индекс в переменную заранее.

const stack = ["нон 1", "нон 2"];

// ваш код здесь

Лепёшек в стопке: 4
Взяли: нон 4
["нон 1", "нон 2", "нон 3"]

const queue = ["Фарход", "Мадина", "Рустам"];

// ваш код здесь

Обслужили: Фарход
["Абдулло-ака", "Мадина", "Рустам", "Зарина"]
В очереди: 4

const history = ["ввёл имя", "выбрал город", "нажал «Купить»"];

function undo(list) {
  // ваш код здесь
}

console.log(undo(history));
console.log(undo(history));
console.log(undo(history));
console.log(undo(history));
console.log(history);

Отменено: нажал «Купить»
Отменено: выбрал город
Отменено: ввёл имя
Нечего отменять
[]

03 splice: удалить, вставить, заменить в середине

push и pop работают только с концом. А что если нужно убрать остановку из середины маршрута или вставить новый урок между двумя другими? Для этого есть универсальный метод splice — «швейцарский нож» массивов.

start

индекс, с которого начинаем. Может быть отрицательным: −1 — последний элемент.

deleteCount

сколько элементов удалить, начиная со start. Если 0 — ничего не удаляем.

...items

необязательные элементы, которые вставятся на место start. Три точки означают «сколько угодно штук через запятую».

1. Удалить

const stops = ["Вокзал", "Зелёный базар", "Шохмансур", "Цирк", "Корвон"];
const removed = stops.splice(1, 2);

console.log(removed); // → ["Зелёный базар", "Шохмансур"]
console.log(stops);   // → ["Вокзал", "Цирк", "Корвон"]

1. Встаём на индекс 1 — это «Зелёный базар».
2. Удаляем 2 элемента: «Зелёный базар» и «Шохмансур».
3. Вставлять нечего — третьего аргумента нет. Оставшиеся элементы сдвигаются влево.
4. Возвращается массив удалённых — его можно сохранить или просто не использовать.

2. Вставить (deleteCount = 0)

const lessons = ["HTML", "CSS", "JavaScript"];
lessons.splice(2, 0, "Figma", "Git");

console.log(lessons); // → ["HTML", "CSS", "Figma", "Git", "JavaScript"]

Встаём на индекс 2, удаляем 0 элементов и вставляем два новых. Всё, что стояло с индекса 2 и дальше, сдвигается вправо.

3. Заменить (удалить и вставить одновременно)

const menu = ["самбуса", "манту", "курутоб"];
const old = menu.splice(1, 1, "оши палав");

console.log(old);  // → ["манту"]
console.log(menu); // → ["самбуса", "оши палав", "курутоб"]

Отрицательный start

const fruits = ["зардолу", "гранат", "дыня", "виноград"];
fruits.splice(-2, 1); // встаём на второй с конца — "дыня"

console.log(fruits); // → ["зардолу", "гранат", "виноград"]

const cities = ["Душанбе", "Худжанд", "Бохтар", "Куляб"];
const cut = cities.splice(1);

console.log(cities); // → ["Душанбе"]
console.log(cut);    // → ["Худжанд", "Бохтар", "Куляб"]

const stops = ["Вокзал", "Зелёный базар", "Шохмансур", "Цирк", "Корвон"];

// ваш код здесь

["Цирк"]
["Вокзал", "Зелёный базар", "Шохмансур", "Корвон"]

const plov = ["рис", "морковь", "лук", "масло"];

// ваш код здесь

["рис", "морковь", "мясо", "лук", "зира"]
5

const route = ["Душанбе", "Хорог", "Куляб", "Бохтар"];

function moveItem(arr, from, to) {
  // ваш код здесь
}

moveItem(route, 1, 3);
console.log(route);
moveItem(route, 2, 0);
console.log(route);

["Душанбе", "Куляб", "Бохтар", "Хорог"]
["Бохтар", "Душанбе", "Куляб", "Хорог"]

04 slice: скопировать часть массива

slice («ломтик, кусочек») берёт часть массива и возвращает её как новый массив. Исходный массив при этом не меняется совсем. Это один из самых безопасных методов.

Конец не включается

Самое важное правило: элемент с индексом end в результат не попадает. slice(1, 4) берёт индексы 1, 2 и 3 — «от 1 до 4, но 4 не трогаем».

const days = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];

console.log(days.slice(1, 4)); // → ["Вт", "Ср", "Чт"]
console.log(days.slice(3));    // → ["Чт", "Пт", "Сб"]
console.log(days.slice(-2));   // → ["Пт", "Сб"]
console.log(days.slice(0, -1)); // → ["Пн", "Вт", "Ср", "Чт", "Пт"]
console.log(days);             // → ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб"]

1. slice(3) — без end берём всё от индекса 3 до конца.
2. slice(-2) — отрицательный индекс считается с конца: последние два элемента.
3. slice(0, -1) — всё, кроме последнего: стоп-линия на последнем элементе.
4. Последняя строка показывает, что days остался прежним.

Полная копия: slice() без аргументов

Иногда нужен полный дубликат массива, чтобы менять его, не трогая оригинал. Для этого — slice() без аргументов или запись [...arr] (три точки «раскладывают» элементы в новые скобки).

const original = ["нон", "чой"];
const copy1 = original.slice();
const copy2 = [...original];

copy1.push("самбуса");
copy2.push("курутоб");

console.log(original); // → ["нон", "чой"]
console.log(copy1);    // → ["нон", "чой", "самбуса"]
console.log(copy2);    // → ["нон", "чой", "курутоб"]

const original = ["Фарход", "Мадина"];
const notCopy = original; // это та же самая ссылка
notCopy.push("Рустам");

console.log(original); // → ["Фарход", "Мадина", "Рустам"]

splice или slice? Классическая путаница

Названия отличаются одной буквой, а поведение — полностью. Запомните: в splice есть «p» — как в слове «попортить» исходник.

const a = [10, 20, 30, 40, 50];
const b = [10, 20, 30, 40, 50];

console.log(a.slice(1, 3));  // → [20, 30]
console.log(b.splice(1, 3)); // → [20, 30, 40]
console.log(a);              // → [10, 20, 30, 40, 50]
console.log(b);              // → [10, 50]

const temps = [38, 40, 41, 39, 37, 36, 42];

// ваш код здесь

[38, 40, 41]
[36, 42]
[38, 40, 41, 39, 37, 36, 42]

const menu = ["самбуса", "курутоб", "оши палав", "шакароб", "манту", "лагман", "чой", "нон"];
const perPage = 3;

function getPage(list, page) {
  // ваш код здесь
}

console.log(getPage(menu, 1));
console.log(getPage(menu, 2));
console.log(getPage(menu, 3));
console.log(getPage(menu, 4));

["самбуса", "курутоб", "оши палав"]
["шакароб", "манту", "лагман"]
["чой", "нон"]
[]

const likes = ["Фарход", "Мадина", "Рустам", "Зарина", "Шахром"];

function shorten(list, n) {
  // ваш код здесь
}

console.log(shorten(likes, 3));
console.log(shorten(likes, 10));
console.log(likes);

["Фарход", "Мадина", "Рустам", "…и ещё 2"]
["Фарход", "Мадина", "Рустам", "Зарина", "Шахром"]
["Фарход", "Мадина", "Рустам", "Зарина", "Шахром"]

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

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

Что такое колбэк

Колбэк (от английского callback — «обратный вызов») — это функция, которую мы отдаём методу, а он сам вызывает её для каждого элемента. Мы не пишем цикл — цикл уже спрятан внутри метода. Мы только объясняем, что сделать с одним элементом.

Чтобы колбэк не казался магией, напишем свой маленький «метод» на знакомом цикле. Именно так map устроен внутри:

function myMap(list, callback) {
  const result = [];
  for (const item of list) {
    result.push(callback(item)); // вызываем ВАШУ функцию для каждого элемента
  }
  return result;
}

const double = (n) => n * 2;
console.log(myMap([4, 7, 10], double)); // → [8, 14, 20]

Заметьте: мы передали double без скобок. Со скобками double() мы бы вызвали функцию сами и отдали её результат. А нам нужно отдать саму функцию, чтобы её вызывал метод.

map — встроенный способ

map («отобразить, сопоставить») проходит по каждому элементу, вызывает колбэк и складывает то, что колбэк вернул, в новый массив. Сколько элементов было — столько и останется.

const pricesKg = [18, 25, 12];
const pricesTwoKg = pricesKg.map((price) => price * 2);

console.log(pricesTwoKg); // → [36, 50, 24]
console.log(pricesKg);    // → [18, 25, 12]

Как это выполняется, шаг за шагом

Параметры колбэка: element, index, array

Метод передаёт колбэку не только элемент. Вторым аргументом приходит индекс, третьим — весь массив. Обычно нужен только первый, иногда — первый и второй. Названия можно давать любые, важен порядок.

const guests = ["Нилуфар", "Далер", "Сабрина"];
const numbered = guests.map((name, index) => `${index + 1}. ${name}`);

console.log(numbered); // → ["1. Нилуфар", "2. Далер", "3. Сабрина"]

const cities = ["душанбе", "худжанд", "хорог"];
const titles = cities.map((city) => city[0].toUpperCase() + city.slice(1));

console.log(titles); // → ["Душанбе", "Худжанд", "Хорог"]

Во втором примере колбэк берёт первую букву (city[0]), делает её заглавной (toUpperCase()) и приклеивает остаток строки (slice(1) работает и у строк). Это обычная фронтенд-задача: привести данные к красивому виду перед показом.

const prices = [10, 20, 30];

const wrong = prices.map((p) => { p * 2 });
console.log(wrong); // → [undefined, undefined, undefined]

const right = prices.map((p) => { return p * 2; });
console.log(right); // → [20, 40, 60]

const short = prices.map((p) => p * 2);
console.log(short); // → [20, 40, 60]

names.map((name) => console.log(name));

for (const name of names) {
  console.log(name);
}

const kg = [2, 5, 1, 3];
const pricePerKg = 18;

// const costs = ...
// console.log(costs);

[36, 90, 18, 54]

const guests = ["Нилуфар", "Далер", "Сабрина"];

// const items = ...
// console.log(items);

["<li>1. Нилуфар</li>", "<li>2. Далер</li>", "<li>3. Сабрина</li>"]

const harvest = [120, 95, 140, 80, 110];

// ваш код здесь

[200, 142.5, 230, 120, 185]
День 1: 200 сомони
День 2: 142.5 сомони
День 3: 230 сомони
День 4: 120 сомони
День 5: 185 сомони

06 filter: оставить только подходящие

filter («фильтр, сито») проходит по массиву и оставляет только те элементы, для которых колбэк ответил true. Во фронтенде это поиск, фильтры в каталоге, вкладки «Все / Непрочитанные».

const prices = [12, 45, 8, 120, 30];
const cheap = prices.filter((price) => price < 40);

console.log(cheap);  // → [12, 8, 30]
console.log(prices); // → [12, 45, 8, 120, 30]

В отличие от map, длина результата может быть любой: от нуля до длины исходного массива. Сами элементы filter не меняет — только решает, оставить их или нет.

Пустой результат и подсчёт через length

const scores = [55, 72, 91, 64, 98];

const failed = scores.filter((s) => s < 50);
console.log(failed);        // → []
console.log(failed.length); // → 0

const top = scores.filter((s) => s >= 90).length;
console.log(`Отличников: ${top}`); // → Отличников: 2

Если никто не подошёл, получаем пустой массив [], а не ошибку. А связка filter(...).length — самый простой способ посчитать, сколько элементов подходит под условие.

Фильтруем строки

const cities = ["Душанбе", "Хорог", "Худжанд", "Куляб", "Бохтар"];

const long = cities.filter((city) => city.length > 5);
console.log(long); // → ["Душанбе", "Худжанд", "Бохтар"]

const onH = cities.filter((city) => city.startsWith("Х"));
console.log(onH);  // → ["Хорог", "Худжанд"]

startsWith("Х") — метод строки: «начинается ли строка с этой буквы?». Возвращает true или false, поэтому отлично подходит для колбэка фильтра.

const products = [
  { name: "Нон", price: 4 },
  { name: "Чой кабуд", price: 25 },
  { name: "Самбуса", price: 6 },
];

const affordable = products.filter((item) => item.price <= 10);
console.log(affordable); // → [{ name: "Нон", price: 4 }, { name: "Самбуса", price: 6 }]

const goals = [3, 0, 2, 1, 4, 0, 2];

// ваш код здесь

[3, 2, 4, 2]
Результативных матчей: 4

const cities = ["Душанбе", "Худжанд", "Бохтар", "Куляб", "Хорог", "Истаравшан", "Пенджикент", "Турсунзаде"];

// ваш код здесь

["Истаравшан", "Пенджикент", "Турсунзаде"]
["Худжанд", "Хорог"]

const cart = ["нон", "чой", "нон", "самбуса", "чой", "нон"];

// ваш код здесь

["нон", "чой", "самбуса"]
Удалено повторов: 3

07 find и findIndex: найти первый подходящий

Часто нужен не список, а один конкретный элемент: товар с нужным названием, студент с нужным именем, первый жаркий день. Для этого есть find.

const temps = [36, 38, 41, 43, 39];

console.log(temps.find((t) => t > 40)); // → 41
console.log(temps.find((t) => t > 50)); // → undefined

Подходят и 41, и 43, но find останавливается на первом совпадении и возвращает сам элемент — не массив.

findIndex — где он стоит

const temps = [36, 38, 41, 43, 39];

const i = temps.findIndex((t) => t > 40);
console.log(i);                                  // → 2
console.log(`Жара началась в день ${i + 1}`);    // → Жара началась в день 3
console.log(temps.findIndex((t) => t > 50));     // → -1

Чем findIndex отличается от indexOf? indexOf ищет конкретное значение (indexOf(41)), а findIndex — элемент по условию («первый больше 40»).

find с объектами

Помните мини-превью объектов? С ними find раскрывается полностью: находим запись по имени и берём из неё нужное значение.

const students = [
  { name: "Фарход", score: 74 },
  { name: "Зарина", score: 95 },
  { name: "Далер", score: 58 },
];

const zarina = students.find((s) => s.name === "Зарина");
console.log(zarina);       // → { name: "Зарина", score: 95 }
console.log(zarina.score); // → 95

find или filter?

const students = [{ name: "Фарход", score: 74 }];
const found = students.find((s) => s.name === "Манижа");
console.log(found.score); // у undefined нет свойства score

const students = [{ name: "Фарход", score: 74 }];
const found = students.find((s) => s.name === "Манижа");

if (found) {
  console.log(found.score);
} else {
  console.log("Студент не найден"); // → Студент не найден
}

const rain = [0, 2, 0, 7, 12, 0, 3];

// ваш код здесь

7
Сильный дождь в день 4
undefined

const students = [
  { name: "Фарход", score: 74 },
  { name: "Нилуфар", score: 88 },
  { name: "Шахром", score: 52 },
  { name: "Манижа", score: 45 },
];

// ваш код здесь

88
Шахром
2

const slots = ["09:00", "09:30", "10:00", "10:30", "11:00"];
const busyMonday = ["09:00", "09:30", "10:30"];
const busyTuesday = ["09:00", "09:30", "10:00", "10:30", "11:00"];

function firstFree(slots, busy) {
  // ваш код здесь
}

console.log(firstFree(slots, busyMonday));
console.log(firstFree(slots, busyTuesday));
console.log(firstFree(slots, []));

10:00
Свободных мест нет
09:00

08 some: есть ли хотя бы один?

Иногда не нужно ничего искать или отбирать — нужен просто ответ «да» или «нет». Есть ли в корзине товар без наличия? Есть ли среди оценок двойка? Есть ли непрочитанные сообщения? Для этого есть some («некоторые, хотя бы один»).

const grades = [4, 5, 3, 5, 2];

console.log(grades.some((g) => g === 2)); // → true
console.log(grades.some((g) => g === 1)); // → false

some останавливается рано

Убедимся, что some действительно прекращает проверку на первом «да». Добавим в колбэк console.log:

const prices = [15, 40, 250, 30, 600];

const hasExpensive = prices.some((p) => {
  console.log(`Проверяю ${p}`);
  return p > 200;
});
console.log(hasExpensive);
// Выведет:
// Проверяю 15
// Проверяю 40
// Проверяю 250
// true

До 30 и 600 очередь не дошла: ответ уже известен. На больших массивах это экономит время.

Пустой массив → false

const messages = [];
console.log(messages.some((m) => m === "новое")); // → false

Логично: в пустом массиве нет ни одного элемента, значит нет и «хотя бы одного подходящего».

const scores = [55, 62, 48, 70];

// ваш код здесь

Есть отличники: false
Есть несдавшие: true

const allergens = ["орехи", "кунжут"];
const sambusa = ["тесто", "мясо", "лук", "кунжут"];
const shakarob = ["помидор", "огурец", "лук", "кашнич", "фатир"];

function hasAllergen(dish, allergens) {
  // ваш код здесь
}

console.log(`Самбуса опасна: ${hasAllergen(sambusa, allergens)}`);
console.log(`Шакароб опасен: ${hasAllergen(shakarob, allergens)}`);

Самбуса опасна: true
Шакароб опасен: false

const form1 = ["Мадина", "", "madina@mail.tj", "Душанбе"];
const form2 = ["Рустам", "   ", "rustam@mail.tj", "Бохтар"];
const form3 = ["Сабрина", "+992 90 123 45 67", "sabrina@mail.tj", "Куляб"];

function checkForm(fields) {
  // ваш код здесь
}

console.log(checkForm(form1));
console.log(checkForm(form2));
console.log(checkForm(form3));

Заполните все поля
Заполните все поля
Форма отправлена

09 every: все ли подходят?

every («каждый») — брат some. Он отвечает на вопрос: «все ли элементы подходят под условие?». Все ли товары в наличии? Все ли студенты сдали? Все ли поля формы правильные?

const scores = [72, 85, 60, 91];

console.log(scores.every((s) => s >= 60)); // → true
console.log(scores.every((s) => s >= 70)); // → false

every останавливается на первом «нет», так же как some останавливается на первом «да». Во втором вызове проверка закончилась на 60.

Пустой массив → true. Почему?

const cart = [];
console.log(cart.every((qty) => qty > 0)); // → true

Это кажется странным, но логика такая: every ищет нарушителя — элемент, который не подходит. В пустом массиве нарушителей нет, значит «все подходят». Как у водителя маршрутки: если в салоне никого нет, то никто и не сидит непристёгнутым.

some против every

Связь с логикой из прошлых уроков прямая. [a, b, c].some(check) — это как check(a) || check(b) || check(c). А [a, b, c].every(check) — как check(a) && check(b) && check(c).

const ages = [19, 22, 17];
const isAdult = (age) => age >= 18;

console.log(ages.some(isAdult));  // → true
console.log(ages.every(isAdult)); // → false
console.log(isAdult(19) && isAdult(22) && isAdult(17)); // → false

Обратите внимание: колбэк можно объявить заранее и передать по имени — ages.some(isAdult). Без скобок, как мы обсуждали в теме про колбэки.

const groupA = [72, 85, 60, 91];
const groupB = [72, 59, 88];

// ваш код здесь

Группа A сдала: true
Группа B сдала: false

const varzob = [24, 27, 22, 29, 26];
const dushanbe = [35, 38, 29, 40];
const noData = [];

function isComfortable(temps) {
  // ваш код здесь
}

console.log(isComfortable(varzob));
console.log(isComfortable(dushanbe));
console.log(isComfortable(noData));

true
false
true

function canCheckout(quantities) {
  // ваш код здесь
}

console.log(canCheckout([2, 1, 3]));
console.log(canCheckout([2, 0, 1]));
console.log(canCheckout([]));

Можно оформлять
Есть товар с нулевым количеством
Корзина пуста

10 reduce: свести массив к одному значению

reduce («свести, сократить») — самый мощный и самый непривычный метод урока. Он проходит по массиву и собирает из всех элементов одно значение: сумму, максимум, итоговую строку, подсчёт. Не торопитесь: разберём его медленно.

acc

аккумулятор — промежуточный итог. На первом шаге равен начальному значению, дальше — тому, что колбэк вернул на прошлом шаге.

current

текущий элемент массива.

начальное значение

второй аргумент reduce (после колбэка). С чего начинает кассир: обычно 0 для суммы.

Считаем чек шаг за шагом

const bill = [120, 45, 30, 75];

const total = bill.reduce((acc, current) => acc + current, 0);
console.log(total); // → 270

Колбэк вызывается 4 раза — по разу на каждый элемент. Каждый раз он получает старый итог и текущую цену, а возвращает новый итог.

Обратите внимание на главное: то, что колбэк вернул, становится acc на следующем шаге. Если колбэк ничего не вернёт (забыли return в фигурных скобках), на следующем шаге acc будет undefined.

Тот же код, но с «подглядыванием» в каждый шаг:

const bill = [120, 45, 30, 75];

const total = bill.reduce((acc, current) => {
  console.log(`acc = ${acc}, current = ${current}, вернём ${acc + current}`);
  return acc + current;
}, 0);
console.log(`Итого: ${total} сомони`);
// Выведет:
// acc = 0, current = 120, вернём 120
// acc = 120, current = 45, вернём 165
// acc = 165, current = 30, вернём 195
// acc = 195, current = 75, вернём 270
// Итого: 270 сомони

Всегда передавайте начальное значение

Начальное значение можно не писать — тогда acc на старте станет первым элементом массива, а обход начнётся со второго. Для суммы чисел это даже сработает. Но есть два случая, где это ломает программу.

Случай 1: пустой массив. Без начального значения reduce не знает, с чего начать, и выдаёт ошибку.

const emptyBill = [];
const total = emptyBill.reduce((acc, current) => acc + current);
console.log(total);

const emptyBill = [];
const total = emptyBill.reduce((acc, current) => acc + current, 0);
console.log(total); // → 0

Случай 2: элементы не того типа, что итог. Посчитаем общую длину имён. Без начального значения первым acc станет строка «Фарход», и дальше числа будут приклеиваться к строке.

const names = ["Фарход", "Мадина", "Рустам"];

const wrong = names.reduce((acc, name) => acc + name.length);
console.log(wrong); // → Фарход66

const right = names.reduce((acc, name) => acc + name.length, 0);
console.log(right); // → 18

Максимум

const temps = [36, 41, 38, 43, 39];
const max = temps.reduce((acc, t) => (t > acc ? t : acc), temps[0]);

console.log(max); // → 43

Здесь в acc хранится «самое большое на данный момент». На каждом шаге сравниваем: если текущий больше — он становится новым максимумом, иначе оставляем старый. Начинаем с первого элемента, а не с 0: вдруг все температуры отрицательные (зимой в Хороге бывает и −20).

Для простого максимума есть и короткий путь — Math.max(...temps). Но разобрать его через reduce полезно: так же решаются задачи, где готовой функции нет.

Подсчёт повторений (лёгкое знакомство с объектом)

Начальное значение может быть пустым объектом {}. На каждом шаге добавляем в него «счётчик» для текущего слова.

const orders = ["чой", "самбуса", "чой", "нон", "чой"];

const count = orders.reduce((acc, item) => {
  acc[item] = (acc[item] || 0) + 1;
  return acc;
}, {});
console.log(count); // → { чой: 3, самбуса: 1, нон: 1 }

Строка acc[item] = (acc[item] || 0) + 1 читается так: «возьми текущий счёт этого блюда, а если его ещё нет — возьми 0, прибавь 1 и запиши обратно». Квадратные скобки acc[item] — это способ обратиться к ключу, имя которого лежит в переменной. Подробнее — в уроке про объекты.

Склеиваем строку

const fruits = ["зардолу", "гранат", "дыня"];

const text = fruits.reduce((acc, fruit, i) => acc + (i === 0 ? "" : ", ") + fruit, "");
console.log(text); // → зардолу, гранат, дыня

console.log(fruits.join(", ")); // → зардолу, гранат, дыня

Для склейки есть готовый метод join(разделитель) — он возвращает строку из всех элементов. Используйте его, когда нужно просто склеить. А reduce пригодится, когда склейка сложнее: с условиями, с нумерацией, с подсчётом по ходу.

const bill = [15, 8, 25, 6, 12];

// ваш код здесь

Итого: 66 сомони

const harvest = [140, 95, 182, 120, 176];

// ваш код здесь

Рекорд: 182 кг
Меньше всех: 95 кг

const votes = ["Варзоб", "Искандеркуль", "Варзоб", "Ирам", "Искандеркуль", "Варзоб"];

// ваш код здесь

{ Варзоб: 3, Искандеркуль: 2, Ирам: 1 }
За Варзоб: 3

11 sort: сортировка

Сортировка нужна везде: товары «сначала дешёвые», студенты по алфавиту, матчи по дате. Метод sort упорядочивает элементы массива. Но у него есть две особенности, на которых спотыкаются почти все. Разберём обе.

Особенность 1: без колбэка sort сравнивает как строки

const prices = [5, 100, 25, 1];
prices.sort();

console.log(prices); // → [1, 100, 25, 5]

Почему 100 оказалось раньше 25? Без колбэка sort превращает каждый элемент в строку и сравнивает строки по символам, как слова в словаре: "1", "100", "25", "5". Строка "100" начинается с «1», поэтому стоит раньше "25", которая начинается с «2». Как в словаре «ананас» стоит раньше «банан», независимо от длины.

Колбэк-сравнитель: (a, b) => a - b

Чтобы сортировать числа правильно, передаём функцию сравнения (компаратор). sort сам много раз берёт пары элементов a и b и спрашивает колбэк: «кто из них должен стоять раньше?». Колбэк отвечает числом:

Теперь смотрите, почему a - b даёт сортировку по возрастанию. Пусть a = 5, b = 25: 5 − 25 = −20, отрицательное — значит 5 раньше 25. Пусть a = 100, b = 25: 100 − 25 = 75, положительное — значит 25 раньше 100. Меньшие числа уходят вперёд. А b - a делает всё наоборот — по убыванию.

const prices = [5, 100, 25, 1];

prices.sort((a, b) => a - b);
console.log(prices); // → [1, 5, 25, 100]

prices.sort((a, b) => b - a);
console.log(prices); // → [100, 25, 5, 1]

Сортировка строк: localeCompare

Для строк вычитание не работает ("Абдулло" - "Далер" — это NaN). Можно вызвать sort() без колбэка, но для русских имён он ошибается: заглавные буквы у него идут раньше строчных, а буква «Ё» вообще улетает в начало.

const names = ["манижа", "Фарход", "Абдулло"];
console.log([...names].sort()); // → ["Абдулло", "Фарход", "манижа"]
console.log([...names].sort((a, b) => a.localeCompare(b))); // → ["Абдулло", "манижа", "Фарход"]

const team = ["Жасур", "Ёдгор", "Евгений"];
console.log([...team].sort()); // → ["Ёдгор", "Евгений", "Жасур"]
console.log([...team].sort((a, b) => a.localeCompare(b))); // → ["Евгений", "Ёдгор", "Жасур"]

a.localeCompare(b) — метод строки, который сравнивает её с другой строкой «по-человечески», с учётом правил языка. Он сам возвращает отрицательное число, положительное или 0 — ровно то, что нужно sort. Для сортировки «от Я до А» поменяйте местами: b.localeCompare(a).

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

Колбэк получает два объекта, и мы сравниваем их нужное поле.

const products = [
  { name: "Курутоб", price: 35 },
  { name: "Самбуса", price: 6 },
  { name: "Оши палав", price: 30 },
];

products.sort((a, b) => a.price - b.price);
console.log(products[0].name);    // → Самбуса
console.log(products.at(-1).name); // → Курутоб

Особенность 2: sort меняет исходный массив

sort не создаёт новый массив — он переставляет элементы прямо в исходном. Если оригинальный порядок ещё нужен (например, порядок, в котором данные пришли с сервера), сначала сделайте копию.

const scores = [70, 95, 82];

const sorted1 = [...scores].sort((a, b) => b - a);
const sorted2 = scores.slice().sort((a, b) => b - a);
const sorted3 = scores.toSorted((a, b) => b - a);

console.log(sorted1); // → [95, 82, 70]
console.log(sorted2); // → [95, 82, 70]
console.log(sorted3); // → [95, 82, 70]
console.log(scores);  // → [70, 95, 82]

Третий способ — современный метод toSorted. Он делает то же, что sort, но возвращает новый массив и не трогает оригинал. Он появился в JavaScript недавно (2023 год) и работает во всех современных браузерах.

const km = [341, 203, 525, 100, 62];

// ваш код здесь

[62, 100, 203, 341, 525]
[525, 341, 203, 100, 62]

const group = ["Шахром", "Абдулло", "Манижа", "Далер", "Зарина", "Фарход"];

// ваш код здесь

["Абдулло", "Далер", "Зарина", "Манижа", "Фарход", "Шахром"]
["Шахром", "Абдулло", "Манижа", "Далер", "Зарина", "Фарход"]

const players = [
  { name: "Шахром", goals: 7 },
  { name: "Далер", goals: 12 },
  { name: "Рустам", goals: 7 },
  { name: "Абдулло", goals: 9 },
  { name: "Фарход", goals: 3 },
];

// ваш код здесь

1. Далер — 12
2. Абдулло — 9
3. Рустам — 7
4. Шахром — 7
5. Фарход — 3

12 Цепочки методов

Вы уже заметили: map, filter и slice возвращают новый массив. А у нового массива тоже есть все методы. Значит, можно сразу вызвать следующий метод через точку — получится цепочка. Так выглядит почти любой реальный код обработки данных на фронтенде.

Задача: в магазине на Корвоне взять товары дороже 100 сомони, сделать на них скидку 10% и посчитать сумму. Сначала по шагам, с промежуточными переменными:

const prices = [450, 60, 380, 15, 220];

const expensive = prices.filter((p) => p > 100);
console.log(expensive);  // → [450, 380, 220]

const discounted = expensive.map((p) => p * 0.9);
console.log(discounted); // → [405, 342, 198]

const total = discounted.reduce((acc, p) => acc + p, 0);
console.log(total);      // → 945

А теперь то же самое одной цепочкой. Каждый метод пишем с новой строки, начиная с точки, — так цепочку легко читать:

const prices = [450, 60, 380, 15, 220];

const total = prices
  .filter((p) => p > 100)       // [450, 380, 220]
  .map((p) => p * 0.9)          // [405, 342, 198]
  .reduce((acc, p) => acc + p, 0); // 945

console.log(`К оплате: ${total} сомони`); // → К оплате: 945 сомони

1. prices — исходные данные, 5 цен.
2. .filter(...) — остаются 3 дорогих товара. Возвращается новый массив.
3. .map(...) — к новому массиву применяется скидка. Снова новый массив той же длины.
4. .reduce(...) — массив сворачивается в одно число. Цепочка заканчивается: у числа уже нет методов массива.

Цепочка с объектами и сортировкой

const students = [
  { name: "Рустам", score: 54 },
  { name: "Мадина", score: 95 },
  { name: "Фарход", score: 88 },
  { name: "Нилуфар", score: 43 },
];

const honorBoard = students
  .filter((s) => s.score >= 60)
  .sort((a, b) => b.score - a.score)
  .map((s) => `${s.name} (${s.score})`)
  .join(", ");

console.log(honorBoard); // → Мадина (95), Фарход (88)

Здесь sort стоит после filter — и это безопасно: filter уже вернул новый массив, поэтому сортировка меняет его, а не исходный students.

const items = [
  { name: "Куртка", price: 450 },
  { name: "Шапка", price: 60 },
  { name: "Кроссовки", price: 380 },
  { name: "Носки", price: 15 },
  { name: "Рюкзак", price: 220 },
];

// ваш код здесь

[405, 342, 198]
К оплате: 945 сомони

const students = [
  { name: "Фарход", score: 88 },
  { name: "Мадина", score: 95 },
  { name: "Рустам", score: 54 },
  { name: "Зарина", score: 76 },
  { name: "Шахром", score: 61 },
  { name: "Нилуфар", score: 43 },
  { name: "Далер", score: 90 },
];

// ваш код здесь

["Далер", "Зарина", "Мадина", "Фарход", "Шахром"]
Средний балл сдавших: 82

const week = [
  { day: "Пн", temp: 34 },
  { day: "Вт", temp: 37 },
  { day: "Ср", temp: 40 },
  { day: "Чт", temp: 41 },
  { day: "Пт", temp: 38 },
  { day: "Сб", temp: 35 },
  { day: "Вс", temp: 39 },
];

function weekReport(days) {
  // ваш код здесь
}

weekReport(week);

Самый жаркий: Чт (41°)
Средняя: 37.7°
Жарче 38°: Ср, Чт, Вс
Был день прохладнее 30°: false