Vòng lặp For trong Javascript là gì?
Trong lập trình, vòng lặp được sử dụng để lặp lại một khối mã. Các bài toán từ đơn giản đến phức tạp, không bài nào là không bắt gặp vòng lặp. Nó xuất hiện ở mọi bài toán, mọi vấn đề.
Ví dụ: nếu bạn muốn hiển thị một thông báo yêu cầu nhập số liệu nhiều lần, thì bạn có thể sử dụng vòng lặp. Nó chỉ là một ví dụ đơn giản; bạn có thể đạt được nhiều hơn nữa với các vòng lặp.
Nói đến vòng lặp thì hầu như ngôn ngữ lập trình nào cũng có và Javascript cũng không ngoại lệ. Nó là một trong những cấu trúc lệnh khá quan trọng, giúp giải quyết được nhiều bài toán trong thực tế, rút gọn được những đoạn mã rườm rà, bị lặp nhiều lần và giúp ta tiết kiệm được rất nhiều thời gian trong việc viết những đoạn mã cần thực thi nhiều lần liên tiếp.
Vòng lặp for của JavaScript lặp lại các phần tử với số lần cố định. Nó nên được sử dụng nếu số lần lặp được biết trước.
Hướng dẫn này tập trung vào vòng lặp for trong JavaScript.
Cú pháp của vòng lặp for được đưa ra dưới đây:
for (initialization; condition; increment)
{
//Đoạn mã mà bạn muốn được thực thi nhiều lần
}
Trong đó:
Initialization (khởi tạo): Thường là một câu lệnh khai báo biến (biến này được dùng để tham gia vào Condition (điều kiện)).
Condition (điều kiện): Là một biểu thức điều kiện. Nếu điều kiện True (đúng) thì đoạn mã sẽ được thực thi, nếu điều kiện False (sai) thì vòng lặp kết thúc.
Increment (gia tăng): Là một biểu thức làm thay đổi giá trị của biến được khai báo trong Initialization (khởi tạo), nhằm mục đích là để cho biểu thức điều kiện dần trở nên bị False, giúp vòng lặp được kết thúc.
Lưu đồ thuật toán của vòng lặp For trong JavaScript:
Cách thức thực hiện của vòng lặp For:
● Khởi tạo và/hoặc khai báo các biến và chỉ thực hiện một lần.
● Điều kiện được đánh giá.
● Nếu điều kiện là false, vòng lặp for kết thúc.
● Nếu điều kiện là true, khối mã bên trong vòng lặp for được thực thi.
● Increment (gia tăng) cập nhật giá trị của Initialization (biến khởi tạo) khi điều kiện là true.
● Điều kiện được đánh giá lại. Quá trình này tiếp tục cho đến khi điều kiện là false.
Lưu ý:
● Đối với những người mới lập trình thì nên sử dụng vòng lặp for bình thường vì các biến chạy, điều kiện, tăng giảm biến chạy đều thực hiện trên cùng một dòng, do đó dễ dàng sửa lỗi.
● Không nên bỏ trống các giá trị trong cú pháp của vòng lặp for.
● Nếu điều kiện kiểm tra trong một vòng lặp for là luôn true (đúng), nó sẽ chạy mãi mãi (cho đến khi đầy bộ nhớ).
Ví dụ 1: Sử dụng vòng lặp for để tính tổng các số tự nhiên n
Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác. Viết đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tính tổng các số tự nhiên bằng vòng lặp For JS </title>
</head>
<body>
<div style="text-align: justify;"><p><span style="color:black; font-family:Tahoma; font-size:14pt;" >
<button onclick="Tinhtong()">Tính tổng</button>
<p id="ketqua"></p>
</p></span></div>
<script type="text/javascript">
function Tinhtong () {
// chương trình hiển thị tổng các số tự nhiên
let sum = 0;
var n = parseInt(prompt("Nhập vào một số:", ""));
// vòng lặp từ i = 1 to n
// trong mỗi lần lặp, i được tăng thêm 1
for (let i = 1; i <= n; i++) {
sum += i; // sum = sum + i
}
document.getElementById("ketqua").innerHTML = sum;
}
</script>
</body>
</html>
Phân tích mã:
Nhập vào một số và gán cho biến n. Đây là số mà ta muốn tính tổng của n số.
Ở đây, giá trị của Tổng ban đầu (sum) là 0. Sau đó, một vòng lặp for được lặp lại từ i = 1 đến n. Trong mỗi lần lặp, i được thêm vào Tổng (sum) và giá trị của nó được tăng thêm 1.
Khi i trở thành n+1, điều kiện kiểm tra là false và Tổng sẽ bằng 0 + 1 + 2 + ... + n.
Kết quả chạy chương trình tính tổng sử dụng vòng lặp for cho trường hợp n=100 được hiển thị như hình ảnh dưới đây:
Ví dụ 2: Sử dụng vòng lặp for để hiển thị một dãy số tăng dần từ 1 đến n.
Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác. Viết đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
<title> </title>
</head>
<body>
<h1 id="header"></h1>
<script type="text/javascript">
var j = parseInt(prompt("Nhập vào một số:", ""));
for(var i=0; i
Phân tích mã:
Dưới đây là phần mô tả các bước thực thi của vòng lặp trên:
Nhập vào một số dương và gán cho biến j
Lần thứ nhất.
Khai báo biến i với giá trị là 0.
Kiểm tra xem điều kiện i < j có đúng hay không.
(Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi).
Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 1).
Lần thứ hai.
Kiểm tra xem điều kiện i < j có đúng hay không.
(Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi).
Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 2).
....
....
....
Lần thứ (j-1).
Kiểm tra xem điều kiện i < j có đúng hay không.
(Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi).
Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là j-1).
Lần thứ j.
Kiểm tra xem điều kiện i < j có đúng hay không.
(Kết quả là sai vì j không nhỏ hơn j).
==> Vòng lặp kết thúc.
Kết quả chạy chương trình sử dụng vòng lặp for hiển thị một dãy số tăng từ 1 đến n (cho trường hợp n=25) được hiển thị như hình ảnh dưới đây:
Ví dụ 3: Sử dụng vòng lặp for để hiển thị một dãy số giảm dần từ n xuống 1.
Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác. Viết đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
<title> </title>
</head>
<body>
<h1 id="header"></h1>
<script type="text/javascript">
var n = parseInt(prompt("Nhập vào một số:", ""));
for(var i=n; i > 0; i--){
document.write("Số: " + i + "
");
}
</script>
</body>
</html>
Phân tích mã:
Dưới đây là phần mô tả các bước thực thi của vòng lặp trên:
Nhập vào một số dương và gán cho biến n
Lần thứ nhất.
Khai báo biến i với giá trị là n.
Kiểm tra xem điều kiện i > 0 có đúng hay không.
(Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi).
Giá trị của biến i được giảm đi một (tức bây giờ giá trị của biến i sẽ là n-1).
Lần thứ hai.
Kiểm tra xem điều kiện i > 0 có đúng hay không.
(Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi).
Giá trị của biến i được giảm đi một (tức bây giờ giá trị của biến i sẽ là n-2).
....
....
....
Lần thứ (n-1).
Kiểm tra xem điều kiện i > 0 có đúng hay không.
(Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi).
Giá trị của biến i được giảm đi một (tức bây giờ giá trị của biến i sẽ là n).
Lần thứ n.
Kiểm tra xem điều kiện i > 0 có đúng hay không.
(Kết quả là sai vì 0 không lớn hơn 0).
==> Vòng lặp kết thúc.
Kết quả chạy chương trình sử dụng vòng lặp for hiển thị một dãy số giảm từ n xuống 1 (cho trường hợp n=25) được hiển thị như hình ảnh dưới đây:
