Tốt. Vòng lặp qua các phần tử HTML là một nhiệm vụ rất phổ biến, vì vậy, JavaScript cung cấp nhiều cách tiếp cận khác với vòng lặp forEach có thể được sử dụng để lặp qua các phần tử HTML như vòng lặp for, vòng lặp for-of và vòng lặp while. Trong khi lặp qua các phần tử HTML, có thể sử dụng phương thức “getElementsByTagName” để lấy tập hợp phần tử đã chỉ định. Bài đăng này giải thích hoạt động của một số cách tiếp cận để lặp qua các phần tử HTML trong JavaScript
Điều thông thường bạn làm với một mảng là gì? . Đây là nơi phương pháp mảng
4 có thể hữu íchjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Bài đăng này mô tả cách sử dụng phương thức mảng
4 để lặp lại các mục của một mảng trong JavaScript. Ngoài ra, bạn sẽ đọc về các phương pháp hay nhất củajavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4 như cách xử lý đúngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
7 và cách lặp lại các đối tượng giống như mảngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
1. Cơ bản cho mỗi ví dụ
Phương thức
8 lặp lại các mục của mảng, theo thứ tự tăng dần mà không làm thay đổi mảngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Đối số đầu tiên của
4 là hàm gọi lại được gọi cho mọi mục trong mảng. Đối số thứ hai [tùy chọn] là giá trị củajavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
7 được đặt trong hàm gọi lạijavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
javascript
array.forEach[callback [, thisArgument]]
Hãy xem cách thức hoạt động của
4 trong thực tếjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Trong ví dụ sau, mảng
2 có 3 mục. Hãy sử dụngjavascript
array.forEach[callback[item [, index [, array]]]]
4 để đăng nhập vào bảng điều khiển mọi màujavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4 a chức năng gọi lại.javascript
array.forEach[callback[item [, index [, array]]]]
5 thực thi hàmjavascript
array.forEach[callback[item [, index [, array]]]]
4 cho mọi mục trongjavascript
array.forEach[callback[item [, index [, array]]]]
2, đặt mục lặp lại làm đối số đầu tiênjavascript
array.forEach[callback[item [, index [, array]]]]
Bằng cách này, 3 lần gọi hàm
8 được thực hiệnjavascript
array.forEach[callback[item [, index [, array]]]]
9javascript
array.forEach[callback[item [, index [, array]]]]
80javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
81javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Đó là cách, nói một cách ngắn gọn, phương pháp
4 hoạt độngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
2. Chỉ mục của phần tử lặp
83 thực thi hàmjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
84 với 3 đối số. mục lặp hiện tại, chỉ mục của mục lặp và chính cá thể mảngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
javascript
array.forEach[callback[item [, index [, array]]]]
Hãy truy cập chỉ mục của từng mục trong mảng màu
8javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Hàm
8 có quyền truy cập vào mục lặp hiện tại và chỉ mục. Cuộc gọi lại được thực hiện 3 lầnjavascript
array.forEach[callback[item [, index [, array]]]]
86javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
87javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
88javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
3. Truy cập mảng bên trong cuộc gọi lại
Để truy cập mảng trong quá trình lặp, bạn có thể sử dụng tham số thứ 3 bên trong hàm gọi lại
Hãy ghi lại thông báo
89 khi JavaScript thực thi lần lặp cuối cùng trên các mục mảngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
0javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Tham số thứ 3
00 bên trong hàm gọi lại là mảng mà phương thứcjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4 được gọi trên đójavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4. cái này bên trong cuộc gọi lại
Hãy chạy ví dụ sau trong trình duyệt và chú ý đến giá trị của
7javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
7 bên trongjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
8 bằng vớijavascript
array.forEach[callback[item [, index [, array]]]]
05, là đối tượng toàn cầu trong môi trường trình duyệt. Thực hiện theo lời gọi chức năng thông thường để có thêm thông tinjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Trong một số trường hợp, bạn có thể cần đặt
7 thành một đối tượng quan tâm. Sau đó chỉ ra đối tượng này là đối số thứ hai khi gọijavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
0javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Hãy triển khai một lớp
08, lớp này luôn chứa một danh sách các mục duy nhấtjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
2javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
09 được gọi với đối số thứ hai trỏ đếnjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
7, i. e. thể hiện của lớpjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
08javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Bên trong cuộc gọi lại của
4,javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
7 cũng trỏ đến một phiên bản củajavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
08. Bây giờ an toàn để truy cậpjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
45javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Lưu ý rằng đối với ví dụ trên, sử dụng hàm mũi tên làm hàm gọi lại của
4 sẽ tốt hơn. Hàm mũi tên bảo toàn giá trị củajavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
7 từ phạm vi từ vựng, vì vậy không cần sử dụng đối số thứ hai trênjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
5. forEach bỏ qua các vị trí trống
4 bỏ qua các vị trí trống của mảng [được đặt tên là mảng thưa thớt]javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
00 chứajavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
01, một vị trí trống vàjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
02.javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4 lặp lại trênjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
01 vàjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
02, nhưng bỏ qua vị trí trốngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
6. Lặp lại các đối tượng giống như mảng bằng forEach
4 có thể lặp qua các đối tượng dạng mảngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
2javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
07 là một đối tượng dạng mảng. Để lặp lại các mục của nó, bạn phải gọi gián tiếpjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4 bằng cách sử dụng phương thứcjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
09. Phương phápjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4 được lấy từjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
21javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Ngoài ra, bạn có thể chuyển đổi đối tượng dạng mảng thành một mảng bằng cách sử dụng
22, sau đó lặp lạijavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
0javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
7. Khi nào nên sử dụng forEach[]
4 được sử dụng tốt nhất để lặp lại các mục mảng mà không bị hỏng và đồng thời có một số tác dụng phụjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Các ví dụ về tác dụng phụ là sự đột biến của biến phạm vi bên ngoài, thao tác I/O [yêu cầu HTTP], thao tác DOM, v.v.
Ví dụ: hãy chọn tất cả các phần tử đầu vào từ DOM và sử dụng
4 để xóa chúngjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
1javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Tác dụng phụ trong chức năng gọi lại là xóa giá trị của trường đầu vào
Hãy nhớ rằng thông thường bạn không thể phá vỡ vòng lặp của
4 [ngoài một cách khéo léo để đưa ra lỗi để dừng vòng lặp, đây là một thủ thuật rẻ tiền]. Phương thức sẽ luôn lặp lại trên tất cả các mụcjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Nếu trường hợp của bạn yêu cầu nghỉ sớm khỏi chu kỳ, một lựa chọn tốt hơn là cổ điển cho hoặc cho. của
Khi phép lặp mảng tính toán kết quả, không có tác dụng phụ, một giải pháp thay thế tốt hơn là chọn một phương thức mảng như
- mảng. bản đồ[]
- mảng. giảm[]
- mảng. mọi[]
- mảng. một số[]
Ví dụ: hãy xác định xem tất cả các số của một mảng có phải là số chẵn không
Giải pháp đầu tiên liên quan đến phương pháp
4javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
2javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Mã xác định chính xác nếu tất cả các số chẵn. Vấn đề là không thể phá vỡ sau khi tìm thấy số lẻ đầu tiên
02javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Đối với tình huống này, một giải pháp thay thế tốt hơn là phương pháp
28javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
3javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
28 không chỉ làm cho mã ngắn hơn. Nó cũng tối ưu, bởi vì phương thứcjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
40 phá vỡ vòng lặp sau khi tìm thấy số lẻ đầu tiênjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
8. Phần kết luận
Phương pháp
83 là một cách hiệu quả để lặp lại trên tất cả các mục mảng. Đối số đầu tiên của nó là hàmjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
84, được gọi cho mọi mục trong mảng với 3 đối số. mục, chỉ mục và chính mảng đójavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
4 rất hữu ích để lặp lại tất cả các mục mảng mà không bị hỏng, đồng thời liên quan đến một số tác dụng phụ. Nếu không, hãy xem xét một phương thức mảng thay thếjavascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Bạn có biết các trường hợp sử dụng tốt của
4 không?javascript
const colors = ['blue', 'green', 'white'];
function iterate[item] {
console.log[item];
}
colors.forEach[iterate];
// logs "blue"
// logs "green"
// logs "white"
Thích bài viết?
Bài đăng chất lượng vào hộp thư đến của bạn
Tôi thường xuyên xuất bản bài viết có chứa
- Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
- Tổng quan về các tính năng JavaScript mới
- Cách sử dụng TypeScript và cách gõ
- Thiết kế phần mềm và thực hành mã hóa tốt
Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn
Đặt muaTham gia cùng 6719 người đăng ký khác
Giới thiệu về Dmitri Pavlutin
Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm [nhưng không giới hạn] uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