Các vòng lặp được sử dụng trong JavaScript để thực hiện các tác vụ lặp lại dựa trên một điều kiện. Điều kiện thường trở lại true hoặc false. Một vòng lặp sẽ tiếp tục chạy cho đến khi điều kiện xác định trả về false.
for Vòng
cú pháp
for (initialization; condition; finalExpression) {
// code
}
Các for vòng lặp bao gồm ba biểu thức tùy chọn, theo sau là một khối mã:
initialization– Biểu thức này chạy trước khi thực hiện vòng lặp đầu tiên và thường được sử dụng để tạo bộ đếm.condition– Biểu thức này được kiểm tra mỗi lần trước khi chạy vòng lặp. Nếu nó đánh giátruecácstatementhoặc mã trong vòng lặp được thực thi. Nếu nó đánh giáfalse, vòng lặp dừng lại. Và nếu biểu thức này bị bỏ qua, nó sẽ tự động đánh giá thànhtrue.finalExpression– Biểu thức này được thực hiện sau mỗi lần lặp của vòng lặp. Điều này thường được sử dụng để tăng bộ đếm, nhưng thay vào đó có thể được sử dụng để giảm bộ đếm.
Có thể bỏ qua bất kỳ biểu thức nào trong ba biểu thức này hoặc mã trong khối mã.
for vòng lặp thường được sử dụng để chạy mã một số lần nhất định. Ngoài ra, bạn có thể sử dụng break để thoát khỏi vòng lặp sớm, trước khi condition biểu thức đánh giá để false.
ví dụ
1. Lặp qua các số nguyên từ 0-8:
for (let i = 0; i < 9; i++) {
console.log(i);
}
// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 82. Sử dụng break để thoát ra khỏi một for vòng lặp trước condition Là false:
for (let i = 1; i < 10; i += 2) {
if (i === 7) {
break;
}
console.log('Total elephants: ' + i);
}
// Output:
// Total elephants: 1
// Total elephants: 3
// Total elephants: 5Cạm bẫy phổ biến: vượt quá bounds của một Mộtcá đuối
Khi lặp qua một mảng, rất dễ vô tình vượt quá giới hạn của mảng.
Ví dụ: vòng lặp của bạn có thể cố gắng tham chiếu đến phần tử thứ 4 của một mảng chỉ có 3 phần tử:
const arr = [ 1, 2, 3 ];
for (let i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}
// Output:
// 1
// 2
// 3
// undefinedCó hai cách để sửa mã này: đặt condition đến một trong hai i < arr.length hoặc i <= arr.length - 1.
for...in Vòng
cú pháp
for (property in object) {
// code
}Các for...in vòng lặp lặp đi lặp lại trên các thuộc tính của một đối tượng. Đối với mỗi thuộc tính, mã trong khối mã được thực thi.
ví dụ
1. Lặp lại các thuộc tính của một đối tượng và ghi tên và giá trị của nó vào bảng điều khiển:
const capitals = {
a: "Athens",
b: "Belgrade",
c: "Cairo"
};
for (let key in capitals) {
console.log(key + ": " + capitals[key]);
}
// Output:
// a: Athens
// b: Belgrade
// c: Cairo
Cạm bẫy phổ biến: Hành vi không mong muốn khi lặp qua một mảng
Mặc dù bạn có thể sử dụng một for...in vòng lặp để lặp qua một mảng, bạn nên sử dụng vòng lặp thông thường for hoặc for...of vòng lặp thay thế.
Các for...in vòng lặp có thể lặp qua các mảng và các đối tượng giống như mảng, nhưng không phải lúc nào nó cũng có thể truy cập các chỉ mục của mảng theo thứ tự.
Ngoài ra, các for...in vòng lặp trả về tất cả các thuộc tính và thuộc tính kế thừa cho một mảng hoặc đối tượng giống như mảng, điều này có thể dẫn đến hành vi không mong muốn.
Ví dụ, vòng lặp đơn giản này hoạt động như mong đợi:
const array = [1, 2, 3];
for (const i in array) {
console.log(i);
}
// 0
// 1
// 2
Nhưng nếu thứ gì đó giống như thư viện JS mà bạn đang sử dụng sẽ sửa đổi Array nguyên mẫu trực tiếp, một for...in vòng lặp cũng sẽ lặp lại điều đó:
const array = [1, 2, 3];
Array.prototype.someMethod = true;
for (const i in array) {
console.log(i);
}
// 0
// 1
// 2
// someMethod
Mặc dù sửa đổi các nguyên mẫu chỉ đọc như Array hoặc Object trực tiếp đi ngược lại các phương pháp hay nhất, đó có thể là sự cố với một số thư viện hoặc cơ sở mã.
Ngoài ra, kể từ khi for...in dành cho các đối tượng, nó chậm hơn nhiều với các mảng so với các vòng lặp khác.
Tóm lại, chỉ cần nhớ chỉ sử dụng for...in vòng lặp để lặp qua các đối tượng, không phải mảng.
for...of Vòng
cú pháp
for (variable of object) {
// code
}
Các for...of vòng lặp lặp qua các giá trị của nhiều loại iterables, bao gồm mảng và các loại bộ sưu tập đặc biệt như Set và Map. Đối với mỗi giá trị trong đối tượng có thể lặp lại, mã trong khối mã được thực thi.
ví dụ
1. Lặp lại một mảng:
const arr = [ "Fred", "Tom", "Bob" ];
for (let i of arr) {
console.log(i);
}
// Output:
// Fred
// Tom
// Bob
2. Lặp lại một Map:
const m = new Map();
m.set(1, "black");
m.set(2, "red");
for (let n of m) {
console.log(n);
}
// Output:
// [1, black]
// [2, red]
3. Lặp lại một Set:
const s = new Set();
s.add(1);
s.add("red");
for (let n of s) {
console.log(n);
}
// Output:
// 1
// red
while Vòng
cú pháp
while (condition) {
// statement
}
Các while vòng lặp bắt đầu bằng cách đánh giá condition. Nếu condition đánh giá để true, mã trong khối mã sẽ được thực thi. Nếu condition đánh giá để falsemã trong khối mã không được thực thi và vòng lặp kết thúc.
Ví dụ:
- Trong khi một biến nhỏ hơn 10, hãy ghi nó vào bảng điều khiển và tăng nó lên 1:
let i = 1;
while (i < 10) {
console.log(i);
i++;
}
// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
do...while vòng
Cú pháp:
do {
// statement
} while (condition);
Các do...while vòng lặp có liên quan chặt chẽ với while vòng. trong một do...while vòng, condition được kiểm tra ở cuối mỗi lần lặp của vòng lặp, thay vì ở đầu trước khi vòng lặp chạy.
Điều này có nghĩa là mã trong một do...while vòng lặp được đảm bảo chạy ít nhất một lần, ngay cả khi condition biểu thức đã ước tính thành true.
Ví dụ:
- Trong khi một biến nhỏ hơn 10, hãy ghi nó vào bảng điều khiển và tăng nó lên 1:
let i = 1;
do {
console.log(i);
i++;
} while (i < 10);
// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
2. Đẩy vào một mảng, ngay cả khi condition đánh giá để true:
const myArray = [];
let i = 10;
do {
myArray.push(i);
i++;
} while (i < 10);
console.log(myArray);
// Output:
// [10]
