Nhảy tới nội dung

Phân biệt 3 array method map(), filter(), forEach() trong javascript

· 2 phút để đọc
Ngô Gia Phong
Javascript developer

Giống nhau:

  • forEach()map()filter() đều làm việc , hay đều thực hiện callback lên từng phần tử trong mảng. Nghĩa là cả 3 method này đều sẽ DUYỆT qua các phần tử trong mảng.

Khác nhau:

map()forEarch()filter()
Có trả về giá trịKhông trả về giá trị nào cảCó trả về giá trị
Tạo ra mảng mới có cùng số phần tử với mảng cũ và trả về mảng mớiHàm callback có thể thay đổi trực tiếp mảng ban đầuTrả về các giá trị phần tử trong mảng cũ mà có thỏa mãn điều kiện
Sử dụng khi : cần tạo ra một mảng mới từ mảng gốc sau khi thực hiện biến đổi hoặc xử lý các phần tử.Sử dụng khi: muốn thực hiện một hành động nào đó cho từng phần tử mà không cần tạo ra một mảng mới.Sử dụng khi: Muốn lọc ra các phần tử của mảng theo điều kiện nào đó.

Ví dụ

Ví dụ về method map() của array:

Nhân tất cả các phần tử trong mảng lên 2 lần

const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map((x) => x * 2);
console.log(map1);
// Expected output: Array [2, 8, 18, 32]

Ví dụ về method forEach() của array:

In các phần tử trong Mảng

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

Ví dụ về method filter() của array:

Lọc ra các phần tử có là số chẵn

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter((n) => n %2 === 0);
console.log(result);
// Expected output: Array [2, 4, 6]