JavaScript Academy · Ders

pipe ve compose Oluşturma

Soldan sağa ve sağdan sola işlev birleştirmeyi uygulayın.

pipe ve compose Oluşturma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

İki İşlevden Çok Sayıda İşleve

İki argümanlı bir compose sınırlıdır. Gerçek işlem hatları birçok steps'i zincirler. Bu derste reduce ve reduceRight kullanarak genel amaçlı compose ve pipe oluşturacaksınız.

pipe: Soldan Sağa

pipe, yürütme sırasına göre okunur: İlk işlev önce çalışır. pipe(a, b, c)(x), c(b(a(x)))'e eşittir. Çoğu kişi bunu compose'dan daha doğal bulur.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(pipe(inc, double)(5));

reduce pipe'i Nasıl Çalıştırır

reduce, biriktirici olarak girdi değerini alır ve her işlevi sırayla uygular; her sonucu bir sonrakine aktarır. Başlangıç değeri olan x, zinciri başlatır.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const steps = pipe(
  n => n + 1,
  n => n * 3,
  n => n - 2
);

console.log(steps(4));

reduceRight ile compose

compose, tersine çevrilmiş pipe'tır. reduceRight işlev listesini sondan başa dolaşır; bu nedenle sağdaki işlev önce çalışır ve f(g(x)) ile eşleşir.

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

pipe ve compose Birbirinin Aynasıdır

Aynı işlev listesi, yön tersine döndüğü için pipe ve compose içinde farklı sonuçlar verir. steps'i nasıl okumak istediğinize göre seçim yapın.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const square = n => n * n;

console.log(pipe(inc, square)(3));
console.log(compose(inc, square)(3));

Tersine Çevrilmiş pipe Olarak compose

compose'u, işlev listesini tersine çevirerek pipe cinsinden tanımlayabilirsiniz. Bu, ikisinin ne kadar yakından ilişkili olduğunu gösterir.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => pipe(...fns.reverse());

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

Gerçek Bir Metin İşlem Hattı

pipe kullanarak küçük dize işlevlerinden bir kısa ad üreticisi oluşturun. Her adım tek bir iş yapar ve tek başına kolayca sınanabilir.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const slugify = pipe(
  s => s.trim(),
  s => s.toLowerCase(),
  s => s.replace(/\s+/g, '-')
);

console.log(slugify('  Hello World Example  '));

Dizi İşlemlerini Bileştirme

İşlem hatları diziler de dâhil olmak üzere her veri türüyle çalışır. Filtreleme ve eşlemeyi adlandırılmış tek bir dönüşümde birleştirin.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const process = pipe(
  arr => arr.filter(n => n % 2 === 0),
  arr => arr.map(n => n * 10)
);

console.log(process([1, 2, 3, 4, 5, 6]));

identity Sınır Durumu

İşlev olmadan pipe() çağrıldığında girdi değiştirilmeden döndürülür; çünkü reduce yalnızca başlangıç değerini döndürür. Bu identity davranışı, yardımcıların sıfır steps ile güvenle çağrılmasını sağlar.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));

Kürlemeyle Birleştirme

Curried ve kısmen uygulanmış işlevler doğrudan işlem hatlarına yerleşir. Her biri clean bir tek argümanlı adıma dönüşür.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const add = a => b => a + b;
const times = a => b => a * b;

const calc = pipe(add(3), times(2), add(-1));
console.log(calc(5));

pipe mi compose mu?

steps'in yürütme sırasına göre yukarıdan aşağıya okunmasını istiyorsanız pipe kullanın. Matematiksel f(g(x)) gösterimiyle eşleşmek istiyorsanız compose kullanın. Her ikisi de tek satırlık reduce sarmalayıcılarıdır ve işlevsel kütüphanelerde her yerde kullanılır.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const normalize = pipe(
  s => s.trim(),
  s => s.replace(/[^a-z0-9]+/gi, ' '),
  s => s.toUpperCase()
);

console.log(normalize('  a-b_c!d  '));

Hızlı Yoklama

compose'un işlevleri sağdan sola çalıştırmasını hangi dizi yöntemi sağlar?

Özet: pipe ve compose

Genel bileşim yardımcıları oluşturdunuz:

pipe, soldan sağa yürütme için reduce kullanır.
compose, sağdan sola yürütme için reduceRight kullanır.
compose, tersine çevrilmiş bir listeyle pipe olarak tanımlanabilir.
Boş işlem hatları identity gibi davranır ve Curried steps sorunsuzca yerleşir.

Sıkça Sorulan Sorular

“pipe ve compose Oluşturma” dersi ücretsiz mi?

Evet — “pipe ve compose Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“pipe ve compose Oluşturma” dersinde ne öğreneceğim?

Soldan sağa ve sağdan sola işlev birleştirmeyi uygulayın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“pipe ve compose Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön