Vòng lặp forEach trong JavaScript

Vòng lặp forEach trong JavaScript
Vòng lặp forEach trong JavaScript

Chức năng của Vòng lặp forEach trong JavaScript

Vòng lặp forEach trong JavaScript dùng để duyệt qua các phần tử trong mảng và thực hiện hàm gọi về giá trị và khóa (key) của mổi phần tử đó.

Cú pháp của Vòng lặp forEach trong JavaScript

mang.forEach(function(value) {
// Mã để thực thi cho mỗi phần tử
});

value: giá trị của phần tử trong mảng.

mang: Mảng

mang.forEach(function(value,key) {
// Mã để thực thi cho mỗi phần tử
});

value: giá trị của phần tử trong mảng.

key: Khóa (key) của phần tử trong mảng.

mang: Mảng

Code Vòng lặp forEach trong JavaScript

mang.forEach(function(value) {
document.write(value+"<br>"); 
});
mang.forEach(function(value,key) {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
<script>
// forEach giá trị của mảng
document.write("<b>forEach giá trị của mảng</b><br>"); 
var mang = ["Vân","Lực","Quỳnh","Dung"];

mang.forEach(function(value) {
document.write(value+"<br>"); 
});

// forEach giá trị, khóa(key) của mảng
document.write("<b>forEach giá trị, khóa(key) của mảng</b><br>"); 
var mang = ["Vân","Lực","Quỳnh","Dung"];

mang.forEach(function(value,key) {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
</script>

Kết quả:

forEach giá trị của mảng
Vân
Lực
Quỳnh
Dung
forEach giá trị, khóa(key) của mảng
Vị trí 0: Vân
Vị trí 1: Lực
Vị trí 2: Quỳnh
Vị trí 3: Dung

Chạy Thử

Khi Nào Nên Sử Dụng forEach() Trong JavaScript?

forEach() phù hợp khi cần thực hiện cùng một thao tác lần lượt trên từng phần tử của một mảng. Cách viết này khá trực quan, đặc biệt với các tác vụ như hiển thị dữ liệu, kiểm tra giá trị hoặc xử lý từng phần tử mà không cần tạo một mảng mới.

forEach() Phù Hợp Với Những Trường Hợp Nào?

Nên dùng forEach() khi mục tiêu chính là thực hiện một hành động trên từng phần tử và không cần lấy kết quả trả về từ toàn bộ quá trình. Chẳng hạn, có thể dùng để in dữ liệu, cập nhật giao diện hoặc gọi một hàm xử lý cho từng giá trị trong mảng.

Phương thức này cũng thuận tiện khi cần sử dụng đồng thời giá trịvị trí của phần tử. Khi đó, hàm callback có thể nhận thêm tham số index để xác định phần tử đang được xử lý.

const sanPham = ["Laptop", "Điện thoại", "Máy tính bảng"];

sanPham.forEach(function(item, index) {
    console.log(index + ": " + item);
});

Trong các đoạn xử lý ngắn, có thể kết hợp forEach() với arrow function để mã JavaScript gọn hơn và dễ quan sát luồng xử lý.

Những Hạn Chế Cần Biết Khi Dùng forEach()

forEach() không phải lựa chọn phù hợp cho mọi tình huống. Nếu cần dừng quá trình duyệt giữa chừng bằng break hoặc bỏ qua một vòng bằng continue, nên cân nhắc vòng lặp for thay vì cố xử lý bên trong callback.

Ngoài ra, forEach() không tạo ra mảng kết quả mới. Nếu mục đích là biến đổi từng phần tử để nhận một mảng khác, map() thường phù hợp hơn. Tương tự, khi cần tìm kiếm, lọc hoặc kiểm tra điều kiện trên mảng, các phương thức như find(), filter() hoặc some() có thể diễn đạt đúng mục đích hơn.

Vì vậy, nên chọn forEach() khi công việc cần làm là xử lý từng phần tử, thay vì sử dụng nó cho mọi thao tác với mảng.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Vòng lặp forEach trong JavaScript.

  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Đánh giá
Chia sẻ nội dung đánh giá của bạn về Vòng lặp forEach trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Yêu Cầu Báo Giá
Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !