Vòng lặp cho phép chúng ta duyệt qua các mục trong mảng hoặc đối tượng và thực hiện những việc như in chúng, sửa đổi chúng hoặc thực hiện các loại tác vụ hoặc hành động khác. Có nhiều loại vòng lặp khác nhau và vòng lặp for trong JavaScript cho phép chúng ta lặp qua một bộ sưu tập [chẳng hạn như một mảng]
Trong bài viết này, chúng ta sẽ tìm hiểu về vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Tại sao nên sử dụng Vòng lặp For trong Mã JavaScript
Trong JavaScript, giống như trong các ngôn ngữ lập trình khác, chúng tôi sử dụng các vòng lặp để đọc hoặc truy cập các mục của bộ sưu tập. Bộ sưu tập có thể là một mảng hoặc một đối tượng. Mỗi khi câu lệnh vòng lặp quay vòng qua các mục trong một bộ sưu tập, chúng tôi gọi đó là một phép lặp
Có hai cách để truy cập một mục trong bộ sưu tập. Cách thứ nhất là thông qua khóa của nó trong bộ sưu tập, là chỉ mục trong mảng hoặc thuộc tính trong đối tượng. Cách thứ hai là thông qua chính vật phẩm đó, không cần chìa khóa
Định nghĩa của for…in Loop
Vòng lặp JavaScript
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Bộ sưu tập các mục có thể là mảng, đối tượng hoặc thậm chí là chuỗi
Cú pháp của for…in Loop
Vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"for [let key in value] {
//do something here
}Trong khối mã này,
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Lưu ý rằng chúng tôi sử dụng
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Sử dụng vòng lặp for với các đối tượng
Khi sử dụng vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Vì các đối tượng có thể kế thừa các mục thông qua chuỗi nguyên mẫu, bao gồm các phương thức và thuộc tính mặc định của Đối tượng cũng như các nguyên mẫu Đối tượng mà chúng ta có thể xác định, nên chúng ta nên sử dụng hasOwnProperty
Ví dụ về vòng lặp trên một đối tượng có thể lặp lại
Trong ví dụ sau, chúng tôi đang lặp lại biến
for [let key in value] {
//do something here
}const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Lưu ý rằng thứ tự của phép lặp tăng dần đối với các khóa [nghĩa là bắt đầu bằng các chữ số theo thứ tự số và sau đó là các chữ cái theo thứ tự bảng chữ cái]. Tuy nhiên, thứ tự xuất ra này khác với thứ tự chỉ mục của các mục được tạo khi khởi tạo đối tượng
Xem Đối tượng vòng lặp bút theo SitePoint [@SitePoint] trên CodePen
Sử dụng Vòng lặp for…in với Mảng
Khi sử dụng vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Vì vậy, nếu biến
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Ví dụ về mảng vòng lặp for…in
Trong ví dụ bên dưới, chúng tôi đang lặp lại biến sau đây
for [let key in value] {
//do something here
}for [let key in value] {
//do something here
}Và trong vòng lặp, chúng tôi đang hiển thị chỉ mục và giá trị của từng phần tử mảng
Xem Mảng vòng lặp bút theo SitePoint [@SitePoint] trên CodePen
Sử dụng Vòng lặp for…in với Chuỗi
Bạn có thể lặp qua một chuỗi bằng vòng lặp JavaScript
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Một ví dụ về chuỗi vòng lặp for…in
Trong ví dụ bên dưới, chúng tôi đang lặp lại biến sau đây
for [let key in value] {
//do something here
}const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Bên trong vòng lặp, chúng tôi đang hiển thị khóa hoặc chỉ mục của từng ký tự và ký tự tại chỉ mục đó
Xem Vòng lặp chuỗi bút của SitePoint [@SitePoint] trên CodePen
Hãy xem xét các tình huống mà vòng lặp JavaScript
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Lặp lại các đối tượng với vòng lặp JavaScript for…in
Bởi vì vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Gỡ lỗi với vòng lặp for…in
Một trường hợp sử dụng tốt khác cho vòng lặp JavaScript
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Khi sử dụng vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Khi nào không nên sử dụng JavaScript cho…trong vòng lặp
Bây giờ, hãy xem xét các tình huống mà vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Lặp lại có thứ tự các mảng
Vì thứ tự chỉ mục trong các lần lặp không được đảm bảo khi sử dụng vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Điều này đặc biệt cần thiết nếu bạn đang muốn hỗ trợ các trình duyệt như IE, trình duyệt này lặp lại theo thứ tự các mục được tạo thay vì theo thứ tự của các chỉ mục. Điều này khác với cách hoạt động của các trình duyệt hiện đại hiện nay, lặp lại các mảng dựa trên các chỉ số theo thứ tự tăng dần
Vì vậy, ví dụ: nếu bạn có một mảng gồm bốn phần tử và bạn chèn một phần tử vào vị trí thứ ba, thì trong các trình duyệt hiện đại, vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Thực hiện các thay đổi trong khi lặp lại
Mọi bổ sung, xóa hoặc sửa đổi thuộc tính không đảm bảo lặp lại theo thứ tự. Nên tránh thay đổi các thuộc tính trong vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Vì vậy, nếu bạn xóa một mục trước khi bạn truy cập mục đó trong lần lặp lại, thì mục đó sẽ không được truy cập trong toàn bộ vòng lặp
Tương tự, nếu bạn thay đổi một thuộc tính, điều đó không đảm bảo rằng mục đó sẽ không được truy cập lại. Vì vậy, nếu một thuộc tính bị thay đổi, nó có thể được truy cập hai lần trong vòng lặp thay vì một lần
Ngoài ra, nếu một thuộc tính được thêm vào trong quá trình lặp lại, nó có thể được truy cập hoặc không trong quá trình lặp lại.
Do những tình huống này, tốt nhất là tránh thực hiện bất kỳ thay đổi, xóa hoặc thêm đối tượng nào trong vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Đây là một ví dụ về việc thêm một phần tử trong vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Xem Bổ sung bút trong Vòng lặp đối tượng của SitePoint [@SitePoint] trên CodePen
Như bạn có thể thấy trong ví dụ trên, các phần tử được thêm vào không được lặp lại
Các lựa chọn thay thế cho vòng lặp For trong JavaScript
Vì vậy, trong những tình huống mà vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Sử dụng vòng lặp for với mảng
Không bao giờ sai khi sử dụng vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Điều này có nghĩa là khi sử dụng vòng lặp
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Câu lệnh sau tạo một vòng lặp lặp qua một mảng và in các giá trị của nó ra bàn điều khiển
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Phương thức forEach cho mảng và đối tượng
forEach trong JavaScript là một phương thức trên các nguyên mẫu mảng cho phép chúng ta lặp lại các phần tử của một mảng và các chỉ số của chúng trong hàm gọi lại
Các hàm gọi lại là các hàm mà bạn chuyển sang một phương thức hoặc hàm khác để được thực thi như một phần của quá trình thực thi phương thức hoặc hàm đó. Khi nói đến
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Ví dụ: câu lệnh sau lặp lại biến
for [let key in value] {
//do something here
}const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Bạn cũng có thể truy cập chỉ mục của mảng
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Các vòng lặp JavaScript
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Ngoài ra, bạn có thể
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Lưu ý rằng
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Phần kết luận
Bằng cách sử dụng vòng lặp JavaScript
const obj = {
"a": "JavaScript",
1: "PHP",
"b": "Python",
2: "Java"
};
for [let key in obj] {
console.log[key + ": " + obj[key] ]
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"Chia sẻ bài viết này
Shahed Nasser
Tôi là một nhà phát triển toàn diện đam mê học hỏi điều gì đó mới mỗi ngày, sau đó chia sẻ kiến thức của mình với cộng đồng