JavaScript สำหรับลูป
ลูปสามารถรันบล็อกของโค้ดได้หลายครั้ง
JavaScript ลูป
ลูปมีประโยชน์ หากคุณต้องการเรียกใช้โค้ดเดิมซ้ำแล้วซ้ำเล่า โดยมีค่าต่างกันในแต่ละครั้ง
มักจะเป็นกรณีนี้เมื่อทำงานกับอาร์เรย์:
แทนที่จะเขียนว่า
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
คุณสามารถเขียน:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
ลูปประเภทต่างๆ
JavaScript รองรับลูปประเภทต่างๆ:
for
- วนซ้ำผ่านบล็อกของรหัสหลายครั้งfor/in
- วนซ้ำคุณสมบัติของวัตถุfor/of
- วนซ้ำค่าของวัตถุที่วนซ้ำได้while
- วนซ้ำผ่านบล็อกของรหัสในขณะที่เงื่อนไขที่ระบุเป็นจริงdo/while
- ยังวนซ้ำผ่านบล็อกของรหัสในขณะที่เงื่อนไขที่ระบุเป็นจริง
The For Loop
ลู ปfor
มีไวยากรณ์ต่อไปนี้:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
คำสั่งที่ 1ถูกดำเนินการ (ครั้งเดียว) ก่อนการดำเนินการของบล็อกโค้ด
คำสั่งที่ 2กำหนดเงื่อนไขสำหรับการดำเนินการบล็อคโค้ด
คำสั่ง 3ถูกดำเนินการ (ทุกครั้ง) หลังจากที่บล็อกโค้ดถูกดำเนินการแล้ว
ตัวอย่าง
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
จากตัวอย่างข้างต้น คุณสามารถอ่าน:
คำสั่งที่ 1 ตั้งค่าตัวแปรก่อนเริ่มการวนซ้ำ (ให้ i = 0)
คำสั่ง 2 กำหนดเงื่อนไขสำหรับการวนซ้ำ (ฉันต้องน้อยกว่า 5)
คำสั่งที่ 3 เพิ่มค่า (i++) ทุกครั้งที่มีการดำเนินการบล็อกโค้ดในลูป
ใบแจ้งยอด 1
โดยปกติ คุณจะใช้คำสั่ง 1 เพื่อเริ่มต้นตัวแปรที่ใช้ในลูป (ให้ i = 0)
นี่ไม่ใช่กรณีเสมอไป JavaScript ไม่สนใจ งบ 1 เป็นทางเลือก
คุณสามารถเริ่มต้นค่าต่างๆ ในคำสั่ง 1 (คั่นด้วยเครื่องหมายจุลภาค):
ตัวอย่าง
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
และคุณสามารถละเว้นคำสั่ง 1 ได้ (เช่น เมื่อค่าของคุณถูกตั้งค่าก่อนเริ่มการวนซ้ำ):
ตัวอย่าง
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
คำชี้แจง 2
มักใช้คำสั่ง 2 เพื่อประเมินเงื่อนไขของตัวแปรเริ่มต้น
นี่ไม่ใช่กรณีเสมอไป JavaScript ไม่สนใจ คำสั่งที่ 2 ก็เป็นทางเลือกเช่นกัน
หากคำสั่งที่ 2 คืนค่า จริง การวนซ้ำจะเริ่มอีกครั้ง หากคืนค่า เท็จ การวนซ้ำจะสิ้นสุด
หากคุณละเว้นคำสั่ง 2 คุณต้องจัดเตรียมตัวแบ่งภายในลูป มิฉะนั้นการวนซ้ำจะไม่สิ้นสุด สิ่งนี้จะทำให้เบราว์เซอร์ของคุณขัดข้อง อ่านเกี่ยวกับช่วงพักในบทต่อๆ ไปของบทช่วยสอนนี้
คำชี้แจง 3
บ่อยครั้งที่คำสั่ง 3 เพิ่มค่าของตัวแปรเริ่มต้น
ซึ่งไม่เป็นเช่นนั้นเสมอไป JavaScript ไม่สนใจ และคำสั่ง 3 เป็นทางเลือก
ประโยคที่ 3 สามารถทำอะไรก็ได้ เช่น การเพิ่มขึ้นเชิงลบ (i--), การเพิ่มขึ้นในเชิงบวก (i = i + 15) หรืออย่างอื่น
นอกจากนี้ยังสามารถละเว้นคำสั่ง 3 (เช่นเมื่อคุณเพิ่มค่าของคุณภายในลูป):
ตัวอย่าง
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
ขอบเขตวง
ใช้var
ในวง:
ตัวอย่าง
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
ใช้let
ในวง:
ตัวอย่าง
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
ในตัวอย่างแรก การใช้var
ตัวแปรที่ประกาศในลูปจะประกาศตัวแปรนอกลูปอีกครั้ง
ในตัวอย่างที่สอง การใช้let
ตัวแปรที่ประกาศในลูปจะไม่ประกาศตัวแปรนอกลูปซ้ำ
เมื่อlet
ใช้เพื่อประกาศตัวแปร i ในลูป ตัวแปร i จะมองเห็นได้ภายในลูปเท่านั้น
สำหรับ/ของและสำหรับ/ในลูป
for/in
วนซ้ำและวนfor/of
ซ้ำจะอธิบายในบทต่อไป
ในขณะที่ลูป
while
วนซ้ำและอธิบายdo/while
ในบทต่อไป