JavaScript - การควบคุมแบบวนซ้ำ
JavaScript ให้การควบคุมเต็มรูปแบบเพื่อจัดการกับลูปและเปลี่ยนคำสั่ง อาจมีสถานการณ์ที่คุณต้องออกจากวงโดยไม่ต้องไปถึงจุดต่ำสุด นอกจากนี้ยังอาจมีสถานการณ์เมื่อคุณต้องการข้ามส่วนหนึ่งของบล็อกโค้ดของคุณและเริ่มการวนซ้ำครั้งถัดไป
เพื่อจัดการกับสถานการณ์ดังกล่าวทั้งหมด JavaScript มีให้ break และ continueงบ คำสั่งเหล่านี้ใช้เพื่อออกมาจากลูปใด ๆ ทันทีหรือเพื่อเริ่มการวนซ้ำครั้งถัดไปของลูปใดก็ได้ตามลำดับ
คำชี้แจงการแบ่ง
breakคำสั่งซึ่งแนะนำสั้น ๆ พร้อมกับคำสั่งswitchใช้เพื่อออกจากลูปก่อนกำหนดโดยแยกออกจากวงเล็บปีกกาที่ปิดล้อม
แผนภูมิการไหล
ผังงานของคำสั่งแบ่งจะมีลักษณะดังนี้ -
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ไฟล์ breakคำสั่งกับ while loop สังเกตว่าลูปแตกออกเร็วแค่ไหนx ถึง 5 และถึง document.write (..) คำสั่งด้านล่างถึงวงเล็บปีกกาปิด -
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20) {
if (x == 5) {
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...เราได้เห็นการใช้งานของ break คำสั่งภายใน a switch คำให้การ.
คำชี้แจงต่อ
continueคำสั่งบอกให้ล่ามเริ่มการวนซ้ำรอบถัดไปทันทีและข้ามบล็อกโค้ดที่เหลือ เมื่อcontinue พบคำสั่งโฟลว์โปรแกรมจะย้ายไปที่นิพจน์การตรวจสอบลูปทันทีและหากเงื่อนไขยังคงเป็นจริงก็จะเริ่มการทำซ้ำครั้งถัดไปมิฉะนั้นการควบคุมจะออกมาจากลูป
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงการใช้ไฟล์ continueคำสั่งกับ while loop สังเกตว่าไฟล์continue คำสั่งใช้เพื่อข้ามการพิมพ์เมื่อดัชนีอยู่ในตัวแปร x ถึง 5 -
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10) {
x = x + 1;
if (x == 5) {
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...การใช้ป้ายกำกับเพื่อควบคุมการไหล
เริ่มจาก JavaScript 1.2 ป้ายกำกับสามารถใช้กับไฟล์ break และ continueเพื่อควบคุมการไหลอย่างแม่นยำยิ่งขึ้น กlabelเป็นเพียงตัวระบุตามด้วยเครื่องหมายจุดคู่ (:) ที่ใช้กับคำสั่งหรือบล็อกรหัส เราจะเห็นสองตัวอย่างที่แตกต่างกันเพื่อทำความเข้าใจเกี่ยวกับการใช้ป้ายกำกับแบบแบ่งและดำเนินการต่อ
Note - ไม่อนุญาตให้มีการแบ่งบรรทัดระหว่างไฟล์ ‘continue’ หรือ ‘break’คำสั่งและชื่อป้ายกำกับ นอกจากนี้ไม่ควรมีคำสั่งอื่นใดระหว่างชื่อป้ายกำกับและลูปที่เกี่ยวข้อง
ลองใช้สองตัวอย่างต่อไปนี้เพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับป้ายกำกับ
ตัวอย่าง 1
ตัวอย่างต่อไปนี้แสดงวิธีใช้งาน Label ด้วยคำสั่ง break
<html>
<body>
<script type = "text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 5; i++) {
document.write("Outerloop: " + i + "<br />");
innerloop:
for (var j = 0; j < 5; j++) {
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>เอาต์พุต
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!ตัวอย่าง 2
<html>
<body>
<script type = "text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 3; i++) {
document.write("Outerloop: " + i + "<br />");
for (var j = 0; j < 5; j++) {
if (j == 3) {
continue outerloop;
}
document.write("Innerloop: " + j + "<br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>เอาต์พุต
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!