8.1 Obyektlərin destrukturizasiyası
JavaScript-də destrukturizasiya — bu, massivlərdən və ya obyektlərin xüsusiyyətlərindən dəyərləri ayrılıqda dəyişənlərə çıxarmağa imkan verən sintaksisdir. Bu, kodu daha təmiz və oxunması rahat edir. Bu mühazirədə biz obyektlərin və massivlərin destrukturizasiyasını, həmçinin müxtəlif nümunələr və onların tətbiqini ətraflı şəkildə müzakirə edəcəyik.
1. Əsas sintaksis
Obyektlərin destrukturizasiyası obyektin xüsusiyyətlərinin dəyərlərini çıxarmağa və onları dəyişənlərə təyin etməyə imkan verir:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Çıxaracaq: John
console.log(age); // Çıxaracaq: 30
console.log(isStudent); // Çıxaracaq: false
2. Yeni dəyişənlərə təyin etmək
Obyektin xüsusiyyətlərinin dəyərlərini başqa adlarla dəyişənlərə təyin etmək olar:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Çıxaracaq: John
console.log(personAge); // Çıxaracaq: 30
3. Default dəyərlər
Əgər xüsusiyyət obyektin içində mövcud deyilsə, default (susmaya görə) dəyər təyin etmək mümkündür:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Çıxaracaq: true
4. İç-içə destrukturizasiya
Dəyərləri iç-içə obyektlərdən çıxarmaq mümkündür:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Çıxaracaq: New York
console.log(country); // Çıxaracaq: USA
5. Funksiya parametrlərində destrukturizasiya
Destrukturizasiyanı funksiyanın parametrlərində də istifadə etmək olar:
function greet({ name, age }) {
console.log(`Salam, mənim adım ${name} və mən ${age} yaşındayam.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Çıxaracaq: Salam, mənim adım John və mən 30 yaşındayam.
8.2 Massivlərin destrukturizasiyası
1. Əsas sintaksis
Massivlərin destrukturizasiyası massiv elementlərinin dəyərlərini götürüb dəyişənlərə təyin etməyə imkan verir:
const fruits = ['alma', 'banan', 'gilas'];
const [first, second, third] = fruits;
console.log(first); // Çap edəcək: alma
console.log(second); // Çap edəcək: banan
console.log(third); // Çap edəcək: gilas
2. Elementləri keçmək
Çıxarılmasını istəmədiyiniz massiv elementlərini keçmək olar:
const fruits = ['alma', 'banan', 'gilas'];
const [first, , third] = fruits;
console.log(first); // Çap edəcək: alma
console.log(third); // Çap edəcək: gilas
3. Susmaya görə dəyərlər
Massiv elementləri üçün susmaya görə dəyərlər təyin etmək olar:
const fruits = ['alma'];
const [first, second = 'banan'] = fruits;
console.log(second); // Çap edəcək: banan
4. İç-içə destrukturizasiya
Daxili massivlərin dəyərlərini götürmək olar:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Çap edəcək: 2
console.log(three); // Çap edəcək: 3
5. Funksiya parametrində destrukturizasiya
Massivlər üçün funksiya parametrlərində destrukturizasiya istifadə olunabilir:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Çap edəcək: John Doe
8.3 Destrukturizasiyanın istifadəsinə misallar
1. Dəyişənlərin qiymətlərini dəyişmək
Destrukturizasiya dəyişənlərin qiymətlərini asanlıqla dəyişməyə imkan verir:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Çıxış: 2
console.log(b); // Çıxış: 1
2. Obyektlərdən məlumatların çıxarılması
Destrukturizasiya API cavablarındakı məlumatları asanlıqla çıxarmağa imkan verir:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Çıxış: John Doe
console.log(email); // Çıxış: john@example.com
3. Funksiyalarda standart parametrlər
Destrukturizasiya funksiyaların parametrləri üçün standart qiymətlər təyin etməyi asanlaşdırır:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Çıxış: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Çıxış: { name: 'Anonymous', age: 0, isAdmin: false }
4. Massivlər və funksiyalar
Destrukturizasiya massivlərlə işləməyi, xüsusilə massiv metodlarından istifadə etməyi asanlaşdırır:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Çıxış: 1
console.log(second); // Çıxış: 2
console.log(rest); // Çıxış: [3, 4, 5]
GO TO FULL VERSION