JavaScript quvur operatori: Toza kod uchun funktsional kompozitsiya

JavaScript dasturlashning doimiy rivojlanib borayotgan dunyosida toza, xizmat ko'rsatishga yaroqli va o'qiladigan kod yozish muhimdir. Ushbu maqsadga erishishda sezilarli yordam beradigan vositalardan biri JavaScript quvur operatori (|>) hisoblanadi. Hozircha taklif sifatida (ushbu yozuv vaqtida 1-bosqichda), ko'plab ishlab chiquvchilar uni Babel plaginlari yoki allaqachon qo'llab-quvvatlanadigan muhitlarda foydalanmoqdalar va uning qabul qilinishi kodning aniqligini oshirish va funktsional kompozitsiyani soddalashtirish qobiliyati tufayli doimiy ravishda o'sib bormoqda. Ushbu maqola quvur operatorining, uning afzalliklari va amaliy qo'llanilishining har tomonlama o'rganilishini taqdim etadi.

Funktsional kompozitsiya nima?

Quvur operatoriga sho'ng'ishdan oldin, funktsional kompozitsiyani tushunish juda muhimdir. Funktsional kompozitsiya - bu yangi funksiyani yaratish uchun ikkita yoki undan ortiq funksiyalarni birlashtirish jarayonidir. Bir funksiyaning natijasi keyingisining kiritilishi bo'ladi, bu operatsiyalar zanjirini yaratadi. Ushbu yondashuv modullikni, qayta ishlatilishi va test qilinishini rag'batlantiradi.

Oddiy senariyni ko'rib chiqing: Sizda raqam bor va uni kvadratga ko'tarmoqchi va keyin uni oshirmoqchisiz. Funktsional kompozitsiyasiz, siz quyidagilarni yozishingiz mumkin:

            const number = 5;
const squared = square(number);
const incremented = increment(squared);
console.log(incremented); // Output: 26

function square(x) {
  return x * x;
}

function increment(x) {
  return x + 1;
}
            

              
                Copy
              
            
          

Funktsional kompozitsiya bilan siz quyidagi kabi kompozitsiyalangan funksiyani belgilashingiz mumkin (zamonaviyroq yondashuvlardan foydalangan holda):

            const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

const square = x => x * x;
const increment = x => x + 1;

const squareAndIncrement = compose(increment, square);

const number = 5;
const result = squareAndIncrement(number);
console.log(result); // Output: 26
            

              
                Copy
              
            
          

Yuqoridagi 'compose' funksiyasi foydali bo'lsa-da, quvur operatori buni yanada soddalashtiradi.

JavaScript quvur operatorini kiritish (|>)

Quvur operatori (|>) JavaScript-da funktsional kompozitsiyani amalga oshirishning yanada o'qiladigan va intuitiv usulini taqdim etadi. U funksiya chaqiruvlarini chapdan o'ngga qarab zanjirga qo'yishga imkon beradi, bu kod oqimini tabiiyroq qiladi. Aslida, u operatorning chap tomonidagi qiymatni oladi va uni o'ng tomondagi funksiyaga argument sifatida o'tkazadi.

Quvur operatoridan foydalanib, oldingi misol quyidagicha ko'rinadi (agar siz quvur operatori plaginini o'rnatgan Babel kabi transpilyatordan foydalanayotgan bo'lsangiz):

            function square(x) {
  return x * x;
}

function increment(x) {
  return x + 1;
}

const number = 5;
const result = number
  |> square
  |> increment;

console.log(result); // Output: 26
            

              
                Copy
              
            
          

Ushbu kodni o'qish va tushunish ancha oson. Ma'lumotlar yuqoridan pastgacha oqadi, bu operatsiyalar ketma-ketligini aniq ko'rsatadi.

Quvur operatoridan foydalanishning afzalliklari

• O'qish qobiliyatini yaxshilash: Quvur operatori ma'lumotlarning bir qator funksiyalar orqali oqimini aniq ko'rsatib, kodni o'qish va tushunishni osonlashtiradi. Ichma-ich funksiya chaqiruvlari o'rniga, quvur operatori o'zgarish jarayonini bosqichma-bosqich vizual ravishda ifodalaydi.
• Xizmat ko'rsatish qobiliyatini oshirish: Modullikni rag'batlantirish va tashvishlarni ajratish orqali, quvur operatori ko'proq xizmat ko'rsatishga yaroqli kodga hissa qo'shadi. Quvurdagi har bir funksiya muayyan vazifani bajaradi, bu muammolarni aniqlash va tuzatishni osonlashtiradi.
• Murakkablikni kamaytirish: Quvur operatori bir nechta o'zgarishlarni o'z ichiga olgan kodning murakkabligini sezilarli darajada kamaytirishi mumkin. U vaqtinchalik o'zgaruvchilar va ichki funksiya chaqiruvlariga bo'lgan ehtiyojni yo'q qiladi, natijada toza va aniqroq kod paydo bo'ladi.
• Kodning qayta ishlatilishini oshirish: Funktsional kompozitsiya qayta ishlatiladigan funksiyalarni yaratishga yordam beradi. Keyin bu funksiyalar quvur operatori yordamida yanada murakkab operatsiyalarni yaratish uchun osongina birlashtirilishi mumkin.

