JavaScript-da himoyachilar (guards) bilan naqsh mosligi: Shartli destrukturizatsiyani o'zlashtirish

JavaScript, garchi an'anaviy ravishda ba'zi funksional tillar (masalan, Haskell, Scala) kabi ilg'or naqsh mosligi imkoniyatlari bilan tanilmagan bo'lsa-da, naqsh mosligi xatti-harakatini taqlid qilishga imkon beruvchi kuchli xususiyatlarni taklif qiladi. Destrukturizatsiya bilan birlashtirilgan shunday xususiyatlardan biri 'himoyachilar' (guards) dan foydalanishdir. Ushbu blog posti JavaScript-da himoyachilar bilan naqsh mosligini chuqur o'rganib, shartli destrukturizatsiyaning qanday qilib toza, o'qilishi oson va qo'llab-quvvatlanadigan kodga olib kelishini ko'rsatib beradi. Biz turli sohalarda qo'llaniladigan amaliy misollar va eng yaxshi amaliyotlarni ko'rib chiqamiz.

Naqsh mosligi nima?

Aslida, naqsh mosligi - bu qiymatni naqshga solishtirib tekshirish usuli. Agar qiymat naqshga mos kelsa, tegishli kod bloki bajariladi. Bu oddiy tenglik tekshiruvlaridan farq qiladi; naqsh mosligi murakkabroq shartlarni o'z ichiga olishi va jarayonda ma'lumotlar tuzilmalarini parchalashi mumkin. JavaScript-da ba'zi tillardagi kabi maxsus 'match' iboralari bo'lmasa-da, biz destrukturizatsiya va shartli mantiq kombinatsiyasidan foydalanib o'xshash natijalarga erishishimiz mumkin.

JavaScript-da destrukturizatsiya

Destrukturizatsiya - bu ES6 (ECMAScript 2015) xususiyati bo'lib, u ob'ektlar yoki massivlardan qiymatlarni ajratib olish va ularni ixcham va o'qilishi oson usulda o'zgaruvchilarga tayinlash imkonini beradi. Masalan:

            
const person = { name: 'Alice', age: 30, city: 'London' };
const { name, age } = person;
console.log(name); // Natija: Alice
console.log(age);  // Natija: 30

            

              
                Copy
              
            
          

Xuddi shunday, massivlar bilan:

            
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first);  // Natija: 1
console.log(second); // Natija: 2

            

              
                Copy
              
            
          

Shartli destrukturizatsiya: Himoyachilarni tanishtirish

Himoyachilar destrukturizatsiyaning muvaffaqiyatli amalga oshishi uchun bajarilishi kerak bo'lgan shartlarni qo'shish orqali uning kuchini kengaytiradi. Bu ma'lum mezonlarga asoslanib qiymatlarni tanlab ajratib olishga imkon berish orqali naqsh mosligini samarali taqlid qiladi.

`if` iboralari bilan destrukturizatsiyadan foydalanish

Himoyachilarni amalga oshirishning eng oddiy usuli - `if` iboralarini destrukturizatsiya bilan birgalikda ishlatish. Mana bir misol:

            
function processOrder(order) {
  if (order && order.items && Array.isArray(order.items) && order.items.length > 0) {
    const { customerId, items } = order;
    console.log(`Processing order for customer ${customerId} with ${items.length} items.`);
    // Elementlarni shu yerda qayta ishlang
  } else {
    console.log('Invalid order format.');
  }
}

const validOrder = { customerId: 'C123', items: [{ name: 'Product A', quantity: 2 }] };
const invalidOrder = {};

processOrder(validOrder);   // Natija: C123 mijoz uchun 1 ta elementli buyurtma qayta ishlanmoqda.
processOrder(invalidOrder);  // Natija: Buyurtma formati yaroqsiz.

            

              
                Copy
              
            
          

Ushbu misolda biz `order` ob'ekti mavjudligini, uning `items` xususiyatiga egaligini, `items` ning massiv ekanligini va massiv bo'sh emasligini tekshiramiz. Faqat barcha bu shartlar to'g'ri bo'lgandagina destrukturizatsiya sodir bo'ladi va biz buyurtmani qayta ishlashni davom ettirishimiz mumkin.

Ixcham himoyachilar uchun ternar operatorlardan foydalanish

