Trong bài trước chúng ta đã được làm quen với vòng lặp For. Trong bài này Wecode sẽ giới thiệu với các bạn 1 vòng lặp cũng thường được sử dụng trong các đối tượng của Javascript, đó là vòng lặp for in.
Vòng lặp for in
Câu lệnh for in trong javascript duyệt qua các thuộc tính của một Đối tượng:
Cú pháp
for (key in object) {
// code block to be executed
}Hãy thử ví dụ sau:
<html>
<body>
<h2>JavaScript For In Loop</h2>
<p>Câu lệnh for in trong Javascript duyệt qua các thuộc tính của một đối tương:</p>
<p id="demo"></p>
<script>
const person = {fname:"John", lname:"Doe", age:25};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>Giải thích ví dụ
- Vòng lặp for in lặp qua một đối tượng person
- Mỗi lần lặp lại trả về một key(x)
- Khóa được sử dụng để truy cập giá trị của khóa
- Giá trị của khóa là person [x]
Đối với Trong Mảng
Câu lệnh for in cũng có thể lặp qua các thuộc tính của Mảng:
Cú pháp
for (variable in array) {
code
}Thử ví dụ sau:
<html>
<body>
<h2>JavaScript For In</h2>
<p>Câu lệnh for in cũng có thể lặp qua các giá trị của mảng:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
txt += numbers[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>Không sử dụng vòng lặp for in trên một Mảng nếu thứ tự chỉ mục là quan trọng.
Thứ tự chỉ mục phụ thuộc vào việc triển khai và các giá trị mảng có thể không được truy cập theo thứ tự bạn mong đợi.
Tốt hơn là sử dụng vòng lặp for hoặc Array.forEach () cho mảng có thứ tự chỉ mục là quan trọng.
Vòng lặp forEach()
Phương thức forEach () gọi một hàm (một hàm gọi lại) một lần cho mỗi phần tử mảng.
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>Gọi hàm một lần cho mỗi phần tử của mảng.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + " ";
}
</script>
</body>
</html>Lưu ý rằng hàm trên có 3 tham số:
- Value
- Index
- Array
Nhưng khi gọi hàm chỉ sử dụng tham số value. Vì vậy ta có thể được viết lại thành:
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>Gọi hàm một lần cho mỗi phần tử của mảng.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + " ";
}
</script>
</body>
</html>Vòng lặp For Of
Câu lệnh for of lặp qua các giá trị của một đối tượng có thể lặp lại.
Nó cho phép bạn lặp lại các cấu trúc dữ liệu có thể lặp lại như Mảng, Chuỗi, Bản đồ, Danh sách Node, và hơn thế nữa:
Cú pháp:
for (biến của đổi tượng lặp) {
// Khối lệnh sẽ được thực thi
}Trong đó:
- biến – Đối với mỗi lần lặp, giá trị của thuộc tính tiếp theo được gán cho biến. Biến có thể được khai báo bằng const, let hoặc var.
- đối tượng lặp- Một đối tượng có các thuộc tính có thể lặp lại.
Ví dụ lặp qua đối tượng mảng:
<html>
<body>
<h2>JavaScript For Of Loop</h2>
<p>Câu lệnh For of lặp quá các giá trị của đối tượng lặp :</p>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Mercedes"];
let text = "";
for (let x of cars) {
text += x + " ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Ví dụ lặp qua đối tượng Chuỗi
<html>
<body>
<h2>JavaScript For Of Loop</h2>
<p>Câu lệnh for of lặp qua các giá trị của đối tượng lặp.</p>
<p id="demo"></p>
<script>
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>