ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก
เขียนฟังก์ชันเจเนอเรเตอร์ด้วย function* ใช้ yield สร้างค่าแบบทยอยคำนวณ ขับการทำงานด้วย for...of หรือ next() และประกอบไปป์ไลน์ขนาดเล็ก
ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
เหตุใดจึงใช้ตัวสร้างค่า
เป้าหมาย: ผลิตค่าแบบทยอยสร้างด้วยตัวสร้างค่า
- function* ใช้กำหนดตัวสร้างค่า
- yield ผลิตค่าทีละขั้น
- ใช้ for...of หรือ next() เพื่อดึงค่ามาใช้
- ประกอบ pipeline ขนาดเล็กในลักษณะคล้าย map

function* และ yield
เจเนอเรเตอร์ใช้ function* และ yield การวนซ้ำจะดำเนินต่อจาก yield ล่าสุด
// A basic generator that yields 1..n lazily
function* countTo(n) {
for (let i = 1; i <= n; i = i + 1) {
yield i; // pause here and give i to the caller
}
}
for (const x of countTo(3)) {
console.log("value:", x);
}

next() ด้วยตนเอง
next() จะเลื่อนผ่านค่า yield และสุดท้ายส่งคืน done: true เมื่อทำงานเสร็จ
// You can also drive a generator manually with next()
const it = countTo(2);
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: undefined, done: true }

จำนวนคู่แบบประเมินค่าเมื่อจำเป็น
เจเนอเรเตอร์เหมาะอย่างยิ่งสำหรับ ลำดับข้อมูลอย่างจำนวนคู่ โดยไม่ต้องสร้างอาร์เรย์ขนาดใหญ่ไว้ก่อน
// Yield even numbers up to n (inclusive)
function* evensUpTo(n) {
for (let i = 0; i <= n; i = i + 1) {
if (i % 2 === 0) {
yield i;
}
}
}
console.log("evens 0..6:", [...evensUpTo(6)]);

กระบวนการ map แบบประเมินค่าเมื่อจำเป็น
ประกอบขั้นตอนเล็ก ๆ เข้าด้วยกัน โดยส่งเจเนอเรเตอร์หนึ่งเข้าไปยังอีกเจเนอเรเตอร์หนึ่งเพื่อสร้าง กระบวนการแบบประเมินค่าเมื่อจำเป็น
// map() as a generator: transform values lazily
function* map(iterable, fn) {
for (const v of iterable) {
yield fn(v);
}
}
const doubled = map(countTo(4), function (x) { return x * 2; });
console.log("doubled:", [...doubled]);

แนวปฏิบัติที่ดี
เคล็ดลับ:
- เรียกฟังก์ชันเจเนอเรเตอร์เพื่อรับ ตัววนซ้ำ (ฟังก์ชันจะยังไม่ทำงานทั้งหมดตั้งแต่ต้น)
- yield จะหยุดชั่วคราว ส่วน return จะจบลำดับข้อมูล
- เมื่อทำงานเสร็จแล้ว เจเนอเรเตอร์จะ หมดค่าให้วนซ้ำ ให้เรียกฟังก์ชันอีกครั้งเพื่อรับตัววนซ้ำใหม่

แบบทดสอบค่าที่ฟังก์ชันเจเนอเรเตอร์ส่งคืน
ตรวจสอบอย่างรวดเร็ว: ฟังก์ชันเจเนอเรเตอร์ส่งคืนอะไร

สรุปทบทวน
สรุปทบทวน: กำหนด function* ส่งค่าแบบประเมินค่าเมื่อจำเป็น ใช้งานด้วย for...of หรือ next() และประกอบกระบวนการของเจเนอเรเตอร์ขนาดเล็กเพื่อแปลงข้อมูลอย่างง่าย

คำถามที่พบบ่อย
บทเรียน “ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก”
เขียนฟังก์ชันเจเนอเรเตอร์ด้วย function* ใช้ yield สร้างค่าแบบทยอยคำนวณ ขับการทำงานด้วย for...of หรือ next() และประกอบไปป์ไลน์ขนาดเล็ก คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โพรโทคอลแบบวนซ้ำได้และ for...of
- ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก
- ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async