JavaScript Compose va Pipe Funksiyalari. Funksional Dasturlashning Asoslari

JavaScript-da Compose va Pipe funksiyalari haqida keng qamrovli qo'llanma, ularning amalga oshirilishi, foydalanish holatlari va amaliy misollari bilan

So'nggi yangilanish: 2024-12-24

Salom, aziz JavaScript ishqibozlari! Bugun biz funksional dasturlash dunyosiga sayohat qilib, ikkita kuchli tushuncha - Compose va Pipe funksiyalari haqida gaplashamiz. Bu texnikalar bir nechta funksiyalarni bitta operatsiyaga birlashtirish orqali toza, o'qilishi oson va saqlanishi oson bo'lgan kod yaratish imkonini beradi. Keling, bu funksional dasturlash asoslarining sehrini ochib beraylik!

Compose va Pipe Funksiyalari nima?

Compose va Pipe - bu bir nechta funksiyalarni bitta funksiyaga birlashtirish imkonini beruvchi yuqori tartibli funksiyalardir. Ular bajarilish tartibida farq qiladi:

  • Compose: Funksiyalarni o'ngdan chapga qarab bajaradi.
  • Pipe: Funksiyalarni chapdan o'ngga qarab bajaradi.

Ikkalasi ham bir xil natijaga erishadi, lekin turli sintaksis bilan, turli afzalliklar va foydalanish holatlariga mos keladi.

Compose-ni amalga oshirish

Keling, o'zimizning compose funksiyamizni yaratishdan boshlaymiz:

const compose = (...fns) => (boshlangichQiymat) =>
  fns.reduceRight((qiymat, fn) => fn(qiymat), boshlangichQiymat);

Bu amalga oshirish funksiyalarni o'ngdan chapga qo'llash uchun reduceRight metodidan foydalanadi.

Pipe-ni amalga oshirish

Endi, pipe funksiyasini yarataylik:

const pipe = (...fns) => (boshlangichQiymat) =>
  fns.reduce((qiymat, fn) => fn(qiymat), boshlangichQiymat);

pipe funksiyasi compose ga o'xshaydi, lekin u reduceRight o'rniga reduce dan foydalanadi, funksiyalarni chapdan o'ngga qo'llaydi.

Compose va Pipe-dan foydalanish

Keling, bu funksiyalarni oddiy misol bilan ko'rib chiqaylik:

// Yordamchi funksiyalar
const ikkilantir = x => x * 2;
const birQosh = x => x + 1;
const kvadrat = x => x * x;

// Compose-dan foydalanish
const composeNatija = compose(kvadrat, birQosh, ikkilantir)(3);
console.log(composeNatija); // 49

// Pipe-dan foydalanish
const pipeNatija = pipe(ikkilantir, birQosh, kvadrat)(3);
console.log(pipeNatija); // 49

Bu misolda, compose va pipe ikkalasi ham bir xil natijaga erishadi, lekin funksiyalarni qo'llash tartibi farq qiladi:

  • compose: kvadrat(birQosh(ikkilantir(3)))
  • pipe: kvadrat(birQosh(ikkilantir(3)))

Amaliy Qo'llanishlar

Compose va Pipe funksiyalari ma'lumotlarga bir qator o'zgartirishlarni qo'llash kerak bo'lgan holatlarda ajoyib ishlaydi. Keling, ba'zi amaliy misollarni ko'rib chiqaylik:

1. Ma'lumotlarni Qayta Ishlash Quvuri

const boshliklarniOlib = str => str.replace(/\s/g, '');
const kichikHarflarga = str => str.toLowerCase();
const boshHarfniKatta = str => str.charAt(0).toUpperCase() + str.slice(1);

const ismniFormatlash = pipe(boshliklarniOlib, kichikHarflarga, boshHarfniKatta);

console.log(ismniFormatlash("  jOHn DOE  ")); // "Johndoe"

2. Matematik Hisob-kitoblar

const qosh = a => b => a + b;
const kopaytir = a => b => a * b;

const jamiHisoblash = compose(
  qosh(10),
  kopaytir(2),
  qosh(5)
);

console.log(jamiHisoblash(10)); // 35

3. DOM Manipulyatsiyasi

const elementYaratish = teg => document.createElement(teg);
const atributlarniOrnatish = atributlar => element => {
  Object.entries(atributlar).forEach(([kalit, qiymat]) => {
    element.setAttribute(kalit, qiymat);
  });
  return element;
};
const qoshish = ota => bola => {
  ota.appendChild(bola);
  return bola;
};

const tugmaYaratish = pipe(
  elementYaratish,
  atributlarniOrnatish({ class: 'tugma', type: 'button' }),
  qoshish(document.body)
);

tugmaYaratish('button');

Ilg'or Foydalanish: Currying va Qisman Qo'llash

Compose va Pipe curried funksiyalar va qisman qo'llash bilan juda yaxshi ishlaydi:

const curry = (fn) => {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  };
};

const qosh = curry((a, b, c) => a + b + c);

const beshQosh = pipe(
  qosh(2),
  qosh(3)
);

console.log(beshQosh(10)); // 15

Compose va Pipe-da Xatolarni Boshqarish

Compose va Pipe bilan ishlashda xatolarni boshqarish juda muhim. Mana xatolarni hisobga oladigan versiyalarni amalga oshirish misoli:

const xavfsizCompose = (...fns) => (boshlangichQiymat) =>
  fns.reduceRight((qiymat, fn) => {
    try {
      return fn(qiymat);
    } catch (xato) {
      console.error(`Funksiyada xato: ${fn.name}`, xato);
      return qiymat;
    }
  }, boshlangichQiymat);

