การสร้าง 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การประยุกต์ใช้ฟังก์ชันบางส่วน
- ฟังก์ชันเคอร์รี
- การประกอบฟังก์ชัน
- การสร้าง pipe และ compose