การวิเคราะห์วิธีการวนซ้ำใน JavaScript foreach, for-in, สำหรับ

JavaScript เป็นภาษาสคริปต์ที่แท้จริงซึ่งเป็นภาษาแบบไดนามิกที่อ่อนแอและเป็นต้นแบบที่มีประเภทการสนับสนุนในตัว ล่ามเรียกว่าเครื่องยนต์ JavaScript มันเป็นส่วนหนึ่งของเบราว์เซอร์และใช้กันอย่างแพร่หลายในภาษาสคริปต์ของลูกค้า มันถูกใช้ครั้งแรกในหน้าเว็บ HTML (แอปพลิเคชันภายใต้ภาษามาร์กอัปสากลมาตรฐาน) หน้าเว็บเพื่อเพิ่มฟังก์ชั่นแบบไดนามิกในหน้าเว็บ HTML

JavaScript เกิดมานานกว่า 20 ปีและวิธีการที่เราใช้ในการวนรอบอาร์เรย์มีดังนี้:

 สำหรับ (var index = 0; index <myarray.length; index ++) {console.log (myarray [index]);}

ตั้งแต่ JavaScript5 เราได้เริ่มใช้วิธี foreach ในตัว:

 myarray.foreach (ฟังก์ชัน (ค่า) {console.log (ค่า);});

วิธีการเขียนนั้นง่ายกว่ามาก แต่ก็มีข้อบกพร่อง: คุณไม่สามารถขัดจังหวะการวนซ้ำ (โดยใช้คำสั่งหรือใช้คำสั่ง

นอกจากนี้ยังมีวิธีการวนซ้ำใน JavaScript:

For-in Loop ได้รับการออกแบบมาสำหรับการวนรอบวัตถุ "enumerable":

 var obj = {a: 1, b: 2, c: 3}; สำหรับ (var prop ใน obj) {console.log ("obj." + prop + "=" + obj [prop]);} // output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"

นอกจากนี้คุณยังสามารถใช้มันเพื่อวนอาร์เรย์:

 สำหรับ (ดัชนี var ใน myarray) {// console.log นี้ (myarray [index]);}

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

ในระยะสั้นสำหรับในเป็นวิธีที่ใช้ในการวนซ้ำผ่านวัตถุที่มีคีย์สตริง

สำหรับลูป

JavaScript6 แนะนำวิธีการวนซ้ำใหม่ซึ่งเป็นวงสำหรับการวนรอบซึ่งง่ายกว่าแบบดั้งเดิมสำหรับลูปและในเวลาเดียวกันก็ทำขึ้นสำหรับข้อบกพร่องของ foreach และลูปสำหรับ

ลองมาดูกันสำหรับไวยากรณ์:

 สำหรับ (ค่า var ของ myArray) {console.log (ค่า);}

ไวยากรณ์ของ For-of Fors นั้นคล้ายกับ For-In แต่มันมีฟังก์ชั่นที่สมบูรณ์ยิ่งขึ้นและสามารถวนซ้ำหลายสิ่งหลายอย่าง

ตัวอย่างสำหรับการใช้งานลูป:

 ปล่อยให้ iterable = [10, 20, 30]; สำหรับ (ให้ค่าของ iterable) {console.log (ค่า);} // 10 // 20 // 30

เราสามารถใช้แทนได้ดังนั้นมันจึงกลายเป็นตัวแปรสแตติกที่ไม่ได้แก้ไขในลูป

 ปล่อยให้ iterable = [10, 20, 30]; สำหรับ (ค่า const ของ iterable) {console.log (ค่า);} // 10 // 20 // 30

ลูปสตริง:

 ปล่อยให้ iterable = "boo"; สำหรับ (ให้ค่าของการวนซ้ำ) {console.log (ค่า);} // "b" // "o" // "o" ปล่อยให้ iterable = ใหม่ uint8array ([0x00, 0xff]); ["B", 2], ["C", 3]]); สำหรับ (ให้ [key, value] ของ iterable) {console.log (ค่า);} // 1 // 2 // 3 สำหรับ (ให้รายการของ iterable) {console.log (รายการ);} // [a, 1] // [b, 2] // 3]); สำหรับ (ปล่อยให้ค่าของ iterable) {console.log (value);} // 1 // 2 // 3

วนลูปคอลเลกชัน DOM

วนลูปคอลเลกชัน DOM เช่น Nodelist เราได้พูดคุยกันถึงวิธีการวนลูปก่อนหน้านี้ ตอนนี้สะดวกแล้วคุณสามารถใช้การวนซ้ำได้โดยตรง:

 // หมายเหตุ: สิ่งนี้จะใช้งานได้เฉพาะในแพลตฟอร์มที่มี // นำไปใช้ nodeList.prototype [symbol.iterator] ให้บทความ paragraphs = document.querySelectorall ("บทความ> p");

วนวนวัตถุด้วยแอตทริบิวต์ที่ระบุได้

forof loop ไม่สามารถใช้โดยตรงกับวัตถุธรรมดา แต่ถ้าเราวนวนตามคุณสมบัติที่วัตถุมีเราสามารถใช้วิธีการในตัว Keys () วิธี::

 สำหรับ (คีย์ var ของ Object.keys (someObject)) {console.log (key + ":" + someObject [key]);}

วนรอบเครื่องกำเนิดไฟฟ้า

เราสามารถวนผ่านเครื่องกำเนิดไฟฟ้า:

 ฟังก์ชั่น* fibonacci () {// ตัวสร้างฟังก์ชันเล็ต [ก่อนหน้า, curr] = [0, 1]; ในขณะที่ (จริง) {[ก่อนหน้า, curr] = [curr, prev + curr]; ให้ผลผลิต;