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

ฟังก์ชันเจเนอเรเตอร์ 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
ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก — ภาพประกอบ 1

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);
}
ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก — ภาพประกอบ 2

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 และไปป์ไลน์ขนาดเล็ก — ภาพประกอบ 3

จำนวนคู่แบบประเมินค่าเมื่อจำเป็น

เจเนอเรเตอร์เหมาะอย่างยิ่งสำหรับ ลำดับข้อมูลอย่างจำนวนคู่ โดยไม่ต้องสร้างอาร์เรย์ขนาดใหญ่ไว้ก่อน

// 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)]);
ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก — ภาพประกอบ 4

กระบวนการ 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 และไปป์ไลน์ขนาดเล็ก — ภาพประกอบ 5

แนวปฏิบัติที่ดี

เคล็ดลับ:

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

แบบทดสอบค่าที่ฟังก์ชันเจเนอเรเตอร์ส่งคืน

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

ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก — ภาพประกอบ 7

สรุปทบทวน

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

ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก — ภาพประกอบ 8

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

บทเรียน “ฟังก์ชันเจเนอเรเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. โพรโทคอลแบบวนซ้ำได้และ for...of
  2. ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก
  3. ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async
← กลับไปที่ JavaScript Academy