Vòng lặp là một loại chương trình máy tính cho phép chúng ta lặp lại một thao tác cụ thể với số lần xác định trước mà không cần phải viết thao tác đó riêng lẻ.
Cũng như những ngôn ngữ lập trình khác, Javascript có rất nhiều cấu trúc lặp khác nhau while, for, do...while,... nhưng trong Javascript có cấu trúc lặp rất đặc biệt, có cú pháp ngắn gọn và dễ sử dụng. Đó chính là vòng lặp for...in.
Vòng lặp for.. in là một câu lệnh điều khiển cơ bản cho phép bạn lặp qua các thuộc tính của một đối tượng. Giống như vòng lặp for truyền thống, for.. in cũng duyệt từng phần từ một và thực thi khối lệnh trong thân vòng lặp.
Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về vòng lặp for..in trong JavaScript, cách sử dụng vòng lặp for.. in trong JavaScript để lặp qua vô số thuộc tính của một đối tượng thông qua các ví dụ điển hình.
Cú pháp của vòng lặp for..in
Sau đây là cú pháp được sử dụng cho vòng lặp for…in trong mã JavaScript:
for (variable in object) {
// statements
}
Trong đó:
variable: Tên của một biến, một phần tử của mảng hoặc thuộc tính của một đối tượng.
object: Một đối tượng hoặc tên của một đối tượng hợp lệ có các thuộc tính sẽ được lặp lại.
statements: Các câu lệnh để thực thi mỗi lần đi qua vòng lặp.
Lưu ý:
Phần thân của vòng lặp for in sẽ thực thi một lần cho mỗi thuộc tính của đối tượng.
Vòng lặp for in không lặp lại tất cả các thuộc tính của đối tượng. Nó chỉ có thể lặp qua các thuộc tính có thể liệt kê như thuộc tính do người dùng xác định hoặc thuộc tính do người dùng xác định được kế thừa. Bất kỳ thuộc tính nào được gắn cờ là không thể liệt kê (chẳng hạn như thuộc tính hoặc phương thức tích hợp sẵn) sẽ không được lặp lại thông qua việc sử dụng vòng lặp for in.
Vì không có thứ tự cụ thể nào mà các thuộc tính đối tượng được liệt kê trong vòng lặp for in, nên JavaScript có thể lặp qua các thuộc tính theo một thứ tự khác tùy thuộc vào việc triển khai hoặc phiên bản JavaScript của bạn.
Sử dụng câu lệnh break trong JavaScript để thoát khỏi vòng lặp.
Tránh sử dụng vòng lặp for...in để duyệt qua các phần tử của mảng, đặc biệt khi thứ tự chỉ mục là quan trọng.
Sử dụng vòng lặp for.. in để lặp qua một đối tượng
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 hocsinh = {
Name: 'Minh Anh',
Age: 9,
Class: '3A',
School: 'Tieu Hoc',
Address: 'Ho Chi Minh'
};
// Sử dụng vòng lặp for...in
for(var phantu in hocsinh) {
// display the properties
console.log(phantu + ':' + hocsinh[phantu]);
}
</script>
</body>
</html>
Giải thích đoạn mã trên:
Trong chương trình trên, vòng lặp for...in được sử dụng để lặp lại đối tượng ‘hocsinh’ và in tất cả các thuộc tính của nó.
đối tượng ‘phantu’ được gán cho biến ‘phantu’.
hocsinh[phantu] được sử dụng để truy cập giá trị của ‘phantu’.
Kết quả đầu ra khi chạy đoạn mã trên:
name: 'Minh Anh',
age: 9,
class: ‘3A’,
school:’Tieu Hoc’,
address: ‘Ho Chi Minh’
Sử dụng vòng lặp for-in với mảng
Vì một mảng là một đối tượng, bạn có thể sử dụng vòng lặp for-in để lặp qua các phần tử của mảng.
Ví dụ 1:
Sau đây là ví dụ vòng lặp for-in sử dụng một mảng:
<!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 arr = ['red', 'orange', 'green', 'blue', 'indigo', ‘violet’];
for (var color in arr) {
console.log(arr[color]);
}
</script>
</body>
</html>
Giải thích đoạn mã trên:
Khai báo biến mảng arr là tập hợp các phần tử chuỗi tên của màu sắc từ ‘red’..’violet’.
Sử dụng vòng lặp for ..in duyệt biến color trong mảng arr.
Mỗi lần duyệt thì thực hiện câu lệnh console.log để in lần lượt phần tử có tên màu đó lên màn hình.
Trong ví dụ này, kết quả sẽ được in ra trong console log như sau:
Red
Orange
Green
Blue
Indigo
Violet
Ví dụ 2:
Tính tổng các phần tử của mảng
<!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 arr = [10, 20, 30, 50, 100];
var tong = 0;
for(var item in arr) {
tong += arr[item];
}
console.log(tong);
</script>
</body>
</html>
Giải thích đoạn mã trên:
Khai báo biến mảng và tổng ban đầu được gán giá trị là 0.
Sử dụng vòng lặp for..in để duyệt qua từng phần tử trong mảng và mỗi lần được cộng dồn giá trị các phần tử trong mảng đó.
Sau khi kết thúc vòng lặp for..in, giá trị tổng sau cùng được in ra màn hình bằng console.log
Kết quả đầu ra sau khi chạy chương trình là: 210
Sử dụng for...in với chuỗi (Strings)
Bạn cũng có thể sử dụng vòng lặp for...in để lặp lại các giá trị chuỗi.
Ví dụ:
Sau đây là ví dụ vòng lặp for-in sử dụng một chuỗi để in từng ký tự trong chuỗi lên màn hình:
<!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 str = 'JavaScript';
// Sử dụng vòng lặp for...in
for (var k in str) {
console.log(str[k]);
}
</script>
</body>
</html>
Giải thích đoạn mã trên:
Khai báo biến str là chuỗi có tên là 'JavaScript' (Bạn cũng có thể chọn một chuỗi bất kỳ nào khác để thử).
Sử dụng vòng lặp for ..in duyệt biến k trong chuỗi str.
Mỗi lần duyệt thì thực hiện câu lệnh console.log để in lần lượt từng ký tự có trong str.
Kết quả đầu ra sau khi chạy chương trình:
J
a
v
a
S
c
r
i
p
t