Quvur operatorining amaliy misollari

Keling, quvur operatorining ko'p qirraliligini namoyish etadigan ba'zi amaliy misollarni ko'rib chiqaylik.

Misol 1: Ma'lumotlarni o'zgartirish

Mahsulot ob'ektlarining massivi mavjud deb tasavvur qiling va siz bir nechta o'zgarishlarni amalga oshirishingiz kerak:

1. Sotuvda bo'lmagan mahsulotlarni filtrlash.
2. Qolgan mahsulotlarni ularning nomlariga xaritalash.
3. Nomlarni alifbo tartibida saralash.
4. Nomlar massivini vergul bilan ajratilgan satrga aylantiring.

Quvur operatorisiz, kod quyidagicha ko'rinishi mumkin:

            const products = [
  { name: 'Laptop', price: 1200, inStock: true },
  { name: 'Keyboard', price: 75, inStock: false },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Monitor', price: 300, inStock: true },
];

const outOfStock = (product) => product.inStock === true;
const getName = (product) => product.name;

const processProducts = (products) => {
    const inStockProducts = products.filter(outOfStock);
    const productNames = inStockProducts.map(getName);
    const sortedNames = productNames.sort();
    const commaSeparated = sortedNames.join(', ');
    return commaSeparated;
};


const result = processProducts(products);
console.log(result); // Output: Laptop, Monitor, Mouse
            

              
                Copy
              
            
          

Quvur operatoridan foydalanish, kodni yanada o'qiladigan qiladi:

            const products = [
  { name: 'Laptop', price: 1200, inStock: true },
  { name: 'Keyboard', price: 75, inStock: false },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Monitor', price: 300, inStock: true },
];

const filterInStock = (products) => products.filter(product => product.inStock);
const mapToName = (products) => products.map(product => product.name);
const sortAlphabetically = (names) => [...names].sort(); // Create a copy to avoid modifying the original array
const joinWithComma = (names) => names.join(', ');

const result = products
  |> filterInStock
  |> mapToName
  |> sortAlphabetically
  |> joinWithComma;

console.log(result); // Output: Laptop, Monitor, Mouse
            

              
                Copy
              
            
          

Ushbu versiya products massiviga qo'llaniladigan o'zgarishlar ketma-ketligini aniq ko'rsatadi.

Misol 2: Asinxron operatsiyalar

Quvur operatori API-dan ma'lumotlarni olish kabi asinxron operatsiyalarda ham qo'llanilishi mumkin.

            async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return await response.json();
}

function extractData(data) {
  //Process the Json into something more manageable
  return data.results;
}

function processData(results) {
  //Further processing of the results
  return results.map(result => result.name);
}

function displayData(processedData) {
  //Diplay the processed Data.
  return processedData;
}