const xavfsizPipe = (...fns) => (boshlangichQiymat) =>
  fns.reduce((qiymat, fn) => {
    try {
      return fn(qiymat);
    } catch (xato) {
      console.error(`Funksiyada xato: ${fn.name}`, xato);
      return qiymat;
    }
  }, boshlangichQiymat);

Bu versiyalar alohida funksiyalardagi xatolarni ushlab, bajarilishni davom ettiradi, xatoni qayd etadi, lekin butun zanjirni buzib tashlamaydi.

Ishlash Tezligi Mulohazalari

Compose va Pipe kuchli bo'lsa-da, ular ba'zi holatlarda ishlash tezligiga ta'sir qilishi mumkin. Muhim, yuqori samaradorlikka ega kod uchun funksiyalarni qo'lda birlashtirish yaxshiroq bo'lishi mumkin:

// Bunday qilish o'rniga:
const natija = pipe(fn1, fn2, fn3)(qiymat);

// Buni o'ylab ko'ring:
const natija = fn3(fn2(fn1(qiymat)));

Biroq, ko'pgina dasturlar uchun Compose va Pipe-ning o'qilishi va saqlanishi osonligi afzalliklari kichik ishlash tezligi farqlaridan ustun keladi.

Xulosa

Compose va Pipe funksiyalari funksional dasturchi asboblar to'plamining kuchli vositalaridir. Ular bir nechta funksiyalarni bitta operatsiyaga birlashtirish orqali toza, o'qilishi oson va saqlanishi oson kod yaratish imkonini beradi. Bu tushunchalarni o'zlashtirish orqali siz yanada nafis va samarali JavaScript kod yozishingiz mumkin.

Esda tutingki, Compose va Pipe o'rtasidagi tanlov ko'pincha shaxsiy afzallik va loyihangizning o'ziga xos talablariga bog'liq. Qaysi biri sizning kodlash uslubingiz uchun tabiiyroq ekanligini ko'rish uchun ikkalasi bilan ham tajriba o'tkazing!

Tez-tez So'raladigan Savollar (FAQ)

  1. S: Compose va Pipe o'rtasidagi asosiy farq nima? J: Asosiy farq funksiyalarni bajarish tartibida. Compose funksiyalarni o'ngdan chapga qo'llaydi, Pipe esa chapdan o'ngga. Oxirgi natija bir xil, lekin funksiyalarni yozish tartibi teskari.
  2. S: Compose va Pipe-ni asinxron funksiyalar bilan ishlata olamanmi? J: Biz ko'rsatgan asosiy amalga oshirishlar asinxron funksiyalarni qo'llab-quvvatlamaydi. Biroq, siz Promise-lar bilan ishlaydigan asinxron versiyalarni yaratishingiz mumkin:
const asinxronPipe = (...fns) => (boshlangichQiymat) =>
  fns.reduce((vada, fn) => vada.then(fn), Promise.resolve(boshlangichQiymat));
  1. S: Compose va Pipe bir nechta argumentli funksiyalar bilan qanday ishlaydi? J: Compose va Pipe unar funksiyalar (bitta argument qabul qiladigan funksiyalar) bilan ishlash uchun mo'ljallangan. Bir nechta argumentli funksiyalar uchun odatda ularni unar funksiyalarga aylantirish uchun currying yoki qisman qo'llashdan foydalaniladi.
  2. S: Compose va Pipe funksionalligini taqdim etadigan kutubxonalar bormi? J: Ha, JavaScript-dagi ko'plab funksional dasturlash kutubxonalari Compose va Pipe funksiyalarini taqdim etadi. Ba'zi mashhur kutubxonalarga Ramda, Lodash/FP va Redux kiradi.
  3. S: Compose va Pipe nosozliklarni tuzatishga qanday ta'sir qiladi? J: Compose va Pipe bilan nosozliklarni tuzatish qiyinroq bo'lishi mumkin, chunki siz funksiyalar zanjiri bilan ishlayapsiz. Yuqorida taqdim etilgan xavfsiz versiyalardan foydalanish har bir bosqichda xatolarni ushlash va qayd etish orqali yordam berishi mumkin. Bundan tashqari, nosozliklarni tuzatish maqsadida zanjirga jurnallash funksiyalarini qo'shishingiz mumkin.
  4. S: Compose va Pipe-ni this kontekstini o'zgartiradigan metodlar bilan ishlata olamanmi? J: this kontekstiga tayanadigan metodlarni ishlatishda ehtiyot bo'ling. To'g'ri kontekstni saqlash uchun metodlarni bog'lash yoki strelka funksiyalaridan foydalanishingiz kerak bo'lishi mumkin:
const obj = {
  qiymat: 5,
  ikkilantir() { return this.qiymat * 2; }
};

const natija = pipe(
  () => obj.ikkilantir(),
  x => x + 1
)();

console.log(natija); // 11
  1. S: Compose va Pipe matematikadagi funksiya kompozitsiyasi tushunchasi bilan qanday bog'liq? J: Dasturlashdagi funksiya kompozitsiyasi, ayniqsa Compose, matematikadagi funksiya kompozitsiyasi tushunchasini to'g'ridan-to'g'ri aks ettiradi. Matematikada, (f ∘ g)(x) = f(g(x)), bu aynan bizning Compose funksiyamiz bajaradigan ishdir.

Qo'shimcha Manbalar

  1. Eric Elliott-ning Composing Software seriyasi
  2. Ramda Hujjatlari
  3. Kyle Simpson-ning Functional-Light JavaScript kitobi
  4. MDN Web Docs: Yopilmalar (Closures)