Oddiyroq shartlar uchun siz ixchamroq sintaksis uchun ternar operatorlardan foydalanishingiz mumkin:

            
function getDiscount(customer) {
  const discount = (customer && customer.memberStatus === 'gold') ? 0.10 : 0;
  return discount;
}

const goldCustomer = { memberStatus: 'gold' };
const regularCustomer = { memberStatus: 'silver' };

console.log(getDiscount(goldCustomer));     // Natija: 0.1
console.log(getDiscount(regularCustomer));  // Natija: 0

            

              
                Copy
              
            
          

Bu misol `customer` ob'ekti mavjudligini va uning `memberStatus` 'gold' ekanligini tekshiradi. Agar ikkalasi ham to'g'ri bo'lsa, 10% chegirma qo'llaniladi; aks holda, chegirma qo'llanilmaydi.

Mantiqiy operatorlar bilan ilg'or himoyachilar

Murakkabroq stsenariylar uchun siz mantiqiy operatorlar (`&&`, `||`, `!`) yordamida bir nechta shartlarni birlashtirishingiz mumkin. Manzil va jo'natma og'irligiga qarab yetkazib berish narxini hisoblaydigan funksiyani ko'rib chiqaylik:

            
function calculateShippingCost(packageInfo) {
  if (packageInfo && packageInfo.destination && packageInfo.weight) {
    const { destination, weight } = packageInfo;

    let baseCost = 10; // Asosiy yetkazib berish narxi

    if (destination === 'USA') {
      baseCost += 5;
    } else if (destination === 'Canada') {
      baseCost += 8;
    } else if (destination === 'Europe') {
      baseCost += 12;
    } else {
      baseCost += 15; // Dunyoning qolgan qismi
    }

    if (weight > 10) {
      baseCost += (weight - 10) * 2; // 10 kg dan ortiq har bir kg uchun qo'shimcha narx
    }

    return baseCost;
  } else {
    return 'Invalid package information.';
  }
}

const usaPackage = { destination: 'USA', weight: 12 };
const canadaPackage = { destination: 'Canada', weight: 8 };
const invalidPackage = { weight: 5 };

console.log(calculateShippingCost(usaPackage));      // Natija: 19
console.log(calculateShippingCost(canadaPackage));   // Natija: 18
console.log(calculateShippingCost(invalidPackage));  // Natija: Jo'natma ma'lumotlari yaroqsiz.

            

              
                Copy
              
            
          

Amaliy misollar va qo'llash holatlari

Keling, himoyachilar bilan naqsh mosligi ayniqsa foydali bo'lishi mumkin bo'lgan ba'zi amaliy misollarni ko'rib chiqaylik:

1. API javoblarini qayta ishlash

API'lar bilan ishlaganda, so'rovning muvaffaqiyatli yoki muvaffaqiyatsiz bo'lishiga qarab, siz ko'pincha ma'lumotlarni turli formatlarda olasiz. Himoyachilar bu o'zgarishlarni bemalol boshqarishga yordam beradi.

            
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();

    if (response.ok && data && data.results && Array.isArray(data.results)) {
      const { results } = data;
      console.log('Data fetched successfully:', results);
      return results;
    } else if (data && data.error) {
      const { error } = data;
      console.error('API Error:', error);
      throw new Error(error);
    } else {
      console.error('Unexpected API response:', data);
      throw new Error('Unexpected API response');
    }
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
}

// Foydalanish namunasi (haqiqiy API manzili bilan almashtiring)
// fetchData('https://api.example.com/data')
//   .then(results => {
//     // Natijalarni qayta ishlash
//   })
//   .catch(error => {
//     // Xatolikni qayta ishlash
//   });

            

              
                Copy
              
            
          

Bu misol `response.ok` holatini, `data` mavjudligini va `data` ob'ektining tuzilishini tekshiradi. Ushbu shartlarga asoslanib, u `results` yoki `error` xabarini ajratib oladi.

2. Forma kiritish ma'lumotlarini tekshirish

