JavaScript สำหรับ Loop
ตัวอย่าง
วนซ้ำ (วนซ้ำ) บล็อกโค้ดห้าครั้ง:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
วนซ้ำ (วนซ้ำ) อาร์เรย์เพื่อรวบรวมชื่อรถ:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- การวนซ้ำเริ่มต้นในตำแหน่ง 0 (
let i = 0) - การวนซ้ำจะเพิ่มขึ้นโดยอัตโนมัติ
iสำหรับการวิ่งแต่ละครั้ง - วนรอบทำงานตราบเท่าที่
i < cars.length.
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คำforสั่งกำหนดบล็อคโค้ดที่ดำเนินการตราบเท่าที่มี
trueเงื่อนไข
บันทึก
หากคุณละเว้นคำสั่ง 2 คุณต้องจัดเตรียมตัวแบ่งภายในลูป
มิฉะนั้นการวนซ้ำจะไม่สิ้นสุด สิ่งนี้จะทำให้เบราว์เซอร์ของคุณขัดข้องดูสิ่งนี้ด้วย:
ไวยากรณ์
for (statement 1; statement 2; statement 3) {
code block to be executed
}
พารามิเตอร์
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
คำสั่งวนรอบ JavaScript
| คำให้การ | คำอธิบาย | |
| หยุดพัก | หลุดออกจากวง | |
| ดำเนินต่อ | ข้ามค่าในลูป | |
| ในขณะที่ | วนรอบบล็อกโค้ดในขณะที่เงื่อนไขเป็นจริง | |
| ทำ...ในขณะที่ | วนรอบบล็อกโค้ดหนึ่งครั้ง จากนั้นในขณะที่เงื่อนไขเป็นจริง | |
| สำหรับ | วนรอบบล็อกโค้ดในขณะที่เงื่อนไขเป็นจริง | |
| สำหรับ...ของ | วนรอบค่าของ iterable | |
| สำหรับใน | วนรอบคุณสมบัติของวัตถุ |
ตัวอย่างเพิ่มเติม
เริ่มต้นหลายค่าในพารามิเตอร์แรก:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
ละเว้นพารามิเตอร์แรก (ตั้งค่าก่อนเริ่มการวนซ้ำ):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
ใช้continue- วนซ้ำบล็อกของรหัส แต่ข้ามค่า 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
ใช้break- วนลูปบล็อกโค้ด แต่ออกจากลูปเมื่อi == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
ละเว้นพารามิเตอร์ที่สอง
ใช้breakเพื่อออกจากลูป มิฉะนั้น ลูปจะไม่สิ้นสุด และเบราว์เซอร์ของคุณจะหยุดทำงาน:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
วนซ้ำอาร์เรย์ในลำดับจากมากไปน้อย (การเพิ่มขึ้นเชิงลบ):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
ละเว้นพารามิเตอร์สุดท้ายและเพิ่มค่าภายในลูป:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
วนรอบ NodeList และเปลี่ยนสีขององค์ประกอบ p ทั้งหมดในรายการ:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
ลูปที่ซ้อนกัน (ลูปภายในลูป):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
รองรับเบราว์เซอร์
for เป็นคุณลักษณะ ECMAScript1 (ES1)
ES1 (JavaScript 1997) ได้รับการสนับสนุนอย่างสมบูรณ์ในเบราว์เซอร์ทั้งหมด:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |