0Pricing
JavaScript Academy · บทเรียน

การสร้าง pipe และ compose

สร้างการประกอบฟังก์ชันจากซ้ายไปขวาและจากขวาไปซ้าย

การสร้าง pipe และ compose เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

จากสองฟังก์ชันสู่หลายฟังก์ชัน

compose ที่รับอาร์กิวเมนต์สองตัวมีข้อจำกัด สายการประมวลผลจริงเชื่อมโยงหลายขั้นตอนเข้าด้วยกัน ในบทเรียนนี้คุณจะสร้าง compose และ pipe สำหรับการใช้งานทั่วไป โดยใช้ reduce และ reduceRight

pipe: จากซ้ายไปขวา

pipe อ่านตามลำดับการทำงาน ฟังก์ชันตัวแรกจะทำงานก่อน pipe(a, b, c)(x) เท่ากับ c(b(a(x))) คนส่วนใหญ่มองว่าวิธีนี้เป็นธรรมชาติกว่า compose

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 อย่างไร

reduce เริ่มจากใช้ค่าข้อมูลเข้าเป็นตัวสะสม แล้วใช้ฟังก์ชันแต่ละตัวตามลำดับ โดยส่งผลลัพธ์ของแต่ละตัวต่อให้ตัวถัดไป ค่าเริ่มต้น x จะเป็นตัวเริ่มต้นของสายการทำงาน

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));

compose กับ reduceRight

compose คือ pipe ที่กลับทิศทาง การใช้ reduceRight จะเดินผ่านรายการฟังก์ชันจากท้ายสุด ทำให้ฟังก์ชันขวาสุดทำงานก่อน ซึ่งตรงกับ f(g(x))

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 และ compose เป็นภาพสะท้อนกัน

รายการฟังก์ชันเดียวกันให้ผลลัพธ์ต่างกันเมื่อใช้กับ pipe เทียบกับ compose เพราะทิศทางกลับกัน ให้เลือกตามวิธีที่ต้องการอ่านขั้นตอนต่าง ๆ

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));

compose ในฐานะ pipe ที่กลับลำดับ

คุณสามารถนิยาม compose โดยอาศัย pipe ด้วยการกลับลำดับรายการฟังก์ชัน วิธีนี้แสดงให้เห็นว่าทั้งสองแบบมีความเกี่ยวข้องกันอย่างใกล้ชิด

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));

สายการประมวลผลข้อความจริง

สร้างตัวสร้าง slug จากฟังก์ชันจัดการข้อความขนาดเล็กด้วย pipe แต่ละขั้นตอนทำงานเพียงอย่างเดียวและทดสอบแยกกันได้ง่าย

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  '));

การประกอบการดำเนินการกับอาร์เรย์

สายการประมวลผลทำงานกับข้อมูลได้ทุกชนิด รวมถึงอาร์เรย์ด้วย คุณสามารถรวมการกรองและการแปลงสมาชิกให้เป็นการแปลงที่มีชื่อเดียว

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

การเรียกใช้ pipe() โดยไม่มีฟังก์ชันจะส่งกลับข้อมูลเข้าโดยไม่เปลี่ยนแปลง เพราะ reduce เพียงส่งกลับค่าเริ่มต้น พฤติกรรมแบบ identity นี้ทำให้เรียกใช้ตัวช่วยได้อย่างปลอดภัยแม้ไม่มีขั้นตอนเลย

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

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

การรวมเข้ากับการทำเคอร์รี

ฟังก์ชันที่ทำเคอร์รีหรือกำหนดอาร์กิวเมนต์แบบ partial สามารถนำไปใส่ในสายการประมวลผลได้โดยตรง แต่ละฟังก์ชันจะกลายเป็นขั้นตอนที่รับอาร์กิวเมนต์เดียวอย่าง clean

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 หรือ compose

ใช้ pipe เมื่อคุณต้องการอ่านขั้นตอนจากบนลงล่างตามลำดับการทำงาน ใช้ compose เมื่อต้องการให้ตรงกับสัญกรณ์ทางคณิตศาสตร์ f(g(x)) ทั้งสองแบบเป็นตัวห่อหุ้ม reduce เพียงบรรทัดเดียว และพบได้ทั่วไปในไลบรารีเชิงฟังก์ชัน

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  '));

ตรวจสอบความเข้าใจอย่างรวดเร็ว

เมธอดอาร์เรย์ใดทำให้ compose เรียกใช้ฟังก์ชันจากขวาไปซ้าย

ทบทวน: pipe และ compose

คุณได้สร้างตัวช่วยสำหรับการประกอบฟังก์ชันทั่วไป ดังนี้

  • pipe ใช้ reduce เพื่อทำงานจากซ้ายไปขวา
  • compose ใช้ reduceRight เพื่อทำงานจากขวาไปซ้าย
  • สามารถนิยาม compose ให้เป็น pipe ที่ใช้รายการกลับลำดับได้
  • สายการประมวลผลว่างทำหน้าที่เป็น identity และสามารถใส่ขั้นตอนแบบ curried ได้อย่างเรียบร้อย

คำถามที่พบบ่อย

บทเรียน “การสร้าง pipe และ compose” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้าง pipe และ compose” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้าง pipe และ compose”

สร้างการประกอบฟังก์ชันจากซ้ายไปขวาและจากขวาไปซ้าย คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้าง pipe และ compose” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การประยุกต์ใช้ฟังก์ชันบางส่วน
  2. ฟังก์ชันเคอร์รี
  3. การประกอบฟังก์ชัน
  4. การสร้าง pipe และ compose
← กลับไปที่ JavaScript Academy