Himoyachilar forma kiritish ma'lumotlarini tekshirish va ma'lumotlarni qayta ishlashdan oldin ma'lum mezonlarga javob berishini ta'minlash uchun ishlatilishi mumkin. Ism, elektron pochta va telefon raqami uchun maydonlari bo'lgan formani tasavvur qiling. Siz elektron pochtaning to'g'riligini va telefon raqamining ma'lum bir formatga mos kelishini tekshirish uchun himoyachilardan foydalanishingiz mumkin.

            
function validateForm(formData) {
  if (formData && formData.name && formData.email && formData.phone) {
    const { name, email, phone } = formData;

    const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;

    if (!emailRegex.test(email)) {
      console.error('Invalid email format.');
      return false;
    }

    if (!phoneRegex.test(phone)) {
      console.error('Invalid phone number format (must be XXX-XXX-XXXX).');
      return false;
    }

    console.log('Form data is valid.');
    return true;
  } else {
    console.error('Missing form fields.');
    return false;
  }
}

const validFormData = { name: 'John Doe', email: 'john.doe@example.com', phone: '555-123-4567' };
const invalidFormData = { name: 'Jane Doe', email: 'jane.doe@example', phone: '1234567890' };

console.log(validateForm(validFormData));   // Natija: Forma ma'lumotlari to'g'ri. true
console.log(validateForm(invalidFormData));  // Natija: Elektron pochta formati noto'g'ri. false

            

              
                Copy
              
            
          

3. Turli ma'lumot turlarini qayta ishlash

JavaScript dinamik tipli til, ya'ni o'zgaruvchining tipi dastur ishlashi davomida o'zgarishi mumkin. Himoyachilar turli ma'lumot turlarini bemalol boshqarishga yordam beradi.

            
function processData(data) {
  if (typeof data === 'number') {
    console.log('Data is a number:', data * 2);
  } else if (typeof data === 'string') {
    console.log('Data is a string:', data.toUpperCase());
  } else if (Array.isArray(data)) {
    console.log('Data is an array:', data.length);
  } else {
    console.log('Data type not supported.');
  }
}

processData(10);       // Natija: Ma'lumot son: 20
processData('hello');  // Natija: Ma'lumot satr: HELLO
processData([1, 2, 3]); // Natija: Ma'lumot massiv: 3
processData({});        // Natija: Ma'lumot turi qo'llab-quvvatlanmaydi.

            

              
                Copy
              
            
          

4. Foydalanuvchi rollari va ruxsatlarini boshqarish

Veb-ilovalarda siz ko'pincha foydalanuvchi rollariga qarab ma'lum xususiyatlarga kirishni cheklashingiz kerak bo'ladi. Himoyachilar kirish huquqini berishdan oldin foydalanuvchi rollarini tekshirish uchun ishlatilishi mumkin.

            
function grantAccess(user, feature) {
  if (user && user.roles && Array.isArray(user.roles)) {
    const { roles } = user;

    if (roles.includes('admin')) {
      console.log(`Admin user granted access to ${feature}.`);
      return true;
    } else if (roles.includes('editor') && feature !== 'delete') {
      console.log(`Editor user granted access to ${feature}.`);
      return true;
    } else {
      console.log(`User does not have permission to access ${feature}.`);
      return false;
    }
  } else {
    console.error('Invalid user data.');
    return false;
  }
}

const adminUser = { roles: ['admin'] };
const editorUser = { roles: ['editor'] };
const regularUser = { roles: ['viewer'] };

console.log(grantAccess(adminUser, 'delete'));   // Natija: Administrator foydalanuvchisiga o'chirishga ruxsat berildi. true
console.log(grantAccess(editorUser, 'edit'));     // Natija: Muharrir foydalanuvchisiga tahrirlashga ruxsat berildi. true
console.log(grantAccess(editorUser, 'delete'));   // Natija: Foydalanuvchida o'chirishga ruxsat yo'q. false
console.log(grantAccess(regularUser, 'view'));   // Natija: Foydalanuvchida ko'rishga ruxsat yo'q. false

            

              
                Copy
              
            
          

Himoyachilardan foydalanishning eng yaxshi amaliyotlari

• Himoyachilarni sodda saqlang: Murakkab himoyachilarni o'qish va qo'llab-quvvatlash qiyinlashishi mumkin. Agar himoyachi juda murakkablashib ketsa, uni kichikroq, boshqariladigan funksiyalarga bo'lishni o'ylab ko'ring.
• Tavsiflovchi o'zgaruvchi nomlaridan foydalaning: Kodingizni tushunishni osonlashtirish uchun mazmunli o'zgaruvchi nomlarini ishlating.
• Chekka holatlarni hisobga oling: Har doim chekka holatlarni ko'rib chiqing va himoyachilaringiz ularni to'g'ri boshqarishini ta'minlang.
• Kodingizni hujjatlashtiring: Himoyachilaringizning maqsadi va ular tekshiradigan shartlarni tushuntirish uchun izohlar qo'shing.
• Kodingizni sinovdan o'tkazing: Himoyachilaringiz kutilganidek ishlashini va turli stsenariylarni to'g'ri boshqarishini ta'minlash uchun birlik testlarini yozing.