async function main() {
  try {
    const url = 'https://api.example.com/data'; // Replace with a real API endpoint

    const result = await (url
      |> fetchData
      |> extractData
      |> processData
      |> displayData);

    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

// main(); // Commenting this out as the url is a dummy value.

            

              
                Copy
              
            
          

Ushbu misolda, fetchData funksiyasi API-dan ma'lumotlarni oladi va keyingi funksiyalar ma'lumotlarni qayta ishlaydi va ko'rsatadi. Quvur operatori har bir funksiyaning to'g'ri tartibda chaqirilishini ta'minlaydi va har bir funksiyaning natijasi keyingisiga o'tkaziladi.

Misol 3: String manipulyatsiyasi

Satrda bir nechta operatsiyalarni bajarishingiz kerak bo'lgan senariyni ko'rib chiqing:

1. Bosh va oxirgi oq bo'shliqni olib tashlash.
2. Satrni kichik harfga o'zgartirish.
3. Bir nechta bo'shliqlarni bitta bo'shliq bilan almashtirish.
4. Har bir so'zning birinchi harfini katta harfga aylantirish.

            function trim(str) {
  return str.trim();
}

function toLower(str) {
  return str.toLowerCase();
}

function removeMultipleSpaces(str) {
  return str.replace(/\s+/g, ' ');
}

function capitalizeWords(str) {
  return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}

const inputString = '  Hello   World  ';

const result = inputString
  |> trim
  |> toLower
  |> removeMultipleSpaces
  |> capitalizeWords;

console.log(result); // Output: Hello World
            

              
                Copy
              
            
          

Ushbu misol quvur operatori qanday qilib bir qator satr manipulyatsiya funksiyalarini zanjirga qo'shish mumkinligini ko'rsatadi.

E'tiborga olinadigan jihatlar va eng yaxshi amaliyotlar

• Funksiya pokligi: Quvurlaringizda toza funksiyalardan foydalanishga harakat qiling. Toza funksiyalar - bu har doim bir xil kirish uchun bir xil natijani qaytaradigan va hech qanday yon ta'sirga ega bo'lmagan funksiyalardir. Bu sizning kodingizni yanada oldindan aytish mumkin va sinovdan o'tkazishni osonlashtiradi.
• Xatolarni boshqarish: Quvuringizda mustahkam xatolarni boshqarishni amalga oshiring. Potentsial xatolarni muloyimlik bilan hal qilish uchun try...catch bloklari yoki boshqa xatolarni boshqarish mexanizmlaridan foydalaning.
• Funksiyalarni nomlash: Funksiyalaringiz uchun tavsifiy va mazmunli nomlarni tanlang. Bu sizning kodingizni tushunish va saqlashni osonlashtiradi.
• Xizmat ko'rsatish qobiliyati: Loyihangiz davomida izchil uslubga rioya qilishga harakat qiling.
• Kompozitsiya: Quvurga qo'yilgan funksiyalar kompozitsiya uchun mo'ljallanganligiga ishonch hosil qiling. Bu odatda ular bitta argumentni qabul qilishini va quvurdagi boshqa funksiyaga kirish sifatida foydalanish mumkin bo'lgan qiymatni qaytarishini anglatadi.

Qabul qilish va vositalar

Quvur operatori hali ham taklif sifatida, shuning uchun u barcha JavaScript muhitlarida mahalliy qo'llab-quvvatlanmaydi. Biroq, siz kodni transpile qilish va quvur operatorini yoqish uchun Babel kabi vositalardan foydalanishingiz mumkin. Babel bilan foydalanish uchun tegishli plaginni o'rnatishingiz kerak:

            npm install --save-dev @babel/plugin-proposal-pipeline-operator
            

              
                Copy
              
            
          

Va keyin Babel-ni .babelrc yoki babel.config.js faylingizda plaginni ishlatish uchun sozlang:

            {
  "plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}
            

              
                Copy
              
            
          

Minimal taklif ko'pincha uning soddaligi tufayli ma'qul ko'riladi. Boshqa takliflar mavjud (masalan, "fsharp"), lekin ular murakkabroq.

Quvur operatoriga alternativa

Quvur operatoridan oldin ishlab chiquvchilar funktsional kompozitsiyaga erishish uchun boshqa usullardan foydalanishgan. Ba'zi keng tarqalgan alternativalar quyidagilarni o'z ichiga oladi:

• Ichki funksiya chaqiruvlari: Bu eng asosiy yondashuvdir, lekin u, ayniqsa murakkab kompozitsiyalar bilan o'qish va tushunish qiyin bo'lishi mumkin.
• Yordamchi funksiyalar (Compose/Pipe): Lodash va Ramda kabi kutubxonalar compose va pipe funksiyalarini taqdim etadi, bu sizga kompozitsiyalangan funksiyalarni yaratishga imkon beradi.
• Usul zanjiri: Moment.js kabi ba'zi kutubxonalar ob'ektlarda operatsiyalarni bajarish uchun erkin interfeysni ta'minlash uchun usul zanjiridan foydalanadilar. Biroq, bu yondashuv zanjirga mo'ljallangan usullarga ega bo'lgan ob'ektlar bilan cheklangan.

Ushbu alternativlar muayyan vaziyatlarda foydali bo'lishi mumkin bo'lsa-da, quvur operatori funktsional kompozitsiya uchun yanada qisqacha va o'qiladigan sintaksisni taklif etadi.

Xulosa

JavaScript quvur operatori sizning kodingizning o'qilishini, xizmat ko'rsatish qobiliyatini va qayta ishlatilishini sezilarli darajada yaxshilaydigan kuchli vositadir. Funktsional kompozitsiya uchun aniq va qisqacha sintaksisni taqdim etish orqali, u sizga tushunish, sinovdan o'tkazish va saqlash osonroq bo'lgan kod yozishga imkon beradi. U hali taklif bo'lsa-da, uning afzalliklari inkor etib bo'lmaydi va ko'proq ishlab chiquvchilar funktsional dasturlash tamoyillarini qabul qilganligi sababli, uning qabul qilinishi o'sishda davom etadi. Quvur operatorini qabul qiling va JavaScript kodingizda yangi aniqlik darajasini oching!

Ushbu maqola quvur operatoriga, shu jumladan uning afzalliklari, amaliy misollar va e'tiborga olinadigan jihatlariga umumiy nuqtai nazarini taqdim etdi. Ushbu kontseptsiyalarni tushunish va qo'llash orqali siz quvur operatorining kuchidan toza, yanada xizmat ko'rsatishga yaroqli va samarali JavaScript kodini yozish uchun foydalanishingiz mumkin. JavaScript ekotizimi rivojlanishda davom etar ekan, quvur operatori kabi vositalarni qabul qilish egri chiziqdan oldinda qolish va yuqori sifatli dasturlarni yaratish uchun juda muhimdir.