ตัวช่วย Iterator เปลี่ยนเป็น Baseline ใหม่พร้อมใช้งาน

Jeremy Wagner

เผยแพร่: 1 พฤษภาคม 2025

หากคุณเขียน JavaScript การทำซ้ำคือสิ่งที่คุณทำบ่อยครั้ง คุณเขียนลูปเพื่อทำงานกับอาร์เรย์ หรือใช้วิธีการเขียนโปรแกรมเชิงฟังก์ชัน เช่น map, filter และวิธีการอื่นๆ ที่คล้ายกันเพื่อประมวลผลข้อมูลทุกประเภท

อย่างไรก็ตาม ข้อจำกัดอย่างหนึ่งของการใช้เมธอดเหล่านี้คือใช้ได้กับอาร์เรย์เท่านั้น หากต้องการใช้กับรายการที่วนซ้ำได้ คุณจะต้องแปลงเป็นอาร์เรย์ แล้วเรียกใช้เมธอดที่ต้องการ ซึ่งอาจสิ้นเปลือง หรือในกรณีที่อินเทอร์เบิลแสดงถึงชุดข้อมูลที่ไม่มีที่สิ้นสุดโดยใช้ฟังก์ชัน Generator การดำเนินการนี้จะเป็นไปไม่ได้ แต่ตอนนี้ตัวช่วยตัววนซ้ำได้กลายเป็นฟีเจอร์ใหม่ในเบราว์เซอร์พื้นฐานแล้ว ความสามารถนี้จึงพร้อมใช้งานในเบราว์เซอร์ต่างๆ แล้ว

เครื่องมือช่วยตัวดำเนินการทํางานอย่างไร

เครื่องมือช่วยสำหรับตัวดำเนินการวนจะแสดงโดยการกำหนดเมธอดใหม่ใน prototype ของออบเจ็กต์ Iterator วิธีการเหล่านี้สอดคล้องกับวิธีการเขียนโปรแกรมเชิงฟังก์ชันหลายวิธีที่คุณคุ้นเคย เช่น map, filter, reduce และวิธีการอื่นๆ ที่คล้ายกัน

เช่น คุณอาจใช้ตัวช่วยตัวดำเนินการวนซ้ำในเมธอด filter เพื่อกรองรายการลิสต์ตามเนื้อหาของพร็อพเพอร์ตี้ innerText ของคอลเล็กชันโหนด DOM ซึ่งจะใช้ในภายหลังในลูป for ได้โดยทำดังนี้

const posts = document.querySelectorAll("ul#specific-list > li")
  .values()
  .filter(item => item.textContent.includes("kiwi"));

// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
  console.log(post.textContent);
}

ในข้อมูลโค้ดด้านบน มีการใช้เมธอดตัวช่วยของ Iterator สําหรับ filter เพื่อวนไปยังองค์ประกอบ <li> ทั้งหมดในองค์ประกอบ <ul> ที่เฉพาะเจาะจง เกณฑ์การกรองคือเนื้อหาข้อความขององค์ประกอบแต่ละรายการต้องมีสตริงย่อยของ "kiwi"

นอกจากนี้ คุณยังใช้ตัวช่วยตัววนซ้ำกับฟังก์ชัน Generator ได้ด้วย ในตัวอย่างนี้ ฟังก์ชัน Generator จะคํานวณผลคูณตามลําดับ แต่ใช้ตัวช่วยตัวดำเนินการวนซ้ำเพื่อกรองค่าที่หารด้วย 8 ออก และบันทึกค่าที่กรองแล้ว 5 รายการแรกลงในคอนโซล

function* factorials (n) {
  let result = 1;

  for (let i = 1; i <= n; i++) {
    result *= i;

    yield result;
  }
}

const filteredFactorials = factorials(128).filter(x => x % 8 === 0);

console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);

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

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

กรณีการใช้งานตัวช่วยตัววนมีมากมายและช่วยเพิ่มประสิทธิภาพการทำงานให้กับนักพัฒนาซอฟต์แวร์ได้อย่างมาก เมื่อชิ้นงานเหล่านี้เป็นชิ้นงานพื้นฐานที่เพิ่งเปิดตัว คุณควรมั่นใจมากขึ้นว่าจะใช้ชิ้นงานดังกล่าวได้โดยไม่ต้องกังวลเกี่ยวกับปัญหาความเข้ากันได้ ดูข้อมูลเพิ่มเติมได้ที่แหล่งข้อมูลต่อไปนี้