For, While và Do While LOOP trong JavaĐoạn mã kèm ví dụ
James Hartman
⚡ Tóm tắt thông minh
Vòng lặp for, while và do while trong JavaScript lặp lại một khối lệnh mà không cần viết lại mã. Bài viết này giải thích từng cú pháp, đưa ra các ví dụ có thể chạy được với kết quả mong muốn, bổ sung các dạng for-in và for-of, và đề cập đến việc ngăn chặn vòng lặp vô hạn bằng break, continue và các lệnh khác.
Vòng lặp là gì? JavaKịch bản?
Vòng lặp rất hữu ích khi bạn phải thực thi lặp đi lặp lại cùng một dòng mã, trong một số lần cụ thể hoặc miễn là một điều kiện cụ thể là đúng. Giả sử bạn muốn nhập tin nhắn 'Xin chào' 100 lần trên trang web của mình. Tất nhiên, bạn sẽ phải sao chép và dán cùng một dòng 100 lần. Thay vào đó, nếu sử dụng vòng lặp, bạn có thể hoàn thành tác vụ này chỉ trong 3 hoặc 4 dòng.
Mỗi vòng lặp đều được xây dựng từ ba phần giống nhau, bất kể cú pháp trông như thế nào: một giá trị bắt đầu, một điều kiện quyết định xem có tiếp tục vòng lặp hay không, và một lệnh cập nhật đưa vòng lặp đến điểm kết thúc. Sơ đồ bên dưới minh họa chu kỳ lặp lại đó.
Các loại vòng lặp khác nhau trong JavaScript
Chủ yếu có bốn loại vòng lặp trong JavaScript.
- vòng lặp for
- vòng lặp for/in
- trong khi lặp lại
- vòng lặp do...while
hiện đại JavaĐoạn mã bổ sung vòng lặp for…of để lặp trực tiếp các giá trị, do đó trên thực tế có năm dạng khác nhau. Bảng dưới đây cho thấy nên sử dụng dạng nào trong từng tình huống cụ thể.
| Vòng lặp | Tình trạng đã được kiểm tra | Số lần thực thi tối thiểu | Được sử dụng tốt nhất cho |
|---|---|---|---|
| cho | Trước mỗi lượt chạy | 0 | Một số lần lặp lại đã biết |
| trong khi | Trước mỗi lượt chạy | 0 | Một con số không xác định được xác định bởi một điều kiện nào đó. |
| làm…trong khi | Sau mỗi lượt chạy | 1 | Menu và lời nhắc chỉ được chạy một lần. |
| tại | Trước mỗi lượt chạy | 0 | Đọc các khóa của một đối tượng |
| cho…của | Trước mỗi lượt chạy | 0 | Đọc các giá trị của một mảng hoặc chuỗi. |
vòng lặp for
Cú pháp:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- Câu lệnh 1 được thực thi trước, thậm chí trước cả khi thực thi lệnh 1.ping mã. Vì vậy, câu lệnh này thường được sử dụng để gán giá trị cho các biến sẽ được sử dụng bên trong vòng lặp.
- Câu lệnh 2 là điều kiện để thực hiện vòng lặp.
- Câu lệnh 3 được thực thi mỗi lần sau khi lưu.ping Mã được thực thi.
Hãy tự mình thử điều này:
<html>
<head>
<script type="text/javascript">
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
document.write("<b>Using for loops </b><br />");
for (i=0;i<students.length;i++)
{
document.write(students[i] + "<br />");
}
</script>
</head>
<body>
</body>
</html>
Đầu ra:
Using for loops John Ann Aaron Edwin Elizabeth
Bộ đếm bắt đầu từ 0 vì chỉ số đầu tiên của một mảng là số không, và điều kiện sử dụng students.length nên vòng lặp sẽ tự động điều chỉnh khi tên được thêm hoặc xóa.
trong khi lặp lại
Cú pháp:
while(condition)
{
lines of code to be executed
}
“Vòng lặp while” được thực thi miễn là điều kiện được chỉ định là đúng. Bên trong vòng lặp while, bạn nên bao gồm câu lệnh sẽ kết thúc vòng lặp tại một thời điểm nào đó. Nếu không, vòng lặp của bạn sẽ không bao giờ kết thúc và trình duyệt của bạn có thể bị sập.
Hãy tự mình thử điều này:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using while loops </b><br />");
var i = 0, j = 1, k;
document.write("Fibonacci series less than 40<br />");
while(i<40)
{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>
</head>
<body>
</body>
</html>
Đầu ra:
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ Cảnh báo: Một vòng lặp while mà điều kiện không bao giờ trở thành false sẽ làm đóng băng tab trình duyệt. Luôn luôn xác nhận rằng một biến bên trong thân vòng lặp làm cho điều kiện tiến về false, và sử dụng bộ đếm an toàn khi việc thoát khỏi vòng lặp phụ thuộc vào dữ liệu bên ngoài.
vòng lặp do...while
Cú pháp:
do
{
block of code to be executed
} while (condition)
Vòng lặp do…while rất giống với vòng lặp while. Sự khác biệt duy nhất là trong vòng lặp do…while, khối mã được thực thi một lần ngay cả trước khi kiểm tra điều kiện.
Hãy tự mình thử điều này:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using do...while loops </b><br />");
var i = 2;
document.write("Even numbers less than 20<br />");
do
{
document.write(i + "<br />");
i = i + 2;
}while(i<20)
</script>
</head>
<body>
</body>
</html>
Đầu ra:
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
Sự khác biệt trở nên rõ ràng khi điều kiện sai ngay từ đầu. Vòng lặp while không in ra gì, trong khi vòng lặp do…while vẫn in ra một dòng trước khi dừng.ping.
vòng lặp for…in
Vòng lặp for…in duyệt qua các tên thuộc tính có thể liệt kê của một đối tượng. Mỗi lần duyệt sẽ gán khóa tiếp theo cho biến vòng lặp, và giá trị được đọc bằng cú pháp ngoặc vuông.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
Đầu ra:
name : Ann age : 21 course : JavaScript
💡 Mẹo: Tránh sử dụng vòng lặp for…in trên mảng. Vòng lặp này trả về giá trị chỉ mục dưới dạng chuỗi và cũng truy cập các thuộc tính kế thừa, điều này có thể tạo ra kết quả không mong muốn. Thay vào đó, hãy sử dụng for…of hoặc vòng lặp for cổ điển cho mảng.
vòng lặp for…of và forEvery
Vòng lặp for…of đọc giá trị của bất kỳ đối tượng có thể lặp nào, bao gồm mảng, chuỗi, bản đồ và tập hợp. Phương thức forEach đạt được kết quả tương tự với một hàm gọi lại và cho phép truy cập vào chỉ mục.
const students = ["John", "Ann", "Aaron"]; // for...of reads each value directly for (const name of students) { console.log(name); } // forEach supplies the value and the index students.forEach(function (name, index) { console.log(index + " - " + name); }); // strings are iterable too for (const letter of "Ann") { console.log(letter); }
Đầu ra:
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
Một điểm khác biệt thực tế cần lưu ý: lệnh break và continue hoạt động bên trong vòng lặp for…of, nhưng chúng không thể được sử dụng bên trong vòng lặp forEach, vì mỗi hàm gọi lại là một hàm riêng biệt.
tạm dừng và tiếp tục các câu lệnh
Hai từ khóa thay đổi luồng hoạt động bình thường của bất kỳ vòng lặp nào. Câu lệnh `break` thoát khỏi vòng lặp hoàn toàn, còn câu lệnh `continue` bỏ qua lượt hiện tại và nhảy đến lượt tiếp theo.
const numbers = [4, 7, 10, 13, 16, 19]; // continue: skip odd numbers for (const n of numbers) { if (n % 2 !== 0) { continue; } console.log("even: " + n); } // break: stop at the first value above 12 for (const n of numbers) { if (n > 12) { console.log("first value above 12: " + n); break; } }
Đầu ra:
even: 4 even: 10 even: 16 first value above 12: 13
Vòng lặp xuất hiện trong hầu hết mọi kịch bản bạn sẽ viết. Tiếp tục với... thực tế JavaVí dụ mã kịch bản, xem lại JavaPhương thức mảng kịch bản để biết thêm thông tin về các hàm hỗ trợ lặp được xây dựng dựa trên các vòng lặp này, và hãy đọc thêm. Trong và ngoài JavaScript để quyết định nơi lưu trữ kịch bản hoàn chỉnh.
