Làm cách nào để sử dụng foreach trong HTML?

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 có thể hữu ích

Bài đăng này mô tả cách sử dụng phương thức mảng

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 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ủa

javascript

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ý đúng

javascript

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ảng

1. Cơ bản cho mỗi ví dụ

Phương thức

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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ảng

Đối số đầu tiên của

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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ủa

javascript

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ại

javascript

array.forEach[callback [, thisArgument]]

Hãy xem cách thức hoạt động của

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 trong thực tế

Trong ví dụ sau, mảng

javascript

array.forEach[callback[item [, index [, array]]]]

2 có 3 mục. Hãy sử dụng

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 để đăng nhập vào bảng điều khiển mọi màu

javascript

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]]]]

4 a chức năng gọi lại.

javascript

array.forEach[callback[item [, index [, array]]]]

5 thực thi hàm

javascript

array.forEach[callback[item [, index [, array]]]]

4 cho mọi mục trong

javascript

array.forEach[callback[item [, index [, array]]]]

2, đặt mục lặp lại làm đối số đầu tiên

Bằng cách này, 3 lần gọi hàm

javascript

array.forEach[callback[item [, index [, array]]]]

8 được thực hiện

  • javascript

    array.forEach[callback[item [, index [, array]]]]

    9
  • javascript

    const colors = ['blue', 'green', 'white'];

    function iterate[item] {

    console.log[item];

    }

    colors.forEach[iterate];

    // logs "blue"

    // logs "green"

    // logs "white"

    80
  • javascript

    const colors = ['blue', 'green', 'white'];

    function iterate[item] {

    console.log[item];

    }

    colors.forEach[iterate];

    // logs "blue"

    // logs "green"

    // logs "white"

    81

Đó là cách, nói một cách ngắn gọn, phương pháp

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 hoạt động

2. Chỉ mục của phần tử lặp

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

83 thực thi hàm

javascript

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ảng

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

8

Hàm

javascript

array.forEach[callback[item [, index [, array]]]]

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ần

  • javascript

    const colors = ['blue', 'green', 'white'];

    function iterate[item] {

    console.log[item];

    }

    colors.forEach[iterate];

    // logs "blue"

    // logs "green"

    // logs "white"

    86
  • javascript

    const colors = ['blue', 'green', 'white'];

    function iterate[item] {

    console.log[item];

    }

    colors.forEach[iterate];

    // logs "blue"

    // logs "green"

    // logs "white"

    87
  • javascript

    const colors = ['blue', 'green', 'white'];

    function iterate[item] {

    console.log[item];

    }

    colors.forEach[iterate];

    // logs "blue"

    // logs "green"

    // logs "white"

    88

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

89 khi JavaScript thực thi lần lặp cuối cùng trên các mục mảng

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

0

Tham số thứ 3

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

00 bên trong hàm gọi lại là mảng mà phương thức

javascript

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 đó

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

7

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

7 bên trong

javascript

array.forEach[callback[item [, index [, array]]]]

8 bằng với

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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 tin

Trong một số trường hợp, bạn có thể cần đặt

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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ọi

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

0

Hãy triển khai một lớp

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

08, lớp này luôn chứa một danh sách các mục duy nhất

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

2

javascript

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ỏ đến

javascript

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ớp

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

08

Bên trong cuộc gọi lại của

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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ủa

javascript

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ập

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

45

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 sẽ tốt hơn. Hàm mũi tên bảo toàn giá trị của

javascript

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ên

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4

5. forEach bỏ qua các vị trí trống

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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"

4

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

00 chứa

javascript

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ên

javascript

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ống

6. Lặp lại các đối tượng giống như mảng bằng forEach

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 có thể lặp qua các đối tượng dạng mảng

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

2

javascript

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ếp

javascript

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ức

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

09. Phương pháp

javascript

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"

21

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

22, sau đó lặp lại

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

0

7. Khi nào nên sử dụng forEach[]

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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ụ

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 để xóa chúng

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

1

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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ục

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

2

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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

02

Đố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

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

28

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

3

javascript

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ức

javascript

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ên

8. Phần kết luận

Phương pháp

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

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àm

javascript

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ế

Bạn có biết các trường hợp sử dụng tốt của

javascript

const colors = ['blue', 'green', 'white'];

function iterate[item] {

console.log[item];

}

colors.forEach[iterate];

// logs "blue"

// logs "green"

// logs "white"

4 không?

Thích bài viết?

đề xuất cải tiến

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 mua

Tham 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 😉

Làm cách nào để tạo vòng lặp trong HTML?

HTML không phải là ngôn ngữ lập trình và không có khả năng viết vòng lặp. Để làm điều đó bạn sẽ cần một số ngôn ngữ khác để tạo HTML, e. g. JavaScript .

Làm cách nào để sử dụng vòng lặp PHP trong HTML?

PHP cho Vòng lặp .
bộ đếm khởi tạo. Khởi tạo giá trị bộ đếm vòng lặp
quầy kiểm tra. Được đánh giá cho mỗi lần lặp lại vòng lặp. Nếu nó đánh giá là TRUE, vòng lặp tiếp tục. Nếu nó đánh giá là FALSE, vòng lặp kết thúc
bộ đếm tăng. Tăng giá trị bộ đếm vòng lặp

Tôi có thể sử dụng forEach JavaScript không?

. forEach[] is great you need to execute a function for each individual element in an array. Good practice is that bạn nên sử dụng. forEach[] khi bạn không thể sử dụng các phương thức mảng khác để hoàn thành mục tiêu của mình .

Tôi có thể chạy forEach trên một chuỗi trong JavaScript không?

Không, không thể . forEach[] chuyển chỉ mục và mảng làm đối số thứ hai và thứ ba.

Chủ Đề