Vòng lặp trong javascript

Trong Javascript hỗ trợ chúng ta năm loại vòng lặp. Nhưng phổ biến nhất là bốn loại vòng lặp như sau:

• for - Lặp qua một khối lệnh bất kỳ nào đó một số lần
• for...in() - lặp qua các thuộc tính của một đối tượng bất kỳ
• while - lặp qua một khối lệnh trong khi vẫn thỏa mãn một biểu thức điều kiện
• do...while() - cũng lặp qua một khối lệnh trong khi vẫn thỏa mãn một biểu thức điều kiện

1. Vòng lặp for()

Vòng lặp for trong Javascript thường dùng để lặp một khoảng (min max) hoặc một mảng nào đó.

Cú pháp:

for ([initialization]; [condition]; [final-expression]){
	// statement
}

Trong đó:

• initialization: Là một biểu thức hoặc khai báo biến(e.g var i=0). Thông thường được sử dụng để khởi tạo một biến bắt đầu. Bạn có thể khai báo tùy ý với từ khóa var. Các biến này không phải là biến local đối với vòng lặp, chúng nằm trong cùng phạm vi vòng lặp.
• condition: Một biểu thức được sử dụng để đánh giá sau mỗi vòng lặp lặp. Nếu biểu thức này trả về kết quả đúng, vòng lặp sẽ được thực hiện. Nếu không có điều kiện này thì điều kiện luôn được đánh giá là đúng vòng lặp sẽ vô hạn không có điểm dừng.
• final-expression: Một biểu thức được xem sét vào cuối mỗi vòng lặp lặp(Biểu thức này trong mộ vài trường hợp được gọi là bước nhảy step) Được thực hiện trước khi vòng lặp kiểm tra điều kiện của biểu thức tiếp theo. Thường được sử dụng để cập nhật hoặc tăng hoặc giảm biến khởi tạo. 

Lưu ý: Tất cả các biểu thức trong vòng for đều tùy chọn có hoặc không.

Ví dụ 1:  Vòng lặp for với bước nhảy tăng (+1) đơn vị. 

<script type="text/javascript">
	// Lặp 10 lần từ 0 -> 9
	// Bước nhảy là i++ nên sau mỗi lần lặp i tăng lên 1 đơn vị
	for (var i = 0; i < 10; i++) {
		document.writeln(i+'<br />');
	   // Nhiều câu lệnh khác
	}
</script>

Ví dụ 2:  Vòng lặp for với bước nhảy giảm (-1) đơn vị.

<script type="text/javascript">
	// Lặp 10 lần từ 10 -> 1
	// Bước nhảy là i-- nên sau mỗi lần lặp i giảm đi 1 đơn vị
	for (var i = 10; i > 0; i--) {
		document.writeln(i+'<br />');
	   // Nhiều câu lệnh khác
	}
</script>

Xem kết quả

Tuy nhiên bước nhảy step không dừng lại sau mỗi vòng lặp chỉ có thể tăng (+/-1) đơn vị đâu. Nó có thể tăng hoặc giảm một số bất kỳ (+/-n). Nhưng thông thường và hay được sử dụng nhiều nhất vẫn là (+/-1) đơn vị.

Ví dụ 2:  Vòng lặp for với bước nhảy giảm (+n) đơn vị(Giảm thì ngược lại)

<script type="text/javascript">
	var step = 10;
	// Lặp 10 lần từ 0 -> 9, bước nhảy là 10
	for (var i = 0; i < 100; i+=step){
		document.write(i + '<br/>');
	}
</script>

Xem kết quả

Bạn có thể khai báo biến initialization ngoài vòng lặp.

<script type="text/javascript">
	var i = 0;
	// Lặp 10 lần từ 0 -> 9
	// Bước nhảy là i++ nên sau mỗi lần lặp i tăng lên 1 đơn vị
	for (i = 0; i < 10; i++){
		document.write(i + '<br/>');
	}
</script>

Như mình đã nói ở trên thì tất cả các biểu thức trong for đều là tùy chọn.

Ví dụ 4: Khuyết biểu thức khởi tạo.

