Дарси 7 · JavaScript
Объектҳо
Дар дарси гузашта мо фаро гирифтем, ки рӯйхатҳоро нигоҳ дорем: харидҳо, баҳоҳо, шаҳрҳо. Массив вақте комилан мувофиқ аст, ки чизҳо бисёранд ва якнамуданд. Аммо чӣ тавр як чизро, ки хосиятҳои гуногуни бисёр дорад, тавсиф кардан мумкин — донишҷӯ, мол, фармоиши таксӣ? Барои ин дар JavaScript объектҳо ҳастанд. Қариб ҳар чизе, ки аз сервер меояд ва дар сайт нишон дода мешавад, — объектҳо ва массивҳои объектҳо мебошанд. Имрӯз ҳамаро якҷоя ҷамъ мекунем: функсияҳо, массивҳо ва объектҳо — ва меомӯзем, ки ба ЗС вазифаҳои дақиқро бо ин забон гузорем.
Объектҳо эҷод кардан, хосиятҳои онҳоро хондан, тағйир додан, илова ва нест кардан
Бо додаҳои дарунравӣ ва массивҳои объектҳо кор кардан — мисли ҷавобҳои воқеии сервер
Методҳои объектро навиштан ва фаҳмидан, ки this ба чӣ ишора мекунад
Додаҳоро зуд бо деструктуризатсия гирифтан ва нусхаҳоро тавассути ... сохтан
Объектҳоро ба JSON ва баръакс табдил додан, додаҳои серверро бехатар хондан
Барои ЗС промптҳои дақиқро бо забони JS навиштан ва ҷавобҳои онро санҷидан
01 Объект чист ва он барои чӣ лозим аст
Массивро ба ёд меорем: ["нон", "чой", "самбуса"]. Ин рӯйхати чизҳои якнамуд аст, ва ба ҳар кадом мо бо рақам — индекс муроҷиат мекунем. Акнун кӯшиш мекунем як донишҷӯро тавсиф кунем: ном, синну сол, шаҳр, курс. Бо массив ҳам мешавад:
Бо массив — нокулай
Дар student[2] чӣ ҳаст? Тартибро дар хотир доштан лозим аст. Ҷойҳоро омехтед — хатое мегиред, ки пай бурдани он душвор аст.
JavaScript
const student = ["Фарход" , 20 , "Душанбе" , "Frontend" ];
console.log (student[2 ]); // ва ин чист? шаҳр? курс?
Бо объект — фаҳмо
Ҳар қимат ном дорад. Код мехонед — ва фавран мефаҳмед, ки чӣ дар куҷост.
JavaScript
const student = { name: "Фарход" , age: 20 , city: "Душанбе" , course: "Frontend" };
console.log (student.city); // фавран маълум аст: шаҳр
Монандӣ аз ҳаёт
Шиноснома ё анкетаро ҳангоми ворид шудан ба MakeFirstStep ба ёд оред. Дар он «сатри рақами 3» нест — дар он майдонҳо бо номҳо ҳастанд: «Насаб», «Санаи таваллуд», «Шаҳр». Ҳар майдон ном ва мундариҷа дорад. Объект айнан ҳамин тавр сохта шудааст: ин маҷмӯаи ҷуфтҳои «ном → қимат» аст.
Объект Маҷмӯаи ҷуфтҳои «калид: қимат» дар қавсайни фигурӣ { }. Як чизро бо хосиятҳои бисёр тавсиф мекунад.
Хосият Як ҷуфт дар дохили объект, масалан city: "Душанбе". Мисли як майдон дар анкета.
Калид Номи хосият (city). Ҳамеша сатр аст, ҳатто агар бе нохунак нависем.
Қимат Он чи дар зери калид нигоҳ дошта мешавад ("Душанбе"). Метавонад ҳар чиз бошад: адад, сатр, массив, объекти дигар, функсия.
Массив ё объект?
Ҳолат Чиро интихоб кардан Мисол Чизҳои якнамуди бисёр, тартиб муҳим аст Массив [ ]баҳоҳои моҳ, рӯйхати харид, шаҳрҳои маршрут Як чиз бо хусусиятҳои номдор Объект { }анкетаи донишҷӯ, шиноснома, корти мол, профил дар Telegram Чизҳои якнамуди бисёр, ки ҳар кадом хосият дорад Массиви объектҳо рӯйхати молҳои мағоза, донишҷӯёни гурӯҳ (мавзӯи 02)
Объектро чӣ тавр эҷод кардан
Объектро дар қавсайни фигурӣ менависанд. Дар дохил — хосиятҳо бо вергул. Ҳар хосият: калид, ду нуқта, қимат. Чунин навишт литерали объект номида мешавад.
const student = { name : "Фарход" , age : 20 };
Калид ва қиматро ду нуқта : ҷудо мекунад, ва хосиятҳоро байни ҳам — вергул ,
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const student = {
name: "Фарход" ,
age: 20 ,
city: "Душанбе" ,
isStudent: true
};
console.log (student); // → { name: "Фарход", age: 20, city: "Душанбе", isStudent: true }
console.log (typeof student); // → object
const empty = {}; // объекти холӣ — низ объект аст
console.log (empty); // → {}
Хосиятро чӣ тавр хондан: нуқта ва қавсайни мураббаъ
Ду усул ҳаст. Тавассути нуқта — student.name — аз ҳама маъмул ва кӯтоҳ. Тавассути қавсайни мураббаъ — student["name"] — дар ду ҳолат лозим аст:
дар калид фосила ё тире ҳаст: product["старая цена"], product["made-in"];
номи калид дар тағйирёбанда ҳаст: product[field].
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const product = {
title: "Казан" ,
price: 250 ,
"made-in" : "Таджикистан" ,
"старая цена" : 300
};
console.log (product.title); // → Казан
console.log (product["price" ]); // → 250
console.log (product["made-in" ]); // → Таджикистан
console.log (product["старая цена" ]); // → 300
// калид дар тағйирёбанда ҳаст
const field = "title" ;
console.log (product[field]); // → Казан
console.log (product.field); // → undefined (калидро бо номи "field" меҷӯяд)
Сатри охирин — хатои маъмул аст. product.field хосиятеро меҷӯяд, ки айнан field ном дорад. Ва product[field] аввал қимати тағйирёбандаро ("title") мегирад ва танҳо баъд чунин калидро меҷӯяд.
Чунин хосият нест — undefined мегирем
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = { name: "Мадина" };
console.log (user.age); // → undefined
console.log (user.length); // → undefined (объект length надорад, мисли массив)
Хато нест: JavaScript оддӣ мегӯяд «дар ин ҷо чизе нест». Хато мешавад, агар хосиятро аз худи undefined гирифтан хоҳем, масалан user.address.city. Чӣ тавр муҳофизат кардан — дар мавзӯи 02 ҷудо мекунем.
Тағйир додан, илова кардан, нест кардан
Объектро баъд аз эҷод тағйир додан мумкин аст. Ба калиди мавҷуда қимат таъин кардем — тағйир додем. Ба калиди нав — илова кардем. Оператори delete хосиятро нест мекунад. Ва оператори in месанҷад, ки калид ҳаст ё не.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const order = { dish: "Оши палав" , price: 30 };
order.price = 35 ; // тағйир додан: калиди price аллакай буд
order.drink = "Чой" ; // илова кардан: калиди drink набуд
console.log (order); // → { dish: "Оши палав", price: 35, drink: "Чой" }
delete order.drink; // нест кардан
console.log (order); // → { dish: "Оши палав", price: 35 }
console.log ("price" in order); // → true
console.log ("drink" in order); // → false
Муҳим: const ва объектҳо
const аз нав таъин кардан -и тағйирёбандаро — гузоштани объекти дигарро ба он — манъ мекунад. Аммо мазмун -и объектро тағйир додан мумкин аст. Тасаввур кунед: ба қуттӣ ёрлиқи «card» часпонда шудааст. Ёрлиқро ба қуттии дигар ҷобаҷо кардан мумкин нест, аммо чизҳои дохили қуттиро тағйир додан мумкин аст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const card = { owner: "Зарина" , balance: 100 };
card.balance = 150 ; // мумкин аст: мазмунро тағйир медиҳем
console.log (card.balance); // → 150
// card = { owner: "Зарина", balance: 0 }; // мумкин нест: TypeError, const аз нав таъин намешавад
Навишти кӯтоҳи хосиятҳо
Аксар вақт қиматҳо аллакай дар тағйирёбандаҳо бо ҳамон номҳо ҳастанд. Он гоҳ ба ҷои { name: name, age: age } танҳо { name, age } навиштан мумкин аст. Ин як чиз аст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const name = "Нилуфар" ;
const age = 18 ;
const city = "Бохтар" ;
const student = { name, age, city };
console.log (student); // → { name: "Нилуфар", age: 18, city: "Бохтар" }
// функсияи «фабрика»: додаҳоро мегирад, объект бармегардонад
const makeStudent = (name, city) => ({ name, city, course: "Frontend + ИИ" });
console.log (makeStudent ("Далер" , "Куляб" )); // → { name: "Далер", city: "Куляб", course: "Frontend + ИИ" }
Қапқон: функсияи тирдор объект бармегардонад
Ба қавсайни доира диққат диҳед: () => ({ ... }). Бе онҳо JavaScript мешуморад, ки { — оғози бадани функсия аст, на объект, ва функсия undefined бармегардонад.
Ҳамаи хосиятҳоро чӣ тавр гузаштан
Массив for...of ва методҳо дорад. Объектро мустақиман ин тавр гузаштан мумкин нест, аммо се ёвар ҳаст, ки объектро ба массив табдил медиҳанд:
Object.keys(obj) — массиви калидҳо;
Object.values(obj) — массиви қиматҳо;
Object.entries(obj) — массиви ҷуфтҳои [калид, қимат].
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const grades = { html: 5 , css: 4 , js: 5 };
console.log (Object.keys (grades)); // → ["html", "css", "js"]
console.log (Object.values (grades)); // → [5, 4, 5]
console.log (Object.entries (grades)); // → [["html", 5], ["css", 4], ["js", 5]]
// дар объект чанд хосият ҳаст
console.log (Object.keys (grades).length); // → 3
// баҳои миёна: values + reduce аз дарси гузашта
const sum = Object.values (grades).reduce ((total, g) => total + g, 0 );
console.log (sum / Object.keys (grades).length); // → 4.666666666666667
Бештар ҷуфтҳоро тавассути for...of бар Object.entries мегузаранд. Навишти const [subject, grade] ҷуфтро ба ду тағйирёбанда ҷудо мекунад — муфассал инро дар мавзӯи 05 мефаҳмем, ҳоло танҳо шаклро дар хотир доред.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const grades = { html: 5 , css: 4 , js: 5 };
for (const [subject, grade] of Object.entries (grades)) {
console.log (`${subject}: ${grade}` );
}
// → html: 5
// → css: 4
// → js: 5
Усули кӯҳна ҳам ҳаст — давраи for...in. Он калидҳо -ро мегузарад, ва қиматро тавассути қавсайни мураббаъ мегирем:
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const grades = { html: 5 , css: 4 , js: 5 };
for (const key in grades) {
console.log (key, grades[key]);
}
// → html 5
// → css 4
// → js 5
Хатогиҳои маъмул
1) grades.key дар дохили for...in — калиди «key»-ро меҷӯяд. grades[key] лозим аст. 2) obj.length — объект дарозӣ надорад. Object.keys(obj).length-ро истифода баред. 3) { name = "Фарход" } — дар дохили литерал ду нуқта мегузоранд, на =. 4) Вергулро байни хосиятҳо фаромӯш карданд — SyntaxError.
Ишораи ЗС
Агар боварӣ надоред, ки объект лозим аст ё массив, додаҳоро ба ЗС бо калимаҳо тавсиф кунед: «ман 30 донишҷӯро нигоҳ медорам, ҳар кадом ном, шаҳр ва баҳоҳо дорад — додаҳоро дар JS чӣ тавр беҳтар ташкил кардан мумкин?». Ҷавоби хуб — массиви объектҳо. Аммо қарорро худатон қабул кунед: шумо акнун қоидаро медонед.
Амалия: мустаҳкам мекунем
Аз анкета оғоз мекунем, баъд бо кортии мол кор мекунем, ва дар охир овозҳоро ҳисоб мекунем — объект ҳамчун «ҳисобкунак».
ВАЗИФАИ 1.1 Анкетаи донишҷӯи MakeFirstStep осон
Объекти student-ро бо хосиятҳои зерин эҷод кунед: name — «Мадина», age — 19, city — «Худжанд», course — «Frontend + ИИ». Сатри аввалро тавассути нуқта, дуюмро — тавассути қавсайни мураббаъ баровед. Сипас хосияти phone-ро бо қимати "+992 92 555 11 22" илова кунед ва баровед, ки дар анкета ҳамагӣ чанд хосият ҳаст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
// 1. Объекти student-ро эҷод кунед
// 2. Баровед: Мадина, 19 лет, Худжанд (тавассути нуқта)
// 3. Баровед: Курс: Frontend + ИИ (тавассути student["..."])
// 4. phone-ро илова кунед ва шумораи хосиятҳоро баровед
Натиҷаи интизоршаванда Мадина, 19 лет, Худжанд
Курс: Frontend + ИИ
Свойств в анкете: 5
Ишора 1 Барои сатр сатри қолабӣ қулай аст: `${student.name}, ...`. Хосият илова кардан — яъне оддӣ таъин кардан: student.phone = ....
Ишора 2 Шумораи хосиятҳо: Object.___(student).length. Дар хотир доред, ки student.length undefined бармегардонад.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 1.2 Кортии мол дар Корвон миёна
Фурӯшанда дар Корвон кортии қозонро навсозӣ мекунад. Объектро аз нав эҷод накунед — product-и мавҷударо тағйир диҳед: нархро 30 сомонӣ кам кунед (нархи ҷориро истифода баред, на 290-ро бо даст нависед), category-ро бо қимати «Посуда» илова кунед, хосияти inStock-ро нест кунед. Сипас объектро баровед, тавассути in санҷед, ки калиди inStock монд ё не, ва ҳамаи хосиятҳоро дар формати калид: қимат баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const product = { title: "Казан 10 л" , price: 320 , inStock: true };
// 1. Тахфифи 30 сомонӣ
// 2. category-ро илова кунед
// 3. inStock-ро нест кунед
// 4. product, санҷиши "inStock" in product ва ҳамаи ҷуфтҳои калид: қиматро баровед
Натиҷаи интизоршаванда { title: "Казан 10 л", price: 290, category: "Посуда" }
false
title: Казан 10 л
price: 290
category: Посуда
Ишора 1 Кам кардан ба 30: product.price = product.price - 30 (ё кӯтоҳтар -=). Нест кардан: оператори delete.
Ишора 2 Барои баровардани ҷуфтҳо: for (const [key, value] of Object.___(product)) { ... }.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 1.3 Барои хӯроки нисфирӯзӣ чӣ фармоиш додан? душвор
Гурӯҳ овоз медиҳад, ки аз чойхона чӣ фармоиш диҳад. Функсияи countVotes(votes)-ро нависед, ки массиви овозҳоро мегирад ва объекти-ҳисобкунак бармегардонад: калид — таом, қимат — чанд маротиба барои он овоз доданд. Сипас объект, шумораи таомҳои гуногун ва ғолибро (таом бо бештарин шумораи овозҳо) баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const votes = [
"оши палав" , "самбуса" , "курутоб" , "оши палав" , "самбуса" ,
"оши палав" , "шакароб" , "курутоб" , "оши палав"
];
function countVotes (votes) {
const result = {};
// коди шумо инҷо: аз болои votes гузаред ва ҳисобкунаки result[таом]-ро зиёд кунед
return result;
}
const counts = countVotes (votes);
console.log (counts);
// шумораи таомҳо ва ғолибро баровед
Натиҷаи интизоршаванда { "оши палав": 4, самбуса: 2, курутоб: 2, шакароб: 1 }
Блюд в голосовании: 4
Победитель: оши палав (4 голоса)
Ишора 1 Калид дар тағйирёбанда ҳаст (dish), бинобар ин танҳо қавсайни мураббаъ: result[dish]. Агар чунин калид ҳоло нест, қиматаш — undefined, ва аввал бояд 1-ро ба он ҷо гузошт.
Ишора 2 Дар дохили давра: if (dish in result) { result[dish] = ___ } else { result[dish] = ___ }. Барои ғолиб let bestDish = ""; let bestCount = 0;-ро эҷод кунед ва аз болои Object.entries(counts) гузашта, ҳадди аксарро дар хотир нигоҳ доред.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
02 Дарунравӣ: объектҳо дар объектҳо, массивҳои объектҳо
Қимати хосият метавонад ҳар чиз бошад — аз ҷумла объекти дигар ё массив . Додаҳои воқеӣ ҳамин тавр менамоянд: корбар суроға (объект), рӯйхати малакаҳо (массив) дорад, ва гурӯҳ — массиви донишҷӯён дорад, ки ҳар кадом — объект аст.
Монандӣ аз ҳаёт
Ҷузвдони «Гурӯҳи FE-07» дар ҷевон. Дар он варақа бо номи ментор ва боз як ҷузвдон «Донишҷӯён» мебошад. Дар ҷузвдони «Донишҷӯён» — анкетаҳо, ҳар кадом дар варақаи худ. Барои ёфтани шаҳри донишҷӯи дуюм шумо мекушоед: гурӯҳ → ҷузвдони донишҷӯён → анкетаи дуюм → майдони «Шаҳр». Дар код роҳ айнан ҳамин тавр навишта мешавад: group.students[1].city.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = {
name: "Шахром" ,
age: 22 ,
address: { // объект дар дохили объект
city: "Худжанд" ,
street: "ул. Камоли Худжанди"
},
skills: ["HTML" , "CSS" ] // массив дар дохили объект
};
console.log (user.address.city); // → Худжанд
console.log (user.skills[0 ]); // → HTML
console.log (user.skills.length); // → 2
user.address.zip = "735700" ; // ба объекти дарунравӣ хосият илова кардем
user.skills.push ("JavaScript" ); // методҳои массив ба тартиби муқаррарӣ кор мекунанд
console.log (user.skills); // → ["HTML", "CSS", "JavaScript"]
Массиви объектҳо — шакли аз ҳама маъмули додаҳо
Вақте сайт аз сервер рӯйхати молҳо, донишҷӯён ё фармоишҳоро пурсон мешавад, қариб ҳамеша массиви объектҳо меояд. Гурӯҳи донишҷӯён чунин менамояд:
group { }
name: "FE-07"
mentor { }group.mentor
name: "Далер" group.mentor.name
students [ ]group.students
[0] { }
name: "Фарход", city: "Душанбе"
[1] { }group.students[1]
name: "Мадина"
group.students[1].name
Чорчӯбаҳои сабз — объектҳо (бо калид тавассути нуқта мегирем), зард — массив (бо индекс дар қавсайн мегирем)
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const group = {
name: "FE-07" ,
mentor: { name: "Далер" },
students: [
{ name: "Фарход" , city: "Душанбе" },
{ name: "Мадина" , city: "Худжанд" }
]
};
console.log (group.mentor.name); // → Далер
console.log (group.students[1 ].name); // → Мадина
console.log (group.students.length); // → 2
Роҳи дарозро чӣ тавр хондан
group — тамоми объекти гурӯҳро мегирем.
.students — аз он хосияти students-ро мебарорем. Ин массив аст.
[1] — аз массив унсури индекси 1-ро мегирем — объекти дуюм.
.name — аз ин объект ном мегирем: "Мадина".
Маслиҳат
Агар роҳ кор накунад, онро аз рӯи қисмҳо баровед: console.log(group), баъд console.log(group.students), баъд console.log(group.students[1]). Фавран мебинед, ки дар кадом қадам додаҳо он тавре нестанд, ки интизор будед.
Методҳои массивҳо + объектҳо
Ҳар чизе, ки шумо дар дарси гузашта омӯхтед, бо массиви объектҳо комилан кор мекунад. Ба callback объекти пурра меояд, ва мо аз он хосияти лозимиро мегирем.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const products = [
{ id: 1 , title: "Ковёр" , price: 900 , category: "дом" },
{ id: 2 , title: "Казан" , price: 320 , category: "кухня" },
{ id: 3 , title: "Пиала" , price: 15 , category: "кухня" },
{ id: 4 , title: "Чайник" , price: 120 , category: "кухня" }
];
const titles = products.map (p => p.title);
console.log (titles); // → ["Ковёр", "Казан", "Пиала", "Чайник"]
const kitchen = products.filter (p => p.category === "кухня" );
console.log (kitchen.length); // → 3
const cheap = products.find (p => p.price < 100 );
console.log (cheap); // → { id: 3, title: "Пиала", price: 15, category: "кухня" }
const total = products.reduce ((sum, p) => sum + p.price, 0 );
console.log (total); // → 1355
const hasExpensive = products.some (p => p.price > 500 );
console.log (hasExpensive); // → true
Ва акнун занҷир: «ҳамаи молҳои ошхона аз 100 сомонӣ гаронтар — дар шакли сатрҳо барои витрина», ва мураттабкунӣ аз рӯи нарх. Нусхаро (slice()) мураттаб мекунем, то массиви аслиро вайрон накунем.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const products = [
{ id: 1 , title: "Ковёр" , price: 900 , category: "дом" },
{ id: 2 , title: "Казан" , price: 320 , category: "кухня" },
{ id: 3 , title: "Пиала" , price: 15 , category: "кухня" },
{ id: 4 , title: "Чайник" , price: 120 , category: "кухня" }
];
const showcase = products
.filter (p => p.category === "кухня" && p.price > 100 )
.map (p => `${p.title} — ${p.price} сомони` );
console.log (showcase); // → ["Казан — 320 сомони", "Чайник — 120 сомони"]
const byPrice = products.slice ().sort ((a, b) => a.price - b.price);
console.log (byPrice.map (p => p.title)); // → ["Пиала", "Чайник", "Казан", "Ковёр"]
console.log (products[0 ].title); // → Ковёр (тартиби аслӣ бутун аст)
Қапқон: find ҳамон объектро бармегардонад, на нусха
Агар он чиро, ки find баргардонд, тағйир диҳед, объекти дохили массив низ тағйир меёбад. Ин нусха нест, балки як «истинод»-и дигар ба ҳамон объект аст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const products = [{ title: "Казан" , price: 320 }, { title: "Пиала" , price: 15 }];
const kazan = products.find (p => p.title === "Казан" );
kazan.price = 280 ;
console.log (products[0 ].price); // → 280 (дар массив низ тағйир ёфт!)
Дастрасии бехатар: ?.
Додаҳои сервер на ҳамеша пурра мебошанд. Дар як корбар суроға ҳаст, дар дигаре — не. Агар хосиятро аз undefined гирем, барнома бо хатои TypeError меафтад, ва тамоми коди поёнтар иҷро намешавад:
Ин код хато медиҳад · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const users = [
{ name: "Далер" , address: { city: "Куляб" } },
{ name: "Сабрина" } // суроға нест
];
console.log (users[0 ].address.city); // → Куляб
console.log (users[1 ].address.city); // TypeError: суроға undefined аст, city надорад
console.log ("Эта строка уже не выполнится" );
Оператори занҷири ихтиёрӣ ?. мегӯяд: «агар дар чап undefined ё null бошад — минбаъд нарав, оддӣ undefined баргардон». Ва оператори ?? имкон медиҳад, ки қимати пешфарз гузорем, агар дар чап undefined ё null бошад. Онҳоро аксар вақт якҷоя истифода мебаранд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const users = [
{ name: "Далер" , address: { city: "Куляб" } },
{ name: "Сабрина" }
];
console.log (users[1 ].address?. city); // → undefined (бе хато)
console.log (users[1 ].address?. city ?? "город не указан" ); // → шаҳр нишон дода нашудааст
for (const u of users) {
console.log (`${u.name}: ${u.address?.city ?? "—"}` );
}
// → Далер: Куляб
// → Сабрина: —
// ?. бо массивҳо низ кор мекунад
const empty = [];
console.log (empty[0 ]?. name); // → undefined
?.-ро ҳама ҷо паси ҳам нагузоред
?. дар он ҷо лозим аст, ки додаҳо дар ҳақиқат метавонанд набошанд (майдони ихтиёрӣ, ҷавоби холӣ). Агар хосият ҳатман бояд бошад, ва вай нест — беҳтар аст хато гирифта, хатоиро ёфт, на ин ки хомӯшона холигиро нишон диҳем.
Ишораи ЗС
Вақте аз ЗС коркарди додаҳоро металабед, ба промпт мисоли объектро гузоред — 2–3 унсури массив. Бе мисол ЗС тахмин мезанад, ки майдонҳо чӣ ном доранд (name ё title? price ё cost?), ва барои додаҳои ихтироъшуда код менависад.
Амалия: мустаҳкам мекунем
Се вазифа бо «ҷавобҳои воқеии сервер»: брони меҳмонхона, гурӯҳи донишҷӯён ва фармоишҳои таксӣ, ки дар онҳо баъзан додаҳо намерасанд.
ВАЗИФАИ 2.1 Брони меҳмонхона дар Хоруғ осон
Брони меҳмонхона омад. Додаҳоро аз рӯи роҳҳо гиред ва панҷ сатрро чун дар намуна баровед. Маблағи пардохтро аз nights ва pricePerNight ҳисоб кунед, шумораи хизматрасониҳо ва хизматрасонии охиринро аз массив гиред (ададҳо ва калимаҳоро бо даст нанависед).
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const booking = {
id: "HRG-2041" ,
guest: { name: "Рустам" , phone: "+992 93 777 00 11" },
hotel: { name: "Памир Лодж" , city: "Хорог" , stars: 3 },
nights: 3 ,
pricePerNight: 450 ,
services: ["завтрак" , "трансфер" , "экскурсия" ]
};
// коди шумо инҷо
Натиҷаи интизоршаванда Бронь HRG-2041
Гость: Рустам, +992 93 777 00 11
Отель: Памир Лодж (Хорог), 3★
Услуг: 3, первая — завтрак, последняя — экскурсия
К оплате: 1350 сомони
Ишора 1 Роҳ ба номи меҳмон: booking.guest.name. Ба шаҳр: booking.hotel.city.
Ишора 2 Унсури охирини массив: booking.services[booking.services.length - ___].
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 2.2 Гурӯҳи FE-07 миёна
Ментор ҳисоботи зудро дар бораи гурӯҳ мехоҳад. Баровед: сатр дар бораи гурӯҳ ва ментор; номи донишҷӯи дуюм дар рӯйхат; массиви номҳои донишҷӯёни аз Душанбе; бали Нилуфар (ӯро тавассути find ёбед); баҳои миёнаи гурӯҳ.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const group = {
name: "FE-07" ,
mentor: { name: "Далер" , telegram: "@daler_js" },
students: [
{ name: "Фарход" , city: "Душанбе" , score: 87 },
{ name: "Мадина" , city: "Худжанд" , score: 94 },
{ name: "Шахром" , city: "Душанбе" , score: 72 },
{ name: "Нилуфар" , city: "Бохтар" , score: 90 },
{ name: "Абдулло" , city: "Душанбе" , score: 65 }
]
};
// 1. Гурӯҳи FE-07, ментор Далер (@daler_js)
// 2. Дуюм дар рӯйхат: ...
// 3. Массиви номҳои аз Душанбе
// 4. Нилуфар: ...
// 5. Баҳои миёнаи гурӯҳ: ...
Натиҷаи интизоршаванда Группа FE-07, ментор Далер (@daler_js)
Второй в списке: Мадина
["Фарход", "Шахром", "Абдулло"]
Нилуфар: 90
Средний балл группы: 81.6
Ишора 1 Номҳои аз Душанбе — занҷири ду метод: аввал интихоб кардан (filter), баъд объектҳоро ба номҳо табдил додан (map).
Ишора 2 Баҳои миёна: group.students.reduce((sum, s) => sum + s.___, 0) / group.students.___.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 2.3 Фармоишҳои таксӣ: ронанда куҷост? душвор
Барномаи таксӣ фармоишҳо мегирад. Барои баъзеҳо ронанда ҳанӯз ёфт нашудааст (driver ба null баробар аст ё умуман нест), барои баъзеҳо мошин нишон дода нашудааст. Функсияи describeOrder(order)-ро нависед, ки сатрро барои як фармоиш бармегардонад (намунаро бинед). Барнома набояд бо хато биафтад. Сипас сатрҳоро барои ҳамаи фармоишҳо баровед ва ҳисоб кунед, ки барои чанд фармоиш ронанда ҳаст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const orders = [
{ id: 101 , from: "Шохмансур" , to: "Ирам" , driver: { name: "Шахром" , car: { model: "Toyota Prius" , number: "1234 AA 01" } } },
{ id: 102 , from: "Корвон" , to: "проспект Рудаки" , driver: null },
{ id: 103 , from: "Варзоб" , to: "Душанбе" , driver: { name: "Абдулло" } },
{ id: 104 , from: "Аэропорт" , to: "Шохмансур" }
];
function describeOrder (order) {
// коди шумо инҷо
}
// describeOrder-ро барои ҳар фармоиш ва сатри "С водителем: ..."-ро баровед
Натиҷаи интизоршаванда Заказ 101: Шахром, Toyota Prius (1234 AA 01)
Заказ 102: водитель ещё не найден
Заказ 103: Абдулло, машина не указана
Заказ 104: водитель ещё не найден
С водителем: 2
Ишора 1 Аввал санҷед, ки ронанда ҳаст ё не: if (!order.driver?.name) return .... Баъд — мошин ҳаст ё не: order.driver.car?.model.
Ишора 2 Ҳисоб: orders.filter(o => o.driver?.___).length. ?. бо null ва бо хосияти набуда ҳам бепарво кор мекунад.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
03 Методҳои объект
Қимати хосият метавонад функсия низ бошад. Чунин функсия дар дохили объект метод номида мешавад. Хосиятҳо тавсиф мекунанд, ки объект чӣ гуна аст (ном, нарх, шаҳр), ва методҳо — вай чӣ кор карда метавонад (салом додан, ҷамъро ҳисоб кардан, тахфиф татбиқ намудан).
Монандӣ аз ҳаёт
Чойник: вай хосиятҳо дорад — ранг, ҳаҷм, чанд об рехта шудааст. Ва тугмаи «ҷӯшон» ҳаст — ин амал аст. Дар объект хосиятҳо — додаҳоянд, ва методҳо — тугмаҳоянд, ки чизеро иҷро мекунанд.
Метод Функсияе, ки дар хосияти объект ҷойгир аст.
Даъвати метод Навишти объект.метод() — бо қавсайн! Бе қавсайн шумо танҳо худи функсияро мегиред, аммо онро ба кор намеандозед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const chaikhana = {
name: "Рохат" ,
city: "Душанбе" ,
greet: function () {
console.log ("Хуш омадед в чайхану!" );
}
};
chaikhana.greet (); // → Хуш омадед в чайхану!
console.log (typeof chaikhana.greet); // → function
Навишти кӯтоҳи метод
Калимаи function ва ду нуқтаро партофтан мумкин аст: greet() { ... }. Ин навишти муосир аст, онро шумо аксар вақт мебинед. Методҳо, мисли функсияҳои оддӣ, параметр мегиранд ва тавассути return қиматҳо бармегардонанд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const calc = {
add (a, b) {
return a + b;
},
multiply (a, b) {
return a * b;
},
percent (sum, p) {
return sum * p / 100 ;
}
};
console.log (calc.add (25 , 17 )); // → 42
console.log (calc.multiply (4 , 12 )); // → 48
console.log (calc.percent (300 , 15 )); // → 45
Шумо аз қадим методҳоро истифода мебаред
Ҳар дафъае, ки шумо нуқта ва қавсайн гузоштед, шумо методи объекти дарунсохтро даъват мекардед. console — объект аст, ва log — методи он! Math — объект бо методҳои риёзӣ. Сатрҳо ва массивҳо низ методҳо доранд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
console.log (typeof console); // → object
console.log (typeof console.log); // → function
console.log (Math.round (4.6 )); // → 5
console.log (Math.max (3 , 9 , 4 )); // → 9
const city = "хорог" ;
console.log (city.toUpperCase ()); // → ХОРОГ
const cart = ["нон" ];
cart.push ("чой" ); // push — методи массив
console.log (cart); // → ["нон", "чой"]
Пас arr.push(...) ва calc.add(...) — як ғоя аст: объект хосияти-функсия дорад, ва мо онро тавассути нуқта даъват мекунем.
Қавсайнро фаромӯш карданд
Метод оғоз нашуд — худи функсия баромад.
JavaScript
console.log (calc.add); // ƒ add() — ин функсия аст, на натиҷа
chaikhana.greet; // ҳеҷ чиз рӯй надод
Бо қавсайн
Метод иҷро шуд ва натиҷа баргардонд.
JavaScript
console.log (calc.add (2 , 3 )); // 5
chaikhana.greet (); // Хуш омадед в чайхану!
Методе, ки ба додаҳои объект ниёз дорад
Аксар вақт ба метод хосиятҳои дигари ҳамон объект лозиманд. Ҳоло ба онҳо бо номи тағйирёбанда муроҷиат кардан мумкин аст:
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const chaikhana = {
name: "Рохат" ,
open: "07:00" ,
info () {
return `Чайхана «${chaikhana.name}», открыта с ${chaikhana.open}` ;
}
};
console.log (chaikhana.info ()); // → Чайхана «Рохат», открыта с 07:00
Ин кор мекунад, аммо нокулай аст: агар тағйирёбандаро иваз кунед ё хоҳед, ки чунин метод дар объекти дигар бошад — ҳама чиз вайрон мешавад. Барои ин калимаи махсуси this ҳаст — мавзӯи оянда.
Хатогиҳои маъмул
1) Даъват бе қавсайн: obj.method ба ҷойи obj.method(). 2) Хатои имлоӣ дар ном: calc.Add() → TypeError: calc.Add is not a function. Ҳарфҳои калон ва хурд муҳиманд. 3) return-ро фаромӯш карданд — метод undefined бармегардонад, ҳарчанд дар дохил ҳама чизро ҳисоб кардааст.
Амалия: мустаҳкам мекунем
«Абзорҳо»-и худамонро ба объектҳо ҷамъ мекунем — ҳамон тавр, ки Math ва console сохта шудаанд.
ВАЗИФАИ 3.1 Объекти-салом осон
Объекти greeter-ро бо се метод (бо навишти кӯтоҳ) эҷод кунед: hello(name) саломро бармегардонад, bye(name) — хайрбодиро, isMorning(hour) true бармегардонад, агар соат аз 12 кам бошад. Методҳо бояд қиматҳоро баргардонанд , ва онҳоро console.log дар берун мебарорад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const greeter = {
// коди шумо инҷо
};
console.log (greeter.hello ("Нилуфар" ));
console.log (greeter.hello ("Далер" ));
console.log (greeter.bye ("Нилуфар" ));
console.log (greeter.isMorning (9 ));
console.log (greeter.isMorning (15 ));
Натиҷаи интизоршаванда Ассалому алейкум, Нилуфар!
Ассалому алейкум, Далер!
Хайр, Нилуфар! Рахмат, что пришли.
true
false
Ишора 1 Навишти кӯтоҳ: hello(name) { return ...; }, — вергулро байни методҳо фаромӯш накунед.
Ишора 2 Барои isMorning if лозим нест: муқоисаи hour < 12 аллакай true ё false медиҳад.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 3.2 Маҷмӯаи абзор барои матн миёна
Объекти textTools-ро бо методҳо эҷод кунед: capitalize(word) — ҳарфи аввалро калон мекунад; countWords(text) — калимаҳоро ҳисоб мекунад (онҳо бо як фосила ҷудо шудаанд); initials(fullName) — ҳарфҳои аввалро бо нуқта бармегардонад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const textTools = {
// коди шумо инҷо
};
console.log (textTools.capitalize ("душанбе" ));
console.log (textTools.capitalize ("хорог" ));
console.log (textTools.countWords ("Ассалому алейкум дорогие студенты" ));
console.log (textTools.initials ("Мадина Рахимова" ));
Натиҷаи интизоршаванда Душанбе
Хорог
4
М. Р.
Ишора 1 Ҳарфи аввал — word[0], боқимонда — word.slice(1). Барои тақсим кардани матн ба калимаҳо text.split(" ")-ро истифода баред — массив мешавад.
Ишора 2 Ҳарфҳои аввал: fullName.split(" ").map(part => ___ + ".").join(" ").
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 3.3 Китобхона: Айнӣ, Рӯдакӣ, Фирдавсӣ душвор
Методҳои объекти library-ро пурра кунед. byAuthor(author) — массиви номҳои китобҳои муаллиф; availableTitles() — номҳои китобҳое, ки дар мавҷуд ҳастанд; oldest() — объекти кӯҳнатарин китоб; addBook(book) — китобро илова мекунад ва шумораи нави китобҳоро бармегардонад. Дар дохили методҳо ба китобҳо тавассути library.books муроҷиат кунед (дар мавзӯи оянда усули беҳтарро меомӯзем).
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const library = {
name: "Библиотека MakeFirstStep" ,
books: [
{ title: "Шахнаме" , author: "Фирдавси" , year: 1010 , available: true },
{ title: "Бухара" , author: "Айни" , year: 1949 , available: false },
{ title: "Мать вина" , author: "Рудаки" , year: 933 , available: true },
{ title: "Рабы" , author: "Айни" , year: 1935 , available: true },
{ title: "Одина" , author: "Айни" , year: 1924 , available: false }
],
// методҳои шумо инҷо
};
console.log (library.byAuthor ("Айни" ));
console.log (library.availableTitles ());
const old = library.oldest ();
console.log (`Самая старая: ${old.title}, ${old.year}` );
console.log (`Книг в библиотеке: ${library.addBook({ title: "Смерть ростовщика", author: "Айни", year: 1939, available: true })}` );
console.log (library.byAuthor ("Айни" ));
Натиҷаи интизоршаванда ["Бухара", "Рабы", "Одина"]
["Шахнаме", "Мать вина", "Рабы"]
Самая старая: Мать вина, 933
Книг в библиотеке: 6
["Бухара", "Рабы", "Одина", "Смерть ростовщика"]
Ишора 1 byAuthor ва availableTitles — ин filter аст, баъд map аз рӯи ном. Дар хотир доред: push дарозии нави массивро бармегардонад — ин маҳз барои addBook лозим аст.
Ишора 2 Кӯҳнатарин китоб: library.books.reduce((oldest, b) => (b.year < oldest.year ? ___ : ___), library.books[0]).
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
04 this — «ин объект»
Дар дохили метод аксар вақт гуфтан лозим аст: «номи ин объектро гир». Барои ин калимаи this ҳаст. Қоидае, ки дар хотир нигоҳ доштан лозим аст:
Қоидаи асосӣ
this — объекте аст, ки дар лаҳзаи даъвати метод пеш аз нуқта меистад. student.introduce()-ро даъват кардем — яъне дар дохил this ба student баробар аст.
Монандӣ аз ҳаёт
Калимаи «ман». Вақте Фарход мегӯяд «ман аз Душанбе», «ман» — Фарход аст. Вақте ҳамин ибораро Мадина мегӯяд, «ман» — Мадина аст. Ибора як аст, аммо маъно вобаста аст, ки кӣ мегӯяд . this — «ман» барои метод аст: вобаста аст, ки метод аз кадом объект даъват шудааст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const student = {
name: "Манижа" ,
city: "Истаравшан" ,
introduce () {
console.log (`Салом! Я ${this.name} из города ${this.city}` );
}
};
student.introduce (); // → Салом! Я Манижа из города Истаравшан
student.city = "Душанбе" ; // кӯчид
student.introduce (); // → Салом! Я Манижа из города Душанбе
Даъвати student.introduce(). JavaScript мебинад, ки дар чапи нуқта чӣ меистад, — ин student аст.
this = student. Дар муддати ин даъват this ба объекти student ишора мекунад.
this.name — ин ҳамон student.name аст, яъне "Манижа".
Метод ҳамеша додаҳои тоза мегирад. city-ро тағйир додед — даъвати оянда аллакай шаҳри навро нишон медиҳад.
Методҳо объектро тавассути this тағйир медиҳанд
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const counter = {
count: 0 ,
increment () {
this .count++;
},
reset () {
this .count = 0 ;
},
show () {
console.log (`Счётчик: ${this.count}` );
}
};
counter.increment ();
counter.increment ();
counter.increment ();
counter.show (); // → Счётчик: 3
counter.reset ();
counter.show (); // → Счётчик: 0
Як функсия — объектҳои гуногун
Дар ин ҷо this дар ҳақиқат муфид аст. Як функсияро ба якчанд объект гузоштан мумкин аст — ва ҳар дафъа this ҳамон объекте мешавад, ки функсия аз он даъват шудааст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
function sayHi () {
console.log (`Ассалому алейкум, я ${this.name}` );
}
const farhod = { name: "Фарход" , sayHi };
const zarina = { name: "Зарина" , sayHi };
farhod.sayHi (); // → Ассалому алейкум, я Фарход
zarina.sayHi (); // → Ассалому алейкум, я Зарина
Қапқони 1: функсияи тирдор ҳамчун метод
Функсияи тирдор худи this надорад . Вай this-ро аз берун мегирад — аз ҷое, ки навишта шудааст, на аз объекти пеш аз нуқта. Бинобар ин ҳамчун метод бо this кор намекунад:
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = {
name: "Рустам" ,
hello: () => {
console.log (this === user); // тирдор: this аз берун аз объект гирифта шуд
},
hi () {
console.log (this === user); // методи оддӣ: this — объекти пеш аз нуқта
}
};
user.hello (); // → false
user.hi (); // → true
Агар дар дохили hello this.name мебуд, шумо на «Рустам», балки холигӣ ё undefined-ро мегирифтед. Аммо функсияи тирдор дар дохили метод ғайриҳамсол аст — масалан, ҳамчун callback барои map: вай this-ро аз метод мегирад, яъне аз объект.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const shop = {
discount: 10 ,
prices: [100 , 250 , 40 ],
withDiscount () {
// callback-и тирдор this-ро аз методи withDiscount мегирад, яъне shop
return this .prices.map (p => p - p * this .discount / 100 );
}
};
console.log (shop.withDiscount ()); // → [90, 225, 36]
Қоидаи ҳарруза
Методи объектро бо навишти кӯтоҳи method() { } менависем. Callback-ҳои дохили метод (map, filter, reduce) — тирдор. Он гоҳ this ҳамеша ҳамон чизе мешавад, ки лозим аст.
Қапқони 2: методро аз объект «канданд»
Агар методро ба тағйирёбандаи алоҳида нигоҳ дошта, онро даъват кунед, пеш аз нуқта аллакай чизе нест . Дар реҷаи қатъӣ ("use strict" — он дар иҷрои кодамон ва дар ҳамаи лоиҳаҳои муосир фаъол аст) this undefined мешавад, ва муроҷиати this.name меафтад:
Ин код хато медиҳад · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = {
name: "Рустам" ,
introduce () {
console.log (`Я ${this.name}` );
}
};
user.introduce (); // → Я Рустам
const f = user.introduce; // функсияро бе объект гирифтем
f (); // TypeError: this — undefined, name надорад
Чӣ тавр ислоҳ кардан: тавассути объект даъват кардан — user.introduce(), ё ба функсияи тирдор печондан: const f = () => user.introduce();. Ин аксар вақт рӯй медиҳад, вақте ки методро ба функсияи дигар медиҳанд, масалан setTimeout(user.introduce, 1000) — дар он ҷо низ this гум мешавад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = {
name: "Рустам" ,
introduce () {
console.log (`Я ${this.name}` );
}
};
const f = () => user.introduce (); // печонак: дар дохил даъват боз тавассути нуқта
f (); // → Я Рустам
Барои идоракунии this боз методҳои bind, call ва apply ҳастанд — масалан, user.introduce.bind(user) объектро абадӣ «мебандад». Мо онҳоро баъдтар ҷудо мекунем, ҳоло қоидаи «объект пеш аз нуқта» кифоя аст.
Ишораи ЗС
ЗС баъзан методҳоро бо функсияҳои тирдор «барои кӯтоҳӣ» менависад — ва this вайрон мешавад. Дар ҷавоби ЗС method: () => { ... this ... }-ро диданд — фавран хоҳиш кунед, ки ба method() { } аз нав нависад.
Амалия: мустаҳкам мекунем
Навиштани методҳоро бо this ва ёфтани ду қапқони асосиро меомӯзем.
ВАЗИФАИ 4.1 Омӯзгор худро муаррифӣ мекунад осон
Ба объекти teacher методи introduce()-ро илова кунед, ки ибораро тавассути this мебарорад, ва методи changeSubject(newSubject), ки фанро тағйир медиҳад. Сипас объекти teacher2-ро бо номи «Сабрина», фани «CSS» ва ҳамон методи introduce эҷод кунед (онро аз teacher гиред, аз нав нанависед).
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const teacher = {
name: "Далер" ,
subject: "JavaScript" ,
// методҳои шумо инҷо
};
teacher.introduce ();
teacher.changeSubject ("React" );
teacher.introduce ();
// teacher2-ро эҷод кунед ва teacher2.introduce()-ро даъват намоед
Натиҷаи интизоршаванда Меня зовут Далер, я веду JavaScript
Меня зовут Далер, я веду React
Меня зовут Сабрина, я веду CSS
Ишора 1 Дар дохили методҳо this.name ва this.subject-ро истифода баред, на teacher.name — вагарна teacher2 бо номи бегона сухан мегӯяд.
Ишора 2 const teacher2 = { name: "Сабрина", subject: "CSS", introduce: teacher.___ }; — бе қавсайн, мо худи функсияро мегирем.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 4.2 Кортӣ бонкӣ миёна
Объекти кортро созед (мисоли хаёлии таълимӣ). Методҳо: deposit(amount) — баланс пур кардан ва ба history сатри намуди "+200"-ро сабт кардан; pay(shop, amount) — агар пул кифоя кунад, кам кардан, "-320 Корвон"-ро сабт кардан ва паёми пардохтро баровардан, вагарна рад кардан ва чизеро кам накардан; report() — натиҷаро баровардан. Ҳамаи методҳо тавассути this кор мекунанд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const card = {
owner: "Манижа" ,
balance: 500 ,
history: [],
// методҳои шумо инҷо
};
card.pay ("Корвон" , 320 );
card.deposit (200 );
card.pay ("Чайхана Рохат" , 85 );
card.pay ("Такси" , 500 );
card.report ();
console.log (card.history);
Натиҷаи интизоршаванда Оплата в Корвон: 320 сомони. Остаток: 180
Пополнение: +200. Баланс: 380
Оплата в Чайхана Рохат: 85 сомони. Остаток: 295
Недостаточно средств для Такси: нужно 500, на карте 295
Манижа: баланс 295 сомони, операций: 3
["-320 Корвон", "+200", "-85 Чайхана Рохат"]
Ишора 1 Дар pay аввал санҷиш: if (amount > this.balance) { ...; return; }. return-и барвақт аз метод мебарояд, ва кам кардан дар поён иҷро намешавад.
Ишора 2 Сабт дар таърих: this.history.push(`-${amount} ${shop}`). Шумораи амалиётҳо — дарозии this.history.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 4.3 Ду хаторо бо this ёбед душвор
Ин коди ронандаи таксӣ бо ду хато навишта шудааст, ки ба this марбутанд. Аввал онро иҷро кунед ва хаторо хонед. Ҳарду мушкилро ёбед ва ислоҳ кунед (танҳо усули эълони метод ва усули даъватро тағйир додан мумкин аст). Сипас ронандаи дуюм taxi2-ро — «Шаҳром», 0 сафар, 0 даромад — бо ҳамон методҳое, ки аз taxi гирифта шудаанд, эҷод кунед, ба вай сафарро ба 30 сомонӣ илова кунед ва info()-и ӯро баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const taxi = {
driver: "Абдулло" ,
trips: 0 ,
earned: 0 ,
addTrip: (price) => {
this .trips++;
this .earned += price;
},
info () {
return `${this.driver}: поездок ${this.trips}, заработано ${this.earned} сомони` ;
}
};
taxi.addTrip (25 );
taxi.addTrip (40 );
taxi.addTrip (18 );
const showInfo = taxi.info;
console.log (showInfo ());
// taxi2-ро инҷо эҷод кунед
Натиҷаи интизоршаванда Абдулло: поездок 3, заработано 83 сомони
Шахром: поездок 1, заработано 30 сомони
Ишора 1 Хатои аввал — дар он аст, ки addTrip чӣ тавр эълон шудааст: чунин функсия худи this надорад. Дуюм — дар он, ки info чӣ тавр даъват мешавад: ҳангоми даъвати showInfo() пеш аз нуқта чӣ меистад?
Ишора 2 addTrip(price) { ... } ва console.log(taxi.___()). Барои ронандаи дуюм: addTrip: taxi.addTrip, info: taxi.info.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
05 Деструктуризатсия
Деструктуризатсия — усули кӯтоҳи «ҷудо кардан»-и объект ё массив ба тағйирёбандаҳои алоҳида. Ба ҷойи се сатри const name = user.name; const age = user.age; ... — як сатр.
Монандӣ аз ҳаёт
Шумо аз бозор бо халта омадед: харбуза, нон, анор. Ҳар дафъа ба халта даст дароз кардан мумкин аст — «халта, харбузаро деҳ». Ва мумкин аст фавран ҷобаҷо кард: харбузаро ба рӯи миз, нонро ба нонхона, анорро ба гулдон. Деструктуризатсия — маҳз «мазмунро ба ҷояш ҷобаҷо кардан» аст, то минбаъд фавран гирем.
Аз объект: аз рӯи номи калидҳо
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = { name: "Зарина" , age: 21 , city: "Пенджикент" };
// ба тарзи кӯҳна
const userCity = user.city;
// деструктуризатсия: калидҳои name ва age-ро ба тағйирёбандаҳои ҳамном мегирем
const { name, age } = user;
console.log (name, age); // → Зарина 21
console.log (userCity); // → Пенджикент
Дар чапи = қавсайни фигурӣ на «объект эҷод кардан», балки «аз объект гирифтан»-ро ифода мекунад. Номҳои тағйирёбандаҳо бояд бо калидҳо мувофиқ бошанд, тартиб муҳим нест.
Ном иваз кардан ва қиматҳои пешфарз
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = { name: "Зарина" , age: 21 , city: "Пенджикент" };
// name: userName — «калиди name-ро гир, аммо тағйирёбандаро userName ном бигузор»
const { name: userName } = user;
console.log (userName); // → Зарина
// қимати пешфарз — агар калид нест (undefined)
const { country = "Таджикистан" , city = "Душанбе" } = user;
console.log (country); // → Таджикистан (калид набуд)
console.log (city); // → Пенджикент (калид буд — default лозим нест)
Ду нуқтаро чӣ тавр дар хотир нигоҳ доштан
Дар деструктуризатсияи { аз_куҷо: ба_куҷо }: дар чапи ду нуқта — калиди объект, дар рост — номи тағйирёбандаи нав. Ва = — қимати пешфарз.
Деструктуризатсияи дарунравӣ
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const order = {
id: 77 ,
customer: { name: "Фарход" , phone: "+992 90 111 22 33" },
address: { city: "Душанбе" , street: "проспект Рудаки, 45" }
};
const { id, customer: { name }, address: { street } } = order;
console.log (id, name, street); // → 77 Фарход проспект Рудаки, 45
// customer ва address дар ин ҷо — танҳо «роҳ» аст, тағйирёбандаҳо бо чунин ном нестанд
Аз массив: аз рӯи мавқеъ
Барои массив қавсайни мураббаъ истифода мешавад, ва тағйирёбандаҳо бо тартиб гирифта мешаванд, на бо ном.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const route = ["Душанбе" , "Варзоб" , "Искандеркуль" ];
const [start, stop, finish] = route;
console.log (start); // → Душанбе
console.log (finish); // → Искандеркуль
// унсурро гузаштан — танҳо вергул
const [, , lake] = route;
console.log (lake); // → Искандеркуль
// ду тағйирёбандаро ҷой иваз кардан
let first = "чой" ;
let second = "шакароб" ;
[first, second] = [second, first];
console.log (first, second); // → шакароб чой
Дар параметрҳои функсия
Истифодаи аз ҳама маъмул: функсия объектро мегирад ва фавран онро ҷудо мекунад. Маълум мешавад, ки кадом майдонҳо ба вай лозиманд, ва қиматҳои пешфарзро додан мумкин аст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
function showProduct ({ title, price, currency = "сомони" }) {
console.log (`${title}: ${price} ${currency}` );
}
showProduct ({ title: "Гранат" , price: 15 }); // → Гранат: 15 сомони
showProduct ({ title: "Черешня" , price: 3 , currency: "$" }); // → Черешня: 3 $
// дар callback-ҳои массивҳо
const fruits = [{ title: "Дыня" , price: 12 }, { title: "Виноград" , price: 18 }];
console.log (fruits.map (({ title }) => title)); // → ["Дыня", "Виноград"]
// ва дар гузариш аз ҷуфтҳои объект — акнун фаҳмо аст, ки дар ин ҷо чӣ рӯй медиҳад
for (const [fruit, kg] of Object.entries ({ зардолу: 3 , гранат: 2 })) {
console.log (`${fruit} — ${kg} кг` );
}
// → зардолу — 3 кг
// → гранат — 2 кг
Чаро ин дар React ҳама ҷо ҳаст
Дар фреймворки фронтенди React, ки шумо меомӯзед, компонент додаҳоро ҳамчун объект мегирад — ва қариб ҳамеша онро фавран деструктуризатсия мекунанд. Ва ҳуки useState массиви ду унсурро бармегардонад, ки аз рӯи мавқеъ ҷудо карда мешавад. Ҳоло танҳо шакли шиносро шиносед:
Дар React ин чунин менамояд (иҷро кардан лозим нест)
function ProductCard ({ title, price }) { // деструктуризатсияи объект
const [count, setCount] = useState (0 ); // деструктуризатсияи массив
// ...
}
Хатогиҳои маъмул
1) Хатои имлоӣ дар ном: const { nmae } = user — undefined мегиред, хато намешавад. 2) Деструктуризатсия аз undefined: const { name } = undefined → TypeError. 3) Тағйирёбанда аллакай эълон шудааст: const { name } = user, вақте ки name дар боло аллакай ҳаст → SyntaxError: ... has already been declared. Ном иваз карданро истифода баред. 4) Қимати пешфарз танҳо барои undefined кор мекунад, на барои null ё 0.
Амалия: мустаҳкам мекунем
Обуҳаво, витринаи мағоза ва ҷавоби мураккаби серверро бо брон ҷудо мекунем.
ВАЗИФАИ 5.1 Обуҳаво дар Душанбе осон
Бо як сатри деструктуризатсия city, temp ва sky-ро гиред. Бо сатри алоҳида wind-ро бо номи windSpeed ва humidity-ро бо қимати пешфарзи 25 (дар объект нест) гиред. Танҳо тағйирёбандаҳои навро истифода баред, бе weather. дар баромад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const weather = { city: "Душанбе" , temp: 31 , wind: 4 , sky: "ясно" };
// коди шумо инҷо
Натиҷаи интизоршаванда Душанбе: +31°C, ясно
Ветер: 4 м/с
Влажность: 25%
Ишора 1 Сатри аввал: const { city, temp, sky } = weather;
Ишора 2 Дуюм: const { wind: ___, humidity = ___ } = weather;
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 5.2 Витринаи мағозаи армуғонҳо миёна
Функсияи finalPrice({ price, discount = 0 })-ро нависед, ки нархро бо тахфиф бо фоиз бармегардонад, ва функсияи formatProduct({ title, price, discount = 0 })-ро, ки сатрро барои витрина бармегардонад. Агар тахфиф набошад, дар қавсайн чизе намениварем. Ҳамаи молҳо ва ҷамъи ниҳоии ҳамаи нархҳои бо тахфифро баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const products = [
{ title: "Ковёр 2×3" , price: 900 , discount: 15 },
{ title: "Чайный сервиз" , price: 240 },
{ title: "Сюзане" , price: 600 , discount: 10 },
{ title: "Пиалы, 6 шт." , price: 60 }
];
// коди шумо инҷо
Натиҷаи интизоршаванда Ковёр 2×3: 765 сомони (скидка 15%)
Чайный сервиз: 240 сомони
Сюзане: 540 сомони (скидка 10%)
Пиалы, 6 шт.: 60 сомони
Итого: 1605 сомони
Ишора 1 Нархи бо тахфиф: price - price * discount / 100. Агар discount дода нашуда бошад, қимати пешфарзи 0 кор мекунад — ва нарх тағйир намеёбад.
Ишора 2 Дар дохили formatProduct finalPrice({ price, discount })-ро даъват кунед. Ҷамъ: products.reduce((sum, p) => sum + finalPrice(___), 0).
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 5.3 Ҷавоби сервер бо брон душвор
Сервер ҷавоби амиқ дарунравиро фиристод. Бо як ифодаи деструктуризатсия гиред: id; номи меҳмонро бо номи guestName; санаҳои ворид ва баромадро ба тағйирёбандаҳои checkIn ва checkOut; шаҳри меҳмонхонаро бо номи hotelCity; навъи ҳуҷраи аввалро бо номи roomType; ва breakfast-ро аз booking бо қимати пешфарзи false. Сипас чор сатрро баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const response = {
status: "ok" ,
data: {
booking: {
id: 7781 ,
guest: { firstName: "Сабрина" , lastName: "Назарова" },
dates: ["2026-10-12" , "2026-10-15" ],
hotel: { name: "Памир Лодж" , city: "Хорог" },
rooms: [
{ type: "двухместный" , price: 520 },
{ type: "одноместный" , price: 380 }
]
}
}
};
// const { data: { booking: { ... } } } = response;
Натиҷаи интизоршаванда Бронь №7781 · Сабрина
Хорог: с 2026-10-12 по 2026-10-15
Первая комната: двухместный
Завтрак включён: false
Ишора 1 Роҳро қадам ба қадам тай кунед: data → booking → дар дохил лозимаро бо вергул номбар кунед. Барои меҳмон: guest: { firstName: guestName }.
Ишора 2 Санаҳо — массив аст: dates: [checkIn, checkOut]. Ҳуҷраи аввал — массиви объектҳо: rooms: [{ type: ___ }]. Шаҳр: hotel: { city: ___ }.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
06 Spread ва rest: се нуқта ...
Се нуқтаи ... дар JavaScript ду нақш дорад. Spread («кушодан») массив ё объектро ба унсурҳои алоҳида паҳн мекунад. Rest («боқимонда») баръакс унсурҳои алоҳидаро ба массив ё объект ҷамъ мекунад. Навишт як аст, аммо маъно аз ҷой вобаста аст.
Spread барои массивҳо
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const fruits = ["зардолу" , "гранат" ];
const more = ["дыня" , "виноград" ];
// муттаҳид кардан
const all = [... fruits, ... more];
console.log (all); // → ["зардолу", "гранат", "дыня", "виноград"]
// унсурро ба оғоз ё охир илова кардан, бе тағйири массиви аслӣ
const withCherry = ["черешня" , ... fruits];
console.log (withCherry); // → ["черешня", "зардолу", "гранат"]
// массивро ба аргументҳои функсия паҳн кардан
const prices = [12 , 45 , 7 ];
console.log (Math.max (... prices)); // → 45
Нусха ё истинод?
Чизи хеле муҳим. Аломати = массив ё объектро нусха намекунад — он ба ҳамон чиз ном дуюм медиҳад. Нусхаи воқеӣ — тавассути spread.
Монандӣ аз ҳаёт
const b = a — ин калиди дуюми ҳамон хона аст: диванро ҷой иваз кардед — ҳардуи соҳибон мебинанд. const b = [...a] — ин хонаи нав бо ҳамон мебел аст: дар яке ҳар чӣ хоҳед тағйир медиҳед, дигаре мисли пештара мемонад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const fruits = ["зардолу" , "гранат" ];
const same = fruits; // нусха НЕСТ — ҳамон аст
same.push ("дыня" );
console.log (fruits); // → ["зардолу", "гранат", "дыня"] (вайрон шуд!)
const copy = [... fruits]; // нусхаи воқеӣ
copy.push ("виноград" );
console.log (fruits); // → ["зардолу", "гранат", "дыня"] (тағйир наёфт)
console.log (copy); // → ["зардолу", "гранат", "дыня", "виноград"]
Spread барои объектҳо
Бо объектҳо — ҳамин тавр: нусха бардоштан, муттаҳид кардан ва «як майдонро тағйир додан» дар нусха. Агар калид ду бор вомехӯрад, охирин ғолиб меояд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = { name: "Далер" , age: 20 , city: "Куляб" };
// нусха бо майдони тағйирёфта
const older = { ... user, age: 21 };
console.log (user.age, older.age); // → 20 21
// ду объектро муттаҳид кардан
const contacts = { phone: "+992 91 000 11 22" , telegram: "@daler" };
const full = { ... user, ... contacts };
console.log (Object.keys (full)); // → ["name", "age", "city", "phone", "telegram"]
// тартиб муҳим аст: охирин ғолиб меояд
const wrong = { age: 21 , ... user };
console.log (wrong.age); // → 20 (age аз user 21-ро аз нав навишт)
Чаро фронтенд нусхаҳои навро дӯст медорад
Дар фронтенд (ва махсусан дар React) одат шудааст, ки додаҳои кӯҳнаро тағйир надиҳанд , балки нусхаҳои навро бо тағйирот эҷод кунанд. Ин тағйирнопазирӣ (immutability) номида мешавад. Барои чӣ? Барнома додаҳои кӯҳна ва навро муқоиса мекунад: агар объект ҳамон бошад (шумо онро оддӣ ислоҳ кардед), вай қарор медиҳад, ки чизе тағйир наёфтааст, ва экранро навсозӣ намекунад. Нусхаи нав — сигнали равшан: «додаҳо тағйир ёфтанд, аз нав бикаш».
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const addToCart = (cart, item) => [... cart, item];
const updateQty = (item, qty) => ({ ... item, qty });
const cart = [{ title: "Нон" , qty: 2 }];
const newCart = addToCart (cart, { title: "Чой" , qty: 1 });
console.log (cart.length, newCart.length); // → 1 2
console.log (updateQty (cart[0 ], 5 )); // → { title: "Нон", qty: 5 }
console.log (cart[0 ]); // → { title: "Нон", qty: 2 }
Қапқон: нусха сатҳӣ аст
Spread танҳо сатҳи аввал -ро нусха мекунад. Объектҳо ва массивҳои дарунравӣ нусха намешаванд — нусха ва асл онҳоро якҷоя истифода бурданро давом медиҳанд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const student = { name: "Абдулло" , address: { city: "Турсунзаде" } };
const copy = { ... student };
copy.name = "Абдулло К." ; // сатҳи аввал — нусха, асл бутун аст
copy.address.city = "Душанбе" ; // объекти дарунравӣ — умумӣ!
console.log (student.name); // → Абдулло
console.log (student.address.city); // → Душанбе (хато!)
// дуруст: сатҳи дарунравиро низ нусха мекунем
const student2 = { name: "Мадина" , address: { city: "Худжанд" } };
const moved = { ... student2, address: { ... student2.address, city: "Душанбе" } };
console.log (student2.address.city, moved.address.city); // → Худжанд Душанбе
Нусхаи пурра (амиқ)-ро тавассути structuredClone сохтан мумкин аст — дар мавзӯи 07 ҷудо мекунем.
Rest: «ҳама чизи боқимонда»-ро ҷамъ кардан
Дар параметрҳои функсия ... ҳамаи аргументҳои додашударо ба массив ҷамъ мекунад. Ҳамин тавр функсияеро навиштан мумкин аст, ки ҳар қадар адад мегирад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
function sum (... nums) {
console.log (nums); // ин массиви оддӣ аст
return nums.reduce ((total, n) => total + n, 0 );
}
console.log (sum (10 , 20 , 5 )); // → [10, 20, 5]
// → 35
console.log (sum ()); // → []
// → 0
// rest пас аз параметрҳои оддӣ: якум — алоҳида, боқимонда — ба массив
function order (customer, ... dishes) {
console.log (`${customer} заказал(а): ${dishes.length} блюда` );
}
order ("Зарина" , "курутоб" , "самбуса" , "чой" ); // → Зарина заказал(а): 3 блюда
Дар деструктуризатсия rest «боқимонда»-и объект ё массивро ҷамъ мекунад. Хеле қулай аст, то майдонҳои изофиро бардорем — масалан, паролро пеш аз додани додаҳо ба экран.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const account = { login: "madina" , password: "12345" , email: "m@mail.tj" , city: "Худжанд" };
const { password, ... safeUser } = account;
console.log (safeUser); // → { login: "madina", email: "m@mail.tj", city: "Худжанд" }
const [winner, ... others] = ["Фарход" , "Зарина" , "Рустам" ];
console.log (winner); // → Фарход
console.log (others); // → ["Зарина", "Рустам"]
Spread — кушода мегирад Rest — ҷамъ мекунад Дар куҷо меистад Дар рости =, дар дохили [ ] ё { }, дар аргументҳо ҳангоми даъват Дар параметрҳои функсия, дар чапи = дар деструктуризатсия Чӣ мекунад Массив/объект → унсурҳои алоҳида Унсурҳои алоҳида → массив/объект Мисол [...a, ...b], { ...user, age: 21 }, Math.max(...nums)function f(...args), const { password, ...rest } = userМаҳдудият Якчанд маротиба дар як ифода мумкин аст Танҳо як маротиба ва танҳо дар охир
Хатогиҳои маъмул
1) Гумон кардан, ки = массив ё объектро нусха мекунад. 2) Rest на дар охир: function f(...items, last) → SyntaxError. 3) Фаромӯш кардан, ки нусха сатҳӣ аст, ва объекти дарунравии «нусха»-ро тағйир додан. 4) { age: 21, ...user } ба ҷойи { ...user, age: 21 } — қимати нав бо қимати кӯҳна аз нав навишта мешавад.
Амалия: мустаҳкам мекунем
Менюро ҷамъ мекунем, профилро бе мутатсия навсозӣ мекунем ва додаҳои махфиро пинҳон мекунем.
ВАЗИФАИ 6.1 Менюи чойхона осон
Тавассути spread fullMenu-ро эҷод кунед: аввал ҳамаи таомҳои наҳорӣ, баъд нисфирӯзӣ, дар охир «шакароб». specials-ро эҷод кунед: «курутоб», ва паси он ҳамаи таомҳои нисфирӯзӣ. Массивҳои аслӣ набояд тағйир ёбанд. fullMenu, specials, lunch ва шумораи таомҳо дар менюи пурраро баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const breakfast = ["чой" , "нон" , "каймак" ];
const lunch = ["оши палав" , "самбуса" ];
// коди шумо инҷо
Натиҷаи интизоршаванда ["чой", "нон", "каймак", "оши палав", "самбуса", "шакароб"]
["курутоб", "оши палав", "самбуса"]
["оши палав", "самбуса"]
Всего блюд: 6
Ишора 1 Дар дохили қавсайни мураббаъ spread ва унсурҳои оддиро омехта кардан мумкин аст: [...a, "x"].
Ишора 2 const specials = ["курутоб", ___];
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 6.2 Профил бе мутатсия миёна
Ду функсия нависед, ки объекти аслиро тағйир намедиҳанд , балки нав бармегардонанд: moveTo(profile, city) — профил бо шаҳри дигар; addSkill(profile, skill) — профиле, ки дар он skills — массиви нав бо малакаи иловашуда. Сатри охирин месанҷад, ки массивҳои малакаҳо дар ҳақиқат гуногунанд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const profile = { username: "@madina_fe" , city: "Худжанд" , skills: ["HTML" , "CSS" ] };
// функсияҳои шумо инҷо
const p2 = moveTo (profile, "Душанбе" );
const p3 = addSkill (p2, "JavaScript" );
console.log (profile);
console.log (p3);
console.log (profile.skills === p3.skills);
Натиҷаи интизоршаванда { username: "@madina_fe", city: "Худжанд", skills: ["HTML", "CSS"] }
{
username: "@madina_fe",
city: "Душанбе",
skills: ["HTML", "CSS", "JavaScript"]
}
false
Ишора 1 moveTo — як сатр: нусхаи объект ва қимати нави city пас аз он.
Ишора 2 ({ ...profile, skills: [...profile.___, skill] }). Агар profile.skills.push(skill) кунед, массиви аслиро тағйир медиҳед — сатри охирин true-ро нишон медиҳад, ва якум — малакаи изофиро.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 6.3 Расонидан, махфиятҳо ва навбат душвор
Се функсия нависед. total(deliveryFee, ...prices) — ҷамъи хароҷоти расонидан ва ҳамаи нархҳо (нархҳо ҳар қадар шуда метавонанд, ҳатто сифр). hideSecrets(account) — объекти нав бе password ва pin (тавассути rest дар деструктуризатсия). nextInQueue(queue) — сатр дар бораи аввалини навбат ва шумораи интизорон; массивро мустақиман дар параметрҳои функсия ҷудо кунед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const account = { login: "rustam92" , password: "qwerty" , pin: "4321" , name: "Рустам" , city: "Бохтар" };
const queue = ["Зарина" , "Далер" , "Манижа" , "Фарход" ];
// функсияҳои шумо инҷо
console.log (total (10 , 30 , 28 , 7 ));
console.log (total (15 ));
console.log (hideSecrets (account));
console.log (account.password);
console.log (nextInQueue (queue));
Натиҷаи интизоршаванда 75
15
{ login: "rustam92", name: "Рустам", city: "Бохтар" }
qwerty
Первый в очереди: Зарина, ждут: 3
Ишора 1 Дар total параметри prices — массив аст, онро тавассути reduce бо қимати оғозӣ ҷамъ кардан қулай аст.
Ишора 2 const { password, pin, ...rest } = account; дар дохили hideSecrets. Барои навбат: function nextInQueue([first, ...___]) { ... }.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
07 JSON: додаҳо чӣ тавр сафар мекунанд
Сервер ва браузер — барномаҳои гуногунанд, аксар вақт дар компютерҳои гуногун. Объекти JavaScript-ро «аз роҳи сим» чун ҳаст фиристодан мумкин нест: дар шабака матн интиқол дода мешавад. Бинобар ин JSON (JavaScript Object Notation) ихтироъ шуд — формати матнӣ барои мубодилаи додаҳо. Вай қариб мисли объекти JS менамояд, аммо ин сатр аст.
Монандӣ аз ҳаёт
Шумо аз Хуҷанд ба Душанбе кӯч мекунед. Ҷевон дар мошин пурра ҷо намешавад — шумо онро ҷудо мекунед, дар қуттиҳо бо дастур бастабандӣ мекунед, ва дар ҷойи нав баръакс ҷамъ мекунед. JSON.stringify — «ҷудо ва бастабандӣ кардан»-и объект ба сатр. JSON.parse — «баръакс ҷамъ кардан»-и объект аз сатр.
JSON-ро дар куҷо вомехӯред:
Ҷавобҳои сервер. Обуҳаво, рӯйхати молҳо, фармоишҳо — ҳама бо сатри JSON меояд, ки онро ба объект табдил додан лозим аст.
localStorage — захира дар браузер. Он танҳо сатрҳоро нигоҳ дошта метавонад, бинобар ин объектҳоро ба он ҷо дар шакли JSON мегузоранд.
Файлҳои танзими лоиҳаҳо, масалан package.json.
JSON чунин менамояд
{
"name" : "Мадина" ,
"age" : 19 ,
"isStudent" : true ,
"skills" : ["HTML" , "CSS" ],
"address" : { "city" : "Худжанд" },
"phone" : null
}
Қоидаҳои JSON сахттар аз объекти JS мебошанд
Чӣ Объекти JS JSON Калидҳо бе нохунак мумкин аст: name танҳо дар нохунаки дукарата: "name" Сатрҳо "...", '...', `...`танҳо "..." Қиматҳо ҳар чиз, аз ҷумла функсияҳо ва undefined сатр, адад, true/false, null, массив, объект Вергул пас аз охирин мумкин мумкин нест Шарҳҳо мумкин мумкин нест
JSON.stringify: объект → сатр
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const order = { id: 501 , dish: "Курутоб" , price: 28 , paid: true , extras: ["нон" , "чой" ] };
const json = JSON.stringify (order);
console.log (json); // → {"id":501,"dish":"Курутоб","price":28,"paid":true,"extras":["нон","чой"]}
console.log (typeof order, typeof json); // → object string
console.log (json.length); // → 73 (это просто строка из 73 символов)
Барои он ки JSON барои одам хондан қулай бошад, боз ду аргумент диҳед: JSON.stringify(obj, null, 2). Аргументи сеюм — чанд фосила дар ақиб, дуюм ҳоло ҳамеша null аст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const weather = { city: "Хорог" , temp: 18 , wind: 6 };
console.log (JSON.stringify (weather, null , 2 ));
// {
// "city": "Хорог",
// "temp": 18,
// "wind": 6
// }
Функсияҳо ва undefined ба JSON намеафтанд — онҳо оддӣ нопадид мешаванд:
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const user = { name: "Нилуфар" , age: undefined , greet () { return "Салом" ; } };
console.log (JSON.stringify (user)); // → {"name":"Нилуфар"}
JSON.parse: сатр → объект
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const text = '{"city":"Душанбе","temp":31,"sunny":true}' ;
console.log (text.temp); // → undefined (у строки нет свойства temp!)
const weather = JSON.parse (text);
console.log (typeof text, typeof weather); // → string object
console.log (weather.temp + 1 ); // → 32
console.log (weather.city); // → Душанбе
Хатогиҳои таҳлил ва try/catch
Агар сатр — JSON-и дуруст набошад (нохунаки ягона, вергули изофӣ, ҷавоби бурида), JSON.parse хатои SyntaxError-ро мепартояд, ва барнома меистад. Барои ин нашавад, сохтори try...catch-ро истифода мебаранд:
try { ... } — «кӯшиш кун иҷро кунӣ». Агар ҳама чиз хуб бошад, блоки catch гузаронида мешавад.
catch (error) { ... } — «агар дар дохили try чизе афтод, ба ин ҷо биё». Дар error объекти хато мемонад, вай name ва message дорад.
Барнома кор карданро давом медиҳад аз сатри баъд аз catch.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const bad = "{'city': 'Хорог'}" ; // нохунаки ягона — ин JSON нест
try {
const data = JSON.parse (bad);
console.log (data.city);
} catch (error) {
console.log ("Не удалось прочитать данные" ); // → Не удалось прочитать данные
console.log (error.name); // → SyntaxError
}
console.log ("Программа работает дальше" ); // → Барнома минбаъд кор мекунад
Захира дар localStorage
localStorage додаҳоро дар браузер ҳатто пас аз аз нав боркунии саҳифа нигоҳ медорад — масалан, сабад ё мавзӯи ороиш. Вай танҳо сатрҳоро қабул мекунад, бинобар ин бе JSON иҷро намешавад. Ин кодро дар лоиҳаи худ иҷро кунед: дар равзанаи дарунсохти иҷро localStorage шояд дастнорас бошад.
Код барои лоиҳаи шумо
const cart = [{ id: 1 , title: "Нон" , qty: 3 }, { id: 4 , title: "Мёд" , qty: 1 }];
// захира кардан: объект → сатр
localStorage.setItem ("cart" , JSON.stringify (cart));
// хондан: сатр → объект. Агар калид нест, getItem null бармегардонад
const saved = JSON.parse (localStorage.getItem ("cart" )) ?? [];
console.log (saved.length); // 2
Хатои маъмул: stringify-ро фаромӯш карданд
Агар объектро ба localStorage бе JSON.stringify гузоред, он ба сатри бефоидаи "[object Object]" табдил меёбад, ва додаҳо нест мешаванд.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const cart = { id: 1 , qty: 3 };
console.log (String (cart)); // → [object Object] (ана ин чиз бе JSON захира мешавад)
console.log (JSON.stringify (cart)); // → {"id":1,"qty":3}
Нусхаи амиқ
Қапқони нусхаи сатҳиро аз мавзӯи 06 ба ёд доред? Ду усул ҳаст, ки нусхаи пурра -ро бо ҳамаи объектҳои дарунравӣ созем:
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const original = { name: "Шахром" , address: { city: "Бохтар" }, skills: ["HTML" ] };
const copy1 = JSON.parse (JSON.stringify (original)); // усули кӯҳна
const copy2 = structuredClone (original); // усули муосир
copy1.address.city = "Душанбе" ;
copy2.skills.push ("CSS" );
console.log (original.address.city); // → Бохтар (тағйир наёфт)
console.log (original.skills); // → ["HTML"]
Усули JSON камбудӣ дорад: вай функсияҳо ва undefined-ро гум мекунад. structuredClone эҳтиёткортар аст, аммо функсияҳоро низ нусха намекунад (хато медиҳад). Барои додаҳои оддӣ — объектҳо, массивҳо, сатрҳо ва ададҳо — ҳарду мувофиқанд.
Мисоли воқеӣ: обуҳаво дар Душанбе
Ҷавоби хизмати обуҳаво тақрибан чунин менамояд. Мо сатрро ба объект табдил медиҳем, лозимаро бо деструктуризатсия мегирем ва гармтарин рӯзро меҷӯем.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const response = `{
"city": "Душанбе",
"current": { "temp": 33, "wind": 3, "description": "солнечно" },
"forecast": [
{ "day": "Пн", "max": 34, "min": 19 },
{ "day": "Вт", "max": 36, "min": 21 },
{ "day": "Ср", "max": 31, "min": 18 }
]
}` ;
const data = JSON.parse (response);
const { city, current: { temp, description }, forecast } = data;
console.log (`${city}: ${temp}°C, ${description}` ); // → Душанбе: 33°C, солнечно
const hottest = forecast.reduce ((best, d) => (d.max > best.max ? d : best), forecast[0 ]);
console.log (`Самый жаркий день: ${hottest.day} (${hottest.max}°C)` ); // → Самый жаркий день: Вт (36°C)
const nights = forecast.map (({ day, min }) => `${day}: ${min}°` );
console.log (nights); // → ["Пн: 19°", "Вт: 21°", "Ср: 18°"]
Ишораи ЗС
Агар JSON.parse эътироз кунад, ва сатр дароз бошад — онро ба чат бо ЗС гузоред ва хоҳиш кунед: «ёб, ки дар ин ҷо қоидаҳои JSON вайрон шудаанд, ва сатри ислоҳшударо нишон деҳ». Аммо баъд ҳатман сатри ислоҳшударо худатон тавассути JSON.parse санҷед.
Амалия: мустаҳкам мекунем
Додаҳоро ба JSON бастабандӣ мекунем, пешгӯии обуҳаворо таҳлил мекунем ва меомӯзем, ки бо додаҳои вайроншуда наафтем.
ВАЗИФАИ 7.1 Харбузаро бастабандӣ кардан осон
Объекти fruit-ро ба сатри JSON json табдил диҳед. Худи сатр, навъи он, ва баъд варианти зеборо бо ақиби 2 фосила баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const fruit = { name: "Дыня" , from: "Бохтар" , price: 12 , weightKg: 3 , fresh: true };
// коди шумо инҷо
Натиҷаи интизоршаванда {"name":"Дыня","from":"Бохтар","price":12,"weightKg":3,"fresh":true}
string
{
"name": "Дыня",
"from": "Бохтар",
"price": 12,
"weightKg": 3,
"fresh": true
}
Ишора 1 Навъро бо оператори typeof мефаҳмем.
Ишора 2 Варианти зебо: JSON.stringify(fruit, ___, 2).
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 7.2 Пешгӯӣ барои Хуҷанд миёна
Сервер сатри пешгӯиро фиристод. Онро ба объект табдил диҳед ва баровед: шаҳр; массиви рӯзҳое, ки ҳадди аксар аз 30° боло аст; ҳарорати миёнаи ҳадди аксар барои 5 рӯз.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const response = '{"city":"Худжанд","days":[{"day":"Пн","max":29},{"day":"Вт","max":33},{"day":"Ср","max":35},{"day":"Чт","max":30},{"day":"Пт","max":27}]}' ;
// коди шумо инҷо
Натиҷаи интизоршаванда Город: Худжанд
Жаркие дни: ["Вт", "Ср"]
Средняя температура: 30.8°C
Ишора 1 Аввал const data = JSON.parse(response); — минбаъд бо data.days мисли массиви оддии объектҳо кор мекунед. Диққат диҳед: 30 — ин «болотар аз 30» нест.
Ишора 2 Рӯзҳои гарм: filter, баъд map(d => d.___). Баровардани массив дар паҳлӯи матн: console.log("Жаркие дни:", hot).
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 7.3 Паёмҳои чат ва «захира» душвор
Қисми паёмҳо вайроншуда омад. safeParse(str)-ро нависед: объект ё null бармегардонад, агар сатр — JSON набошад (try...catch-ро истифода баред). Ҳар паём ё қайди вайроншавиро баровед (рақамро аз 1 ҳисоб кунед), баъд чанд адад хонда шуд. Дар қисми дуюм объекти storage localStorage-ро тасвир мекунад (танҳо сатрҳоро нигоҳ медорад): save(key, value) ва load(key)-ро нависед, ки дар он load safeParse-ро истифода мебарад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const messages = [
'{"from":"Фарход","text":"Салом!"}' ,
"{'from':'Мадина','text':'Рахмат'}" ,
'{"from":"Далер","text":"Хуш омадед",}' ,
'{"from":"Зарина","text":"Дарс соат 18:00"}'
];
function safeParse (str) {
// коди шумо инҷо
}
// қисми 1: паёмҳо ва "Прочитано: ... из ..."-ро баровед
// қисми 2
const storage = {};
// function save(key, value) { ... }
// function load(key) { ... }
// save("draft", { to: "Мадина", text: "Завтра в 10" });
// console.log(typeof storage.draft);
// console.log(load("draft").text);
// console.log(load("missing"));
Натиҷаи интизоршаванда Фарход: Салом!
Сообщение 2 повреждено
Сообщение 3 повреждено
Зарина: Дарс соат 18:00
Прочитано: 2 из 4
string
Завтра в 10
null
Ишора 1 Дар try натиҷаи JSON.parse(str)-ро баргардонед, дар catch — null. JSON.parse(undefined) низ хато мепартояд, бинобар ин load("missing") худаш null бармегардонад.
Ишора 2 Барои рақамҳо аз for (let i = 0; i < messages.length; i++) гузаред ва i + 1-ро баровед. save: storage[key] = JSON.___(value); load: return safeParse(storage[key]).
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
08 Амалияи ниҳоӣ
Вақти он расид, ки ҳар он чиро, ки дар се дарс медонед, якҷоя кунем: функсияҳо, массивҳо бо методҳо, объектҳо, деструктуризатсия, spread ва JSON. Чунин вазифаҳо — аллакай порчаҳои хурди барномаҳои воқеӣ мебошанд: мағоза, рӯзномаи баҳоҳо, хизмати таксӣ.
Ба шакли додаҳо нигоҳ кунед. Ин чист: массиви объектҳо? Объект бо массив дар дохил? Як унсурро тавассути console.log баровед.
Вазифаро ба қадамҳо ҷудо кунед. «Интихоб кардан → ҳисоб кардан → мураттаб кардан → баровардан». Ҳар қадам — як метод ё функсияи хурд.
Пас аз ҳар қадам санҷед. filter навиштед — натиҷаро баровед, ва танҳо баъд map нависед.
Додаҳои аслиро вайрон накунед. Пеш аз sort нусхаи [...arr]-ро созед, ба ҷойи тағйири объект — { ...obj, майдон: қимат }.
Амалия: вазифаҳои калон
Шитоб накунед. Қадам ба қадам ҳал кунед ва натиҷаҳои миёнагиро санҷед.
ВАЗИФАИ 8.1 Сабади мағозаи интернетӣ осон
Феҳристи молҳо ва сабад ҳаст, ки дар он барои ҳар мол танҳо id ва миқдор нишон дода шудааст. Барои ҳар мавқеи сабад молро дар феҳрист ёбед ва сатри чекро баровед. Сипас ҷамъро баровед. Расонидан 15 сомонӣ, аммо ройгон, агар маблағ аз 150 сомонӣ бошад. Дар охир — маблағи пардохт.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const products = [
{ id: 1 , title: "Нон" , price: 4 },
{ id: 2 , title: "Чой кабуд, 100 г" , price: 18 },
{ id: 3 , title: "Зардолу сушёный, 1 кг" , price: 45 },
{ id: 4 , title: "Мёд горный, 0.5 кг" , price: 70 }
];
const cart = [
{ id: 1 , qty: 3 },
{ id: 3 , qty: 2 },
{ id: 4 , qty: 1 }
];
// коди шумо инҷо
Натиҷаи интизоршаванда Нон × 3 = 12 сомони
Зардолу сушёный, 1 кг × 2 = 90 сомони
Мёд горный, 0.5 кг × 1 = 70 сомони
Сумма: 172 сомони
Доставка: бесплатно
К оплате: 172 сомони
Ишора 1 Барои ҳар мавқеъ: const product = products.find(p => p.id === item.___);. Қулай аст, ки аввал массиви сатрҳои чекро тавассути map созем: { title, price, qty, sum }.
Ишора 2 Ҷамъ — reduce бар сабад. Расонидан: const delivery = sum >= 150 ? 0 : 15;, ва барои матн — боз як санҷиш: delivery === 0 ? "бесплатно" : ___.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 8.2 Рейтинги гурӯҳи MakeFirstStep миёна
Ҳар донишҷӯ массиви баҳоҳо барои се лоиҳа дорад. Массиви нав withAverage-ро эҷод кунед, ки дар он ҳар донишҷӯ боз майдони average дорад — бали миёна, то як рақам пас аз нуқта мудаввар шуда. Рейтингро аз рӯи камшавии миёна, донишҷӯи беҳтарин ва бали миёнаи гурӯҳро аз рӯи ҳамаи баҳоҳо (низ бо як рақам) баровед. Сатри охирин месанҷад, ки массиви аслӣ тағйир наёфтааст.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const students = [
{ name: "Фарход" , city: "Душанбе" , scores: [85 , 90 , 78 ] },
{ name: "Мадина" , city: "Худжанд" , scores: [95 , 88 , 92 ] },
{ name: "Рустам" , city: "Куляб" , scores: [70 , 65 , 80 ] },
{ name: "Зарина" , city: "Душанбе" , scores: [88 , 94 , 91 ] },
{ name: "Шахром" , city: "Истаравшан" , scores: [60 , 75 , 72 ] }
];
// коди шумо инҷо
console.log ("average" in students[0 ]);
Натиҷаи интизоршаванда 1. Мадина — 91.7
2. Зарина — 91
3. Фарход — 84.3
4. Рустам — 71.7
5. Шахром — 69
Лучший студент: Мадина (Худжанд)
Средний балл группы: 81.5
false
Ишора 1 Мудаввар кардан то як рақам: Math.round(x * 10) / 10. Объекти нав бо майдони иловагӣ: students.map(s => ({ ...s, average: ___ })).
Ишора 2 Рейтинг: [...withAverage].sort((a, b) => b.average - a.average), рақами ҷой — индекс + 1 (параметри дуюми callback). Миёнаи гурӯҳ: аввал ҳамаи баҳоҳоро ба як массив тавассути spread ҷамъ кунед, масалан дар reduce: (all, s) => [...all, ...s.scores].
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 8.3 Ҳисоботи хизмати таксӣ душвор
Сервер сатри JSON-ро бо фармоишҳои рӯз фиристод. Онро ба массив табдил диҳед, танҳо иҷрошудаҳоро (status === "done") монед, даромадро ҳисоб кунед. Объекти-хулосаро аз рӯи ронандагон ҷамъ кунед: барои ҳар кадом — маблағ ва шумораи сафарҳо. Ронандагонро аз рӯи камшавии маблағ баровед. Дар охир гаронтарин сафари иҷрошударо ёбед ва онро бо деструктуризатсияи объект баровед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const serverResponse = `[
{"id": 1, "driver": "Шахром", "from": "Шохмансур", "to": "Ирам", "price": 22, "status": "done"},
{"id": 2, "driver": "Абдулло", "from": "Корвон", "to": "Аэропорт", "price": 35, "status": "done"},
{"id": 3, "driver": "Шахром", "from": "Варзоб", "to": "Сино", "price": 60, "status": "cancelled"},
{"id": 4, "driver": "Далер", "from": "проспект Рудаки", "to": "Шохмансур", "price": 18, "status": "done"},
{"id": 5, "driver": "Абдулло", "from": "Ирам", "to": "Корвон", "price": 25, "status": "done"},
{"id": 6, "driver": "Шахром", "from": "Аэропорт", "to": "Сино", "price": 40, "status": "done"}
]` ;
// коди шумо инҷо
Натиҷаи интизоршаванда Выполнено заказов: 5 из 6
Выручка: 140 сомони
Шахром: 62 сомони, поездок: 2
Абдулло: 60 сомони, поездок: 2
Далер: 18 сомони, поездок: 1
Самая дорогая: Аэропорт → Сино, 40 сомони (Шахром)
Ишора 1 Хулоса аз рӯи ронандагон — объект аст, ки дар он калид — ном: { Шахром: { sum: 62, trips: 2 }, ... }. Онро бо давра аз болои фармоишҳои иҷрошуда ҷамъ кунед, мисли ҳисобкунаки овозҳо дар вазифаи 1.3. Барои мураттаб кардан онро тавассути Object.entries ба массив табдил диҳед.
Ишора 2 Мураттабкунии ҷуфтҳо: Object.entries(stats).sort((a, b) => b[1].sum - a[1].sum), ва дар давра — for (const [driver, { sum, trips }] of ___). Гаронтарин — reduce бо қимати оғозии done[0], баъд const { from, to, price, driver } = ___;.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
09 Ҳилаҳо: чӣ тавр бо ЗС зудтар код навиштан
Дар се дарс шумо луғатеро омӯхтед, ки фронтенд бо он сухан мегӯяд: функсияҳо, массивҳо, методҳо, объектҳо. Акнун шумо метавонед на танҳо «аз ЗС сайт сохтанро хоҳиш кунед», балки вазифаҳои дақиқ гузоред ва ҷавобҳоро санҷед . Маҳз бо ҳамин барномасози хуб бо ЗС аз одаме, ки кодро тасодуфӣ нусха мекунад, фарқ мекунад.
1. Бо забони JS сухан гӯед
Сохторҳо ва методҳоро ҳар қадар дақиқтар ном баред, ҷавоб ҳамон қадар дақиқтар мешавад. Муқоиса кунед:
ба тарзе кун, ки молҳои арзон нишон дода шаванд ва ҳамагӣ чандторо ҳисоб кунНусха бардоштан
Массиви объектҳои products бо майдонҳои title (сатр) ва price (адад, бо сомонӣ) ҳаст. Функсияи тирдори cheapSummary(products)-ро нависед, ки: 1) тавассути filter молҳои бо price камтар аз 100-ро мемонад; 2) тавассути map онҳоро ба сатрҳои намуди "Пиала — 15 сомонӣ" табдил медиҳад; 3) тавассути reduce (бо қимати оғозии 0) ҷамъи нархҳои онҳоро ҳисоб мекунад. Объекти { lines, total }-ро баргардон. Массиви аслиро тағйир надеҳ.Нусха бардоштан
Дар промпти дуюм як калимаи изофӣ нест, аммо ЗС аллакай дар шакли ҷавоб хато карда наметавонад: шумо додаҳо, методҳо, номи функсия ва формати натиҷаро ном бурдед.
2. Ба ЗС шакли додаҳоро диҳед
Мисоли додаҳо (2–3 объект, на 500) ва баромади дақиқи интизоршаванда -ро гузоред. Ин усули аз ҳама қавӣ аст: ЗС ҳам вуруд ва ҳам хуруҷро мебинад.
Додаҳо: const orders = [ { id: 1, driver: "Шахром", price: 22, status: "done" }, { id: 2, driver: "Абдулло", price: 35, status: "cancelled" } ]; Бояд маҳз чунин баромад ба консол гирифта шавад: Шахром: 22 сомони Итого: 22 сомони Фармоишҳои бекоршударо ҳисоб намекунем.Нусха бардоштан
3. Додаҳои санҷишӣ эҷод кунед
Вақтро ба навиштани 15 моли дастӣ сарф накунед. ЗС додаҳоро хеле хуб эҷод мекунад — махсусан агар фавран майдонҳо, навъҳо ва заминаи маҳаллиро нишон диҳед.
Массиви JSON-и 15 молро барои мағозаи интернетии Душанбе эҷод кун. Майдонҳо: id (адад аз 1), title (сатр бо забони русӣ: маҳсулот, зарфҳо, армуғонҳо), price (адади бутун бо сомонӣ аз 3 то 900), category (яке аз: "продукты", "кухня", "сувениры"), inStock (true/false). 3 молро бо inStock: false ва ҳадди аққал 2 молро гаронтар аз 500 бисоз. Ҷавоб — танҳо JSON-и дуруст, бе шарҳҳо.Нусха бардоштан
Хоҳиши «3 мол бо false» ва «2 гаронтар аз 500» тасодуфӣ нест: ин тавр дар додаҳо ҳатман ҳолатҳое мешаванд, ки дар онҳо коди шумо санҷида мешавад.
4. Хоҳиш кунед, ки сатр ба сатр шарҳ диҳад ва баромадро пешгӯӣ кунад
Код гирифтед — хоҳиш кунед: «ҳар сатрро шарҳ деҳ ва нависед, ки console.log чӣ мебарорад». Сипас ▶ Иҷро -ро пахш кунед ва муқоиса намоед. Агар ЗС нодуруст пешгӯӣ кард — маънои онро дорад, ки вай худаш кодро то охир намефаҳмад, ва бе санҷиш ба ӯ боварӣ кардан мумкин нест.
5. Рефакторинг — бо шарти «рафторро тағйир надода»
Ин кодро тавассути функсияҳои тирдор, деструктуризатсия дар параметрҳо ва методҳои массив ба ҷойи for аз нав нависед. Рафтор ва баромад ба консолро тағйир додан мумкин нест. Пас аз код бо рӯйхат нишон деҳ, ки маҳз чиро тағйир додӣ. [коди шумо]Нусха бардоштан
Пас аз рефакторинг кодҳои кӯҳна ва навро бо ҳамон додаҳо иҷро кунед: баромад бояд аломат ба аломат мувофиқ ояд.
6. Ислоҳи хато: код + матни дақиқи хато + чӣ интизор будед
кор намекунад чароНусха бардоштан
Коди зер бо хато меафтад: TypeError: Cannot read properties of undefined (reading 'name') Интизор будам, ки "Я Рустам" баромад мекунад. Сабабро бо калимаҳои оддӣ шарҳ деҳ ва ислоҳи ҳадди ақалро нишон деҳ, бе аз нав навиштани ҳама чиз. [коди шумо]Нусха бардоштан
7. Ҳолатҳои канориро хоҳиш кунед
Коде, ки дар додаҳои «хуб» кор мекунад, метавонад дар воқеӣ биафтад. Ба промпт илова кунед: «санҷ, ки агар массив холӣ бошад; агар объект майдони address надошта бошад; агар price ба undefined баробар бошад, чӣ мешавад». Ё аз ЗС хоҳиш кунед: «5 даъвати функсияро бо ҳолатҳои канорӣ ва натиҷаи интизоршаванда барои ҳар кадом бинавис».
8. Хатогиҳои маъмули ЗС, ки шумо акнун худатон мегиред
Дар ҷавоби ЗС чӣ мебинед Мушкил дар чист Чӣ тавр ислоҳ кардан arr.sort(...) мустақиман бар додаҳои аслӣsort массиви аслиро тағйир медиҳад[...arr].sort(...)reduce((sum, p) => sum + p.price)Қимати оғозӣ нест — аввалин sum объект мешавад, ва "[object Object]..." мебарояд reduce(..., 0)method: () => { this.x }Функсияи тирдор this-и худӣ надорад method() { this.x }varЭълони кӯҳна, доираи намоёнии ғайриоддӣ const, ва дар ҷое ки тағйир додан лозим аст — letuser.address.city барои додаҳои ихтиёрӣМеафтад, агар суроға набошад user.address?.city ?? "—"arr.sum(), obj.length, arr.findAll()Методҳои ихтироъшуда — чунин методҳо нестанд Дар ҳуҷҷатгузорӣ (MDN) ё бо иҷро санҷед const copy = obj «барои нусха»Ин истинод аст, на нусха { ...obj } ё structuredClone(obj)
9. Қоидаи асосӣ
Кодеро, ки шарҳ дода наметавонед, ҷойгир накунед
Агар шумо гуфта наметавонед, ки ҳар сатр чӣ мекунад, — вақте вайрон шавад, онро ислоҳ карда наметавонед. Бо қадамҳои хурд пеш равед: як функсия дар як вақт . Хоҳиш кардед — хондед — иҷро кардед — фаҳмидед — танҳо баъд навбатӣ.
Қолаби универсалии промпт
Нусха кунед ва барои вазифаи худ пур кунед. Панҷ блок қариб ҳамаи сабабҳои ҷавобҳои бадро мепӯшонад.
Замина: ман JavaScript меомӯзам (функсияҳо, массивҳо, объектҳо). [лоиҳа чӣ аст: мағоза / рӯзномаи баҳоҳо / ...]-ро менависам. Додаҳо (мисол): [2–3 объект ё порчаи JSON-ро гузоред] Вазифа: функсияи [ном]([параметрҳо])-ро нависед, ки [қадам ба қадам чӣ мекунад]. Натиҷаи интизоршаванда барои мисоли боло: [баромади дақиқ]. Маҳдудиятҳо: танҳо const/let, функсияҳои тирдор, методҳои массив (filter/map/find/reduce), деструктуризатсия дар ҷое ки мувофиқ аст. Додаҳои аслиро тағйир надеҳ. Бе китобхонаҳо. Ҳолатҳои канориро ба назар гир: массиви холӣ, майдони набуда. Формати ҷавоб: аввал код, баъд шарҳ қадам ба қадам бо забони тоҷикӣ, баъд 3 мисоли даъват бо баромади интизоршаванда.Нусха бардоштан
Амалия бо ЗС
Дар ин вазифаҳо асосӣ — на гирифтани код, балки санҷидани он аст. Натиҷаро бо тугмаи «Иҷро» муқоиса кунед.
ВАЗИФАИ 9.1 Промпте, ки аз бори аввал кор мекунад осон
Аз рӯи қолаби универсалӣ промпт таҳия кунед, то ЗС функсияи groupByCity(students)-ро нависад: он объектеро бармегардонад, ки калид — шаҳр, қимат — массиви номҳои донишҷӯёни ҳамон шаҳр аст. Талабҳо дар промпт: тавассути reduce, массиви аслиро тағйир надиҳад, барои массиви холӣ {}-ро баргардонад. Ҷавоби ЗС-ро ба коди зер гузоред ва иҷро кунед. Агар баромад мувофиқ наомад — бо даст ислоҳ накунед, балки промптро дақиқ кунед.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const students = [
{ name: "Фарход" , city: "Душанбе" },
{ name: "Мадина" , city: "Худжанд" },
{ name: "Шахром" , city: "Душанбе" },
{ name: "Нилуфар" , city: "Бохтар" },
{ name: "Далер" , city: "Худжанд" }
];
// функсияи groupByCity-ро аз ЗС инҷо гузоред
console.log (groupByCity (students));
console.log (groupByCity ([]));
console.log (students.length);
Натиҷаи интизоршаванда {
Душанбе: ["Фарход", "Шахром"],
Худжанд: ["Мадина", "Далер"],
Бохтар: ["Нилуфар"]
}
{}
5
Ишора 1 Ба промпт массиви students-ро пурра ва натиҷаи интизоршавандаро гузоред — ин тавр ЗС шакли дақиқи вуруд ва хуруҷро мебинад.
Ишора 2 Ҷавоби ЗС-ро бо чашм санҷед: оё reduce қимати оғозии {} дорад? Оё var нест? Оё шумо ҳар сатрро шарҳ дода метавонед? Агар не — аз ЗС хоҳиш кунед, ки сатр ба сатр шарҳ диҳад.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 9.2 ЗС хатоҳоро меёбад, шумо — месанҷед миёна
Дар ин код се хато ҳаст — ҳама аз ҷадвали «Хатогиҳои маъмули ЗС». Аввал кӯшиш кунед, ки онҳоро худатон ёбед. Баъд кодро ба ЗС бо промпт ба услуби банди 6 фиристед (код + чӣ баромад мекунад + чӣ интизор будед) ва муқоиса кунед: оё вай ҳар се хаторо ёфт? Оё сабаби ҳар кадомро шарҳ дод? Кодро ислоҳ кунед ва ба баромади интизоршаванда бирасед. Тартиби молҳо дар дохили shop.products бояд аслӣ монад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const shop = {
name: "Корвон-онлайн" ,
products: [
{ title: "Дыня" , price: 12 },
{ title: "Гранат" , price: 9 },
{ title: "Виноград" , price: 15 }
],
cheapestFirst: () => {
return this .products.sort ((a, b) => a.price - b.price);
},
total () {
return this .products.reduce ((sum, p) => sum + p.price);
}
};
console.log (shop.cheapestFirst ().map (p => p.title));
console.log (shop.products[0 ].title);
console.log (shop.total ());
Натиҷаи интизоршаванда ["Гранат", "Дыня", "Виноград"]
Дыня
36
Ишора 1 Хатоҳо навбат ба навбат зоҳир мешаванд: якумро ислоҳ кунед (код афтиданро бас мекунад) — дуюм ва сеюмро мебинед. Ба инҳо нигоҳ кунед: метод чӣ тавр эълон шудааст, sort бо массиви аслӣ чӣ мекунад, reduce аз чӣ оғоз мекунад.
Ишора 2 Агар ЗС танҳо як-ду хаторо ёфт, ба ӯ нависед: «пас аз ислоҳи ту shop.products[0].title "Гранат"-ро мебарорад, ва бояд "Дыня". Чаро?» — ва санҷед, ки сабабро фаҳмид ё не.
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
ВАЗИФАИ 9.3 Додаҳоро эҷод кунед ва функсияро санҷед душвор
Функсияи libraryReport(books)-ро нависед (худатон ё бо ЗС — аммо шарҳ додани онро шумо бояд карда тавонед), ки мебарорад: ҳамагӣ китобҳо, чандто дар мавҷуд, объекти «муаллиф → шумораи китобҳо» ва ғафстарин китоб. Аввал ба баромади дақиқ дар намунаи хурди назоратии sample бирасед. Сипас аз ЗС хоҳиш кунед, ки массиви JSON-и 15 китоби классикони тоҷик ва форсро (Айнӣ, Рӯдакӣ, Фирдавсӣ, Хайём, Саъдӣ, Ҷомӣ) бо майдонҳои title, author, year, pages, available эҷод кунад — ва хоҳиш кунед, ки як китобро бе майдони pages созад. Сатрро ба generated гузоред ва боварӣ ҳосил кунед, ки функсия намеафтад ва дуруст ҳисоб мекунад.
Таҳрир кардан мумкин аст · Ctrl + Enter ↺ Аз нав ▶ Иҷро кардан
const sample = [
{ title: "Шахнаме" , author: "Фирдавси" , year: 1010 , pages: 980 , available: true },
{ title: "Одина" , author: "Айни" , year: 1924 , pages: 120 , available: false },
{ title: "Рабы" , author: "Айни" , year: 1935 , pages: 450 , available: true }
];
function libraryReport (books) {
// коди шумо инҷо
}
libraryReport (sample);
// const generated = `JSON-ро аз ЗС инҷо гузоред`;
// libraryReport(JSON.parse(generated));
Натиҷаи интизоршаванда Всего книг: 3
В наличии: 2
По авторам: { Фирдавси: 1, Айни: 2 }
Самая толстая: Шахнаме (980 стр.)
Для generated: 4 такие же строки без ошибок; «Всего книг: 15»,
сумма чисел в объекте «По авторам» тоже равна 15,
книга без pages не ломает поиск самой толстой.
Ишора 1 Ҳисоб аз рӯи муаллифон — ҳамон усули «объект-ҳисобкунак», ки дар вазифаи 1.3 буд. Барои китоби бе pages b.pages ?? 0-ро истифода баред.
Ишора 2 Чӣ тавр ҷавоби ЗС-ро санҷидан: 2–3 қиматро дар додаҳои эҷодшуда бо даст ҳисоб кунед (масалан, чанд китоби Айнӣ) ва бо баромад муқоиса кунед. Агар ЗС JSON-ро бо шарҳҳо ё вергул дар охир фиристад — JSON.parse меафтад: хоҳиш кунед «танҳо JSON-и дуруст».
○ Ҳалшуда қайд кардан 💬 Дар бораи ин вазифа пурсидан
Хулосаи дарс
Объект — як чиз бо хосиятҳои номдор: { name: "Фарход", age: 20 }. Массив — рӯйхати чизҳои якнамуд. Массиви объектҳо — шакли аз ҳама маъмули додаҳо.
Хондан: obj.key ё obj["key"] (калид бо фосила ё дар тағйирёбанда: obj[field]). Хосият нест → undefined.
Тағйир додан/илова кардан: obj.key = value. Нест кардан: delete obj.key. Санҷидан: "key" in obj. Объектро дар const тағйир додан мумкин аст, аз нав таъин кардан не.
Навишти кӯтоҳ: { name, age }. Функсияи тирдор объектро дар қавсайн бармегардонад: () => ({ ... }).
Гузариш: Object.keys / values / entries + for (const [key, value] of Object.entries(obj)). Шумораи хосиятҳо: Object.keys(obj).length.
Дарунравӣ: group.students[1].name. Додаҳои ихтиёрӣ: user.address?.city ?? "—".
Метод — функсия дар объект: greet() { }, даъват бо қавсайн obj.greet().
this — объекти пеш аз нуқта ҳангоми даъват. Методҳо бо this — тирдор нестанд; callback-ҳои дохили метод — тирдор. Методи аз объект кандашуда this-ро гум мекунад.
Деструктуризатсия: const { name: userName, city = "Душанбе" } = user, const [first, , third] = arr, function f({ title, price }).
Spread кушода мегирад: [...a, ...b], { ...user, age: 21 } — нусхаи нав (сатҳӣ!). Rest ҷамъ мекунад: function sum(...nums), const { password, ...safe } = user.
JSON — матн барои мубодилаи додаҳо: JSON.stringify(obj, null, 2) ва JSON.parse(str) дар дохили try...catch. localStorage танҳо сатрҳоро нигоҳ медорад. Нусхаи амиқ — structuredClone(obj).
Бо ЗС: методҳо ва сохторҳоро ном баред, мисоли додаҳо ва баромади дақиқ диҳед, ҳолатҳои канориро хоҳиш кунед, бо иҷро санҷед. Кодеро, ки шарҳ дода наметавонед, ҷойгир накунед.