JavaScript cung cấp toàn quyền kiểm soát để xử lý các vòng lặp và câu lệnh chuyển đổi. Có thể xảy ra tình huống khi bạn cần thoát ra khỏi vòng lặp mà chưa chạm tới đáy của nó. Cũng có thể xảy ra trường hợp bạn muốn bỏ qua một phần của khối mã và bắt đầu lần lặp tiếp theo của vòng lặp.
Để xử lý tất cả các tình huống như vậy, JavaScript cung cấp các câu lệnh ngắt và tiếp tục . Các câu lệnh này được sử dụng để ngay lập tức thoát ra khỏi bất kỳ vòng lặp nào hoặc để bắt đầu lần lặp tiếp theo của bất kỳ vòng lặp nào tương ứng.
Break
Câu lệnh break , được giới thiệu ngắn gọn với câu lệnh switch , được sử dụng để thoát khỏi vòng lặp sớm, thoát ra khỏi dấu ngoặc nhọn kèm theo.
Sơ đồ
Biểu đồ luồng của câu lệnh ngắt sẽ như sau –
Ví dụ 1
Ví dụ sau minh họa việc sử dụng câu lệnh break với vòng lặp while. Lưu ý cách vòng lặp thoát ra sớm khi x đạt đến 5 và đạt đến câu lệnh document.write (..) ngay bên dưới dấu ngoặc nhọn đóng
<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>
Kết quả
Entering the loop 2 3 4 5 Exiting the loop! Set the variable to different value and then try...
Chúng ta đã thấy cách sử dụng câu lệnh break bên trong câu lệnh switch .
continue
Câu lệnh continue yêu cầu trình thông dịch bắt đầu ngay lần lặp tiếp theo của vòng lặp và bỏ qua khối mã còn lại. Khi gặp câu lệnh continue , luồng chương trình sẽ ngay lập tức di chuyển đến biểu thức kiểm tra vòng lặp và nếu điều kiện vẫn đúng, thì nó sẽ bắt đầu lần lặp tiếp theo, nếu không thì điều khiển sẽ thoát khỏi vòng lặp.
Ví dụ 2
Ví dụ này minh họa việc sử dụng câu lệnh continue với vòng lặp while. Lưu ý cách câu lệnh continue được sử dụng để bỏ qua việc in khi chỉ số được giữ trong biến x đạt đến 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>
Kết quả
Entering the loop 2 3 4 6 7 8 9 10 Exiting the loop! Set the variable to different value and then try...
Sử dụng nhãn để kiểm soát luồng
Bắt đầu từ JavaScript 1.2, một nhãn có thể được sử dụng ngắt và tiếp tục kiểm soát luồng chính xác hơn. Nhãn chỉ đơn giản là một mã định danh theo sau là dấu hai chấm (:) được áp dụng cho một câu lệnh hoặc một khối mã. Chúng ta sẽ xem hai ví dụ khác nhau để hiểu cách sử dụng nhãn với ngắt và tiếp tục.
Lưu ý – Không được phép ngắt dòng giữa câu lệnh ‘tiếp tục’ hoặc ‘ngắt’ và tên nhãn của nó. Ngoài ra, không nên có bất kỳ câu lệnh nào khác giữa tên nhãn và vòng lặp liên quan.
Hãy thử xem hai ví dụ sau để hiểu rõ hơn về Nhãn.
ví dụ 3
Ví dụ sau đây cho thấy cách triển khai Nhãn bằng câu lệnh ngắt.
<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>
Kết quả
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!
ví dụ 4
<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>
Kết quả
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!
