Массивҳо ва методҳои онҳо

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 «sp» ҳаст — мисли калимаи spoil (вайрон кардан): аслро вайрон мекунад.

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 Callback ва map: ҳар унсурро табдил додан

Минбаъд методҳое меоянд, ки функсия-ро мегиранд. Ин ғояи калидии тамоми дарс аст, бинобар ин онро хеле бодиққат ҷудо мекунем.

Callback чист

Callback (аз англисии callback — «даъвати баръакс») — функсияест, ки мо онро ба метод медиҳем, ва он худаш онро барои ҳар унсур даъват мекунад. Мо давра наменависем — давра аллакай дар дохили метод пинҳон аст. Мо танҳо шарҳ медиҳем, ки бо як унсур чӣ кор кардан лозим.

То ки 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 («акс кардан, мувофиқ гузоштан») аз болои ҳар унсур мегузарад, callback-ро даъват мекунад ва он чиро, ки callback баргардонд, ба массиви нав мегузорад. Унсурҳо чӣ қадар буданд — ҳамон қадар мемонанд.

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

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

Ин чӣ тавр иҷро мешавад, қадам ба қадам

Параметрҳои callback: element, index, array

Метод ба callback на танҳо унсурро медиҳад. Ҳамчун аргументи дуюм индекс, ҳамчун сеюм — тамоми массив меояд. Одатан танҳо якум лозим аст, баъзан — якум ва дуюм. Номҳоро ҳар гуна додан мумкин аст, тартиб муҳим аст.

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); // → ["Душанбе", "Худжанд", "Хорог"]

Дар мисоли дуюм callback ҳарфи аввалро мегирад (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 («филтр, элак») аз болои массив мегузарад ва танҳо он унсурҳоро мемонад, ки callback барояшон 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 бармегардонад, бинобар ин барои callback-и филтр комилан мувофиқ аст.

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 дар ҳақиқат санҷишро дар аввалин «ҳа» қатъ мекунад. Ба callback 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

Диққат диҳед: callback-ро пешакӣ эълон карда, бо ном додан мумкин аст — ages.some(isAdult). Бе қавсайн, чунон ки дар мавзӯи callback-ҳо муҳокима кардем.

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

аккумулятор — ҷамъи миёнагӣ. Дар қадами аввал ба қимати оғозӣ баробар аст, минбаъд — ба он чӣ callback дар қадами гузашта баргардонд.

current

унсури ҷории массив.

қимати оғозӣ

аргументи дуюми reduce (пас аз callback). Хазинадор аз чӣ оғоз мекунад: одатан барои ҷамъ 0.

Чекро қадам ба қадам ҳисоб мекунем

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

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

Callback 4 бор даъват мешавад — барои ҳар унсур як бор. Ҳар дафъа он ҷамъи кӯҳна ва нархи ҷориро мегирад, ва ҷамъи навро бармегардонад.

Ба асосӣ диққат диҳед: он чи callback баргардонд, дар қадами оянда acc мешавад. Агар callback чизеро барнагардонад (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: бе callback sort ҳамчун сатр муқоиса мекунад

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

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

Чаро 100 пештар аз 25 шуд? Бе callback sort ҳар унсурро ба сатр табдил медиҳад ва сатрҳоро аз рӯи аломатҳо муқоиса мекунад, мисли калимаҳо дар луғат: "1", "100", "25", "5". Сатри "100" бо «1» оғоз мешавад, бинобар ин пеш аз "25", ки бо «2» оғоз мешавад, меистад. Ҳамон тавр ки дар луғат «ананас» пеш аз «банан» меистад, новобаста аз дарозӣ.

Callback-муқоисакунанда: (a, b) => a - b

Барои дуруст мураттаб кардани ададҳо функсияи муқоиса (компаратор) медиҳем. sort худаш борҳо ҷуфтҳои унсурҳои a ва b-ро мегирад ва аз callback мепурсад: «кадоме аз онҳо бояд пештар истад?». Callback бо адад ҷавоб медиҳад:

Акнун бинед, чаро 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()-ро бе callback даъват кардан мумкин аст, аммо барои номҳои бо кириллица он хато мекунад: ҳарфҳои калон дар он пеш аз хурдҳо меоянд, ва ҳарфи «Ё» умуман ба оғоз мепарад.

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).

Мураттабкунии объектҳо

Callback ду объектро мегирад, ва мо майдони лозимаи онҳоро муқоиса мекунем.

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