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

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

โมเดล For Loop

สำหรับ (การเริ่มต้น; เงื่อนไข; การวนซ้ำ) {

[เนื้อหาห่วง] }

for loop ทำซ้ำบล็อกของโค้ดตามจำนวนครั้งที่ระบุและคงที่ เงื่อนไขจะตั้งค่าจำนวนครั้งที่ระบุและหยุดไม่ให้โค้ดทำงานผ่านจุดนั้น ในกรณีนี้ console.log จะถูกทำซ้ำทั้งหมดสามครั้ง ตามเงื่อนไขที่คาดไว้ การวนซ้ำเป็นตัวเพิ่มและเราเริ่มต้นตัวเริ่มต้นที่ 0 สิ่งสำคัญคือต้องทราบว่าตัววนซ้ำสามารถลดค่าได้เช่นเดียวกับการเพิ่มขึ้น

ใน for loop เราต้องใช้คำสั่ง let เนื่องจากเรากำลังจัดการตัวแปรผ่านการใช้ตัววนซ้ำ(++, — ) เคล็ดลับเดียวกันนี้ใช้ได้กับคำสั่ง ในขณะที่ และจะประเมินเป็นจริงได้สำเร็จเมื่อตรงตามเงื่อนไขที่ระบุ

คำถามตอนนี้คือ คำสั่งประเภทใดที่ช่วยให้เราใช้ const ได้ คำตอบคือคำสั่ง for...of มาดูตัวอย่างกันดีกว่าว่าเหตุใดเราจึงสามารถใช้ constแทน let เพื่อประกาศตัวแปรของเราได้

for...of ช่วยให้เราสามารถวนซ้ำอ็อบเจ็กต์ที่ทำซ้ำได้ ซึ่งอาจรวมถึงอาร์เรย์และสตริง นี่คือตัวอย่างของ for...of การวนซ้ำบนสตริง:

ในกรณีนี้ เราสามารถใช้ const เพื่อประกาศตัวแปรตัวอักษรของเราได้ เนื่องจากการคืนค่าของเราเป็นเพียงการวนซ้ำของอักขระในสตริงของเรา ตัวแปรไม่มีการเปลี่ยนแปลงเนื่องจากการส่งคืนไม่จำเป็นต้องมีการจัดการ

เราสามารถใช้ลูปเพื่อวนซ้ำวัตถุได้เช่นกัน หากคุณต้องการวนซ้ำคุณสมบัติในวัตถุ โมเดลจะมีลักษณะดังนี้:

สำหรับ...ในรูปแบบ

สำหรับ (const [คีย์] ใน [วัตถุ]) {

console.log(คีย์)

};

ในตัวอย่างด้านบน เรากำลังวนลูปบนออบเจ็กต์ผู้เขียนและเข้าถึงคีย์ในออบเจ็กต์นั้นเพื่อพิมพ์ค่าของมัน นี่เป็นเครื่องมือที่มีประโยชน์สำหรับการเข้าถึงคีย์ในออบเจ็กต์ โดยเฉพาะคีย์ที่ได้รับจากข้อมูล API หรือ JSON เป็นที่น่าสังเกตว่าคำสั่ง for…in ไม่สามารถใช้กับอาร์เรย์ได้ ปัญหาในการใช้ for...in เพื่อวนซ้ำอาร์เรย์คือ ไม่ให้ผลลัพธ์ที่เหมาะสมที่สุด เนื่องจากจะวนซ้ำราวกับว่าเป็นวัตถุจึงทำงานช้าลง

แล้วมีวิธีวนซ้ำที่มีประโยชน์บ้างไหม?

ใช่! และเป็นที่ชื่นชอบของฉัน (ด้วยเหตุผลที่ดี) ผ่านพวกเขาไปกันเถอะ

  • .find()- ส่งคืนองค์ประกอบแรกที่ตรงกับการดำเนินการทดสอบ
  • .filter()- สร้างอาร์เรย์ใหม่พร้อมองค์ประกอบที่ตรงตามการทดสอบที่กำหนด
  • .map()- รันแต่ละองค์ประกอบผ่านฟังก์ชันและสร้างอาร์เรย์ใหม่พร้อมผลลัพธ์
  • .forEach()- รันฟังก์ชันที่กำหนดสำหรับแต่ละองค์ประกอบในอาร์เรย์ที่กำหนด

วิธีวนซ้ำที่พบบ่อยที่สุดวิธีหนึ่งที่ผมใช้คือวิธี forEach() ในตัวอย่างข้างต้น เรากำลังประกาศค่าคงที่ที่เรียกว่าตัวเลขที่เก็บอาร์เรย์ด้วยชุดตัวเลข สำหรับแต่ละตัวเลข เรากำลังใช้ฟังก์ชันที่จะดึงดัชนีทั้งหมดในอาร์เรย์ และใช้ฟังก์ชันเพิ่ม 2 ให้กับแต่ละตัว ผลลัพธ์ที่คาดหวังสะท้อนถึงการดำเนินการนี้สำเร็จ เช่น 1 +2 = 3, 2+2 =4 และอื่นๆ

วิธีการเหล่านี้นำไปใช้ได้อย่างง่ายดายในการดำเนินงานหลายอย่าง และช่วยอำนวยความสะดวกในกระบวนการกำหนดฟังก์ชันให้กับโครงสร้างข้อมูลต่างๆ