ลูปสามารถดำเนินการบล็อกโค้ดได้หลายครั้ง
การวนซ้ำมีประโยชน์หากคุณต้องการเรียกใช้โค้ดเดียวกันซ้ำแล้วซ้ำอีก เวลาที่มีค่าแตกต่างกัน
มักเป็นกรณีนี้เมื่อทำงานกับอาร์เรย์:
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>";
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript รองรับการวนซ้ำประเภทต่างๆ:
for - วนซ้ำบล็อกโค้ดหลายครั้ง
for/in - วนซ้ำคุณสมบัติของวัตถุ
for/of - วนซ้ำค่าของ an วัตถุที่ทำซ้ำได้
While - วนซ้ำบล็อกโค้ดในขณะที่เงื่อนไขที่ระบุเป็นจริง
do/ While - ยังวนซ้ำบล็อกของโค้ดในขณะที่เงื่อนไขที่ระบุเป็นจริง
สำหรับ วนซ้ำคำสั่ง for จะสร้างลูปที่มี 3 นิพจน์เสริม:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}นิพจน์ 1 จะถูกดำเนินการ (หนึ่งครั้ง) ก่อนที่จะดำเนินการบล็อกโค้ด
นิพจน์ 2 กำหนดเงื่อนไขในการดำเนินการบล็อคโค้ด
นิพจน์ 3 จะถูกดำเนินการ (ทุกครั้ง) หลังจากที่บล็อกโค้ดถูกดำเนินการแล้ว
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
จากตัวอย่างข้างต้น คุณสามารถอ่านได้:
นิพจน์ 1 ตั้งค่าตัวแปรก่อนที่ลูปจะเริ่มต้น (ให้ i=0)
นิพจน์ 2 กำหนดเงื่อนไขสำหรับลูปที่จะรัน (i must be less than 5).
นิพจน์ 3 จะเพิ่มค่า (i++) ในแต่ละครั้งที่บล็อกโค้ดในลูปมี ถูกประหารชีวิต
โดยปกติคุณจะใช้นิพจน์ 1 เพื่อเริ่มต้นตัวแปรที่ใช้ในลูป (ให้ i=0)
นี่ไม่ใช่กรณีเสมอไป จาวาสคริปต์ไม่สนใจ นิพจน์ 1 คือ ไม่จำเป็น.
คุณสามารถเริ่มต้นค่าได้หลายค่าในนิพจน์ 1 (คั่นด้วยเครื่องหมายจุลภาค):
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
และคุณสามารถละเว้นนิพจน์ 1 ได้ (เช่น เมื่อตั้งค่าของคุณแล้ว ก่อนที่วงจะเริ่ม):
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
มักใช้นิพจน์ 2 เพื่อประเมินเงื่อนไขของตัวแปรเริ่มต้น
นี่ไม่ใช่กรณีเสมอไป จาวาสคริปต์ไม่สนใจ นิพจน์ที่ 2 คือ ยังไม่จำเป็น
หากนิพจน์ 2 คืนค่าเป็นจริง การวนซ้ำจะเริ่มต้นใหม่อีกครั้ง หากคืนค่าเป็นเท็จ แสดงว่า วนซ้ำจะสิ้นสุด
หากคุณละเว้นนิพจน์ 2 คุณต้องจัดให้มี ตัวแบ่ง ภายใน วนซ้ำ ไม่เช่นนั้นวงจรจะไม่มีวันสิ้นสุด นี่จะทำให้เบราว์เซอร์ของคุณเสียหาย อ่านเกี่ยวกับการหยุดพักในบทต่อๆ ไปของบทช่วยสอนนี้
บ่อยครั้งนิพจน์ 3 จะเพิ่มค่าของตัวแปรเริ่มต้น
นี่ไม่ใช่กรณีเสมอไป จาวาสคริปต์ไม่สนใจ นิพจน์ที่ 3 คือ ไม่จำเป็น.
นิพจน์ 3 สามารถทำอะไรก็ได้ เช่น การเพิ่มขึ้นเป็นลบ (i--) บวก เพิ่มขึ้น (i=i + 15) หรืออย่างอื่น
สามารถละเว้นนิพจน์ 3 ได้ (เช่นเมื่อคุณเพิ่มค่าภายในลูป):
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
การใช้ var ในการวนซ้ำ:
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
ใช้ let ในการวนซ้ำ:
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
ในตัวอย่างแรก การใช้ var จะเป็นการประกาศตัวแปร การวนซ้ำจะประกาศตัวแปรภายนอกการวนซ้ำอีกครั้ง
ในตัวอย่างที่สอง การใช้ let จะเป็นการประกาศตัวแปร การวนซ้ำจะไม่ประกาศตัวแปรภายนอกการวนซ้ำอีกครั้ง
เมื่อ let ถูกใช้เพื่อประกาศตัวแปร i ในลูป i ตัวแปรจะมองเห็นได้ภายในลูปเท่านั้น
For/Of และ For/In ลูปลูป for/in และลูป for/of จะอธิบายไว้ในบทถัดไป
ขณะ วนซ้ำลูป While และ do/ While จะอธิบายไว้ในบทถัดไป