Himoyachilar bilan naqsh mosligining afzalliklari

• Kodning o'qilishi osonlashadi: Himoyachilar kodingizni yanada ifodali va tushunarli qiladi.
• Kod murakkabligi kamayadi: Turli stsenariylarni himoyachilar bilan boshqarish orqali siz chuqur joylashtirilgan `if` iboralaridan qochishingiz mumkin.
• Kodning qo'llab-quvvatlanishi osonlashadi: Himoyachilar kodingizni yanada modulli va o'zgartirish yoki kengaytirishni osonlashtiradi.
• Xatoliklarni qayta ishlash yaxshilanadi: Himoyachilar xatoliklar va kutilmagan vaziyatlarni bemalol boshqarishga imkon beradi.

Cheklovlar va e'tiborga olinadigan jihatlar

JavaScript-ning himoyachilar bilan shartli destrukturizatsiyasi naqsh mosligini taqlid qilishning kuchli usulini taklif qilsa-da, uning cheklovlarini tan olish muhim:

• Mahalliy naqsh mosligi yo'q: JavaScript-da funksional tillarda mavjud bo'lgan mahalliy `match` iborasi yoki shunga o'xshash konstruksiya yo'q. Bu shuni anglatadiki, taqlid qilingan naqsh mosligi ba'zan o'rnatilgan qo'llab-quvvatlashga ega tillarga qaraganda ko'proq so'zli bo'lishi mumkin.
• So'z ko'pligi ehtimoli: Himoyachilar ichidagi haddan tashqari murakkab shartlar so'z ko'p bo'lgan kodga olib kelishi mumkin, bu esa o'qilishni pasaytirishi mumkin. Ifodalilik va ixchamlik o'rtasida muvozanatni saqlash muhim.
• Ishlash samaradorligi masalalari: Garchi umuman samarali bo'lsa-da, murakkab himoyachilardan haddan tashqari foydalanish kichik ishlash samaradorligi yuklamasini keltirib chiqarishi mumkin. Ilovangizning ishlash samaradorligi muhim bo'lgan qismlarida kerak bo'lganda profil va optimallashtirish tavsiya etiladi.

Alternativlar va kutubxonalar

Agar sizga yanada ilg'or naqsh mosligi imkoniyatlari kerak bo'lsa, JavaScript uchun maxsus naqsh mosligi funksionalligini ta'minlaydadigan kutubxonalarni o'rganib chiqishni o'ylab ko'ring:

• ts-pattern: TypeScript (va JavaScript) uchun keng qamrovli naqsh mosligi kutubxonasi bo'lib, u ravon API va a'lo darajadagi tip xavfsizligini taklif etadi. U turli xil naqsh turlarini, jumladan, literal naqshlar, umumiy belgili naqshlar va destrukturizatsiya naqshlarini qo'llab-quvvatlaydi.
• jmatch: JavaScript uchun oddiy va ixcham sintaksisni ta'minlaydigan yengil naqsh mosligi kutubxonasi.

Xulosa

JavaScript-da shartli destrukturizatsiya orqali erishiladigan himoyachilar bilan naqsh mosligi - bu toza, o'qilishi oson va qo'llab-quvvatlanadigan kod yozish uchun kuchli usuldir. Himoyachilardan foydalanib, siz ma'lum shartlarga asoslanib ob'ektlar yoki massivlardan qiymatlarni tanlab ajratib olishingiz mumkin, bu esa naqsh mosligi xatti-harakatini samarali taqlid qiladi. JavaScript-da mahalliy naqsh mosligi imkoniyatlari bo'lmasa-da, himoyachilar turli stsenariylarni boshqarish va kodingizning umumiy sifatini yaxshilash uchun qimmatli vositani taqdim etadi. Himoyachilaringizni sodda saqlashni, tavsiflovchi o'zgaruvchi nomlaridan foydalanishni, chekka holatlarni hisobga olishni va kodingizni sinchkovlik bilan sinovdan o'tkazishni unutmang.