<script type="text/javascript">
	var i = 0;
	for (; i < 10; i++) {
		document.write(i+'<br />');
		// more statements
	}
</script>

Xem kết quả

Ví dụ 4: Khuyết biểu thức điều kiện.

<script type="text/javascript">
	for (var i = 0;; i++) {
	   document.writeln(i+'<br />');
	   if (i > 3) break;
	   // Nhiều câu lệnh khác
	}
</script>

Xem kết quả

Ví dụ 5: Khuyết tất cả.

<script type="text/javascript">
	var i = 0;
	for (;;) {
	  if (i > 10) break;
	  document.write(i + '<br />');
	  i++;
	}
</script>

Xem kết quả

P/s: Có thể nói trong Javascript thì cá nhân mình thấy vòng lặp for là vòng lặp rất quan trọng và được sử dụng với tần số rất lớn nên mình trình bày khá dài dòng mong sao đủ ý để các bạn tham khảo.

2. Vòng lặp for...in()

Vòng lặp for...in() được sử dụng để lặp qua các thuộc tính của một đối tượng.

Cú pháp.

for (variable in object) {
	// Some code
}

Trong đó:

• variable: Thuộc tính được gán vào tên biến trong mỗi lần lặp.
• object: Đối tượng cần lặp

Cụ thể hơn: Trong mỗi lần lặp, một thuộc tính từ object – được gán tới biến variable - Và vòng lặp này tiếp tục tới khi hết tất cả thuộc tính của đối tượng.

Ví dụ:

<script type="text/javascript">
	// Khai báo một đối tượng
	var obj = {a: 1, b: 2, c: 3};
	// Lặp qua đối tượng
	for (const prop in obj) {
	  document.write(`obj.${prop} = ${obj[prop]}`);
	}
</script>

Xem kết quả

3. Vòng lặp while()

Vòng lặp while cũng giống như vòng lặp do...while là dùng để lặp các dữ liệu không biết chính xác điều kiện dừng hoặc điều kiện dừng phức tạp. Và vòng lặp while khác với vòng lặp do...while ở điểm nó sẽ tiến hành kiểm tra điều kiện rồi mới tiến hành lặp.

Cú pháp:

while (condition){
    // Some code
}

Trong đó:

Trong đó condition là điều kiện để chạy vòng lặp. Nếu condition đúng thì vòng lặp sẽ được tiếp tục và ngược lại nếu condition sai thì vòng lặp sẽ bị dừng.

Ví dụ: Thực hiện in ra các số từ 1 đến 10 bằng vòng lặp while().

<script type="text/javascript">
	// Khởi tạo biến i bằng 1
	var i=1;
	while(i<=10){
		document.write(i+ '<br>');
		// Tiến hành tăng i thêm 1 đơn vị
		i++;
	}
</script>

Xem kết quả

4. Vòng lặp do...while().

Đây là một dạng vòng lặp cũng khá phổ biến trong Javascript, đặc trưng của vòng lặp này là để lặp các dữ liệu mà không xác đinh được điều kiện dừng chính xác hoặc điều kiện dừng phức tạp và nó thực thi câu lệnh do trước rồi mới kiểm tra điều kiện dừng vòng lặp.

Cú pháp:

do {
    // some code
}
while (condition);

Trong đó:

Trong đó condition là điều kiện để dừng vòng lặp.

Ví dụ 6: Sử dụng vòng lặp do...while() để in ra các số từ 1 đến 10.

<script type="text/javascript">
	// Khởi tạo biến i bằng 1
	var i=1;
	do{
		// In ra i hiện tại
		document.write(i+ '<br>');
		// Tăng biến i thêm 1 đơn vị
		i++;
		// Kiểm tra điều kiện xem i>10 thì sẽ dừng 
	}while(i<=10);
</script>

Xem kết quả

5. Tổng kết.

Thông qua bài viết này mình đã giới thiệu tới các bạn về vòng lặp for trong Javascript. Hy vọng bài viết sẽ góp phần nào củng cố kiến thức cơ bản của bạn về Javascript nhé.