Деструктуризатсия ва spread

Ин барои чӣ лозим аст

Бо объектҳо ва массивҳо доимо як корро кардан лозим меояд: якчанд майдонро ба тағйирёбандаҳо гирифтан, нусхабардорӣ кардан, ду объектро якҷоя кардан, унсур илова кардан бе вайрон кардани аслӣ. JavaScript-и муосир инро бо навиштҳои кӯтоҳ — деструктуризатсия ва оператори ... иҷро мекунад. Онҳоро дар ҳама ҷо, махсусан дар React ва ҳангоми кор бо додаҳо аз сервер истифода мебаранд.

Деструктуризатсияи массив

Массивро бо тартиб ба тағйирёбандаҳо «ҷудо кардан»:

const point = [10, 20];
const [x, y] = point;
console.log(x, y);

const [first, , third] = ["а", "б", "в"];  // гузаронидани унсур — ҷойи холӣ
console.log(first, third);

Натиҷа:

10 20
а в

Ивази қиматҳо бе тағйирёбандаи муваққатӣ:

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

Натиҷа:

2 1

Деструктуризатсияи объект

Аз объект тағйирёбандаҳо аз рӯи номҳо-и хосиятҳо гирифта мешаванд:

const user = { name: "Аня", age: 15, city: "Хуҷанд" };
const { name, age } = user;
console.log(name, age);

const { city: town, country = "Тоҷикистон" } = user; // номи нав ва қимати пешфарз
console.log(town, country);

Натиҷа:

Аня 15
Хуҷанд Тоҷикистон

Деструктуризатсия бевосита дар параметрҳои функсия:

function hello({ name, age }) {
  return `${name}, ${age}-сола`;
}
console.log(hello({ name: "Тимур", age: 17, city: "Душанбе" }));

Натиҷа:

Тимур, 17-сола

Боқимонда ...rest

Се нуқта дар тарафи чап-и = ё дар параметрҳо «ҳамаи боқимонда»-ро ҷамъ мекунанд:

const [winner, ...others] = ["Аня", "Тимур", "Ира"];
console.log(winner, others);

const { password, ...safeUser } = { login: "anya", password: "123", age: 15 };
console.log(safeUser);

function sum(...nums) {        // ҳар миқдор аргумент
  return nums.reduce((s, n) => s + n, 0);
}
console.log(sum(1, 2, 3, 4));

Натиҷа:

Аня ["Тимур","Ира"]
{"login":"anya","age":15}
10

Spread ...

Ҳамон се нуқта дар тарафи рост ё дар даъват массив ё объектро «паҳн мекунанд»:

const a = [1, 2];
const b = [3, 4];
console.log([...a, ...b, 5]);          // якҷоякунӣ
console.log(Math.max(...[4, 9, 2]));   // массив ҳамчун аргументҳои алоҳида

const base = { theme: "dark", lang: "ru" };
const mine = { ...base, lang: "tg" };  // нусха бо тағйирот
console.log(mine);
console.log(base);

Натиҷа:

[1,2,3,4,5]
9
{"theme":"dark","lang":"tg"}
{"theme":"dark","lang":"ru"}

Ҳангоми якҷоякунии объектҳо қимати охирин ғолиб мешавад: { ...base, lang: "tg" } lang-ро аз нав менависад.

Нусха сатҳӣ аст!

const original = { name: "Аня", tags: ["js"] };
const copy = { ...original };
copy.name = "Ира";        // ба аслӣ таъсир намерасонад
copy.tags.push("css");    // вале ин таъсир мерасонад!
console.log(original);

Натиҷа:

{"name":"Аня","tags":["js","css"]}

Spread танҳо сатҳи болоӣ-ро нусхабардорӣ мекунад. Массиви дарунии tags умумӣ монд — нусха ҳамон истинодро нигоҳ медорад. Барои иваз кардани чизи дарунӣ бе вайрон кардани аслӣ онро ҳам нусхабардорӣ мекунанд: { ...original, tags: [...original.tags, "css"] }. Нусхаи пурраи амиқро structuredClone(obj) месозад.

Муқоисаи объектҳо

console.log({ a: 1 } === { a: 1 });
const x = { a: 1 };
const y = x;
console.log(x === y);

Натиҷа:

false
true

=== барои объектҳо ва массивҳо истинодҳо-ро муқоиса мекунад, на мӯҳтаворо: онҳо танҳо вақте баробаранд, ки ин ҳамон як объект бошад.

Дар дохил чӣ гуна кор мекунад

Деструктуризатсия — танҳо навишти кӯтоҳ аст. const { name, age } = user — ҳамон const name = user.name; const age = user.age; аст. Ва { ...a, ...b } объекти холии нав месозад ва ба он бо навбат хосиятҳои a, баъд b-ро нусхабардорӣ мекунад. Қиматҳо-объектҳо дар ин ҳол нусхабардорӣ намешаванд — истинод ба онҳо нусхабардорӣ мешавад. Аз ин ҷо «сатҳӣ» будан.

Хатоҳои маъмул

1. Қавсҳоро омехтанд. Массивро бо қавсҳои квадратӣ [a, b] = arr, объектро бо фигурӣ { a } = obj ҷудо мекунанд.
2. Ном бо хосият мувофиқ намеояд. const { username } = { name: "Аня" } → undefined. Лозим аст { name: username }.
3. ...rest охирин нест. const [...rest, last] = arr — хато: боқимонда ҳамеша охирин аст.
4. Фикр кардан, ки spread амиқ нусхабардорӣ мекунад. Массивҳо ва объектҳои дарунӣ умумӣ мемонанд.
5. Тартиб ҳангоми якҷоякунӣ. { lang: "tg", ...base } — lang аз base қимати шуморо аз нав менависад.

Ёддошт

Чӣ	Чӣ тавр
Ҷудо кардани массив	const [a, b] = arr;
Ҷудо кардани объект	const { name, age } = obj;
Ном иваз / пешфарз	const { city: town, x = 0 } = obj;
Дар параметрҳо	function f({ name }) { … }
Боқимонда	const [first, ...rest] = arr;
Ҳар миқдор аргумент	function f(...args) { … }
Нусха / якҷоякунии массивҳо	[...a], [...a, ...b]
Нусха / якҷоякунии объектҳо	{ ...o }, { ...o, key: 1 }
Нусхаи амиқ	structuredClone(o)