Sử dụng map(), filter(), và reduce() trong JavaScript

Bài đăng này đã không được cập nhật trong 4 năm

Giới thiệu

Khi làm việc với các array trong javascript, hẳn các bạn đã từng làm việc với 1 trong các method map, filter hay reduce.

Và khi tìm hiểu về các method này thì có chút phức tạp, mỗi hàm có mỗi chức năng khác nhau. Nên ở bài viết này mình sẽ chỉ ra công dụng và cách sử dụng các hàm này trong những ngữ cảnh nhất định.

Khi làm việc với array, thì khi chạy vòng lặp để thao tác với các phần tử trong mảng, 95% trường hợp chúng ta sẽ thao tác dữ liệu tương tự như cách 3 hàm này làm việc, nó sẽ: map mỗi phần tử trong mảng thành 1 giá trị khác, filter mảng thành các mảng nhỏ hơn, hoặc reduce mảng thành 1 giá trị duy nhất. Cùng tìm hiểu nhé.

Giải thích các hàm

Map()

.map() method được dùng khi bạn muốn thao tác trên 1 mảng và muốn trả về 1 mảng các giá trị thay đổi dựa trên giá trị của mảng đầu vào.

Hãy xem ví dụ về tính toán trả về diện tích của các hình vuông dựa trên độ dài của cạnh

const lengthArr = [1, 4, 3, 6];
let areaArr = [];
for(let i=0; i < lengthArr.length; i++) {
   areaArr.push(lengthArr[i] * lengthArr[i]);
}
console.log(areaArr);//[1, 16, 9, 36]

Chúng ta có thể nhanh chóng lấy được mảng diện tích trả về với code dễ hiểu hơn như sau:

const lengthArr = [1, 4, 3, 6];
let areaArr = lengthArr.map(length => length * length);
console.log(areaArr);//[1, 16, 9, 36]

map() nhận input vào là 1 callback function để transform mỗi phần tử trong mảng thành 1 giá trị mới.

Filter()

Với .filter(), hàm này được dùng để tạo ra 1 tập con của tập truyền vào, chỉ những phần tử thỏa mãn điều kiện mới được đưa vào tập con.

Hãy xem ví dụ dưới dây, chúng ta sẽ filter các phần tử số lẽ (chia cho 2 dư 1) từ mảng truyền vào.

const numbers = [1,2,3,4,5,6,7,8];
let odds = [];
for(let i=0; i < numbers.length; i++) {
   if(numbers[i] % 2 == 1) {
      odds.push(numbers[i]);
   }
}
console.log(odds);//[1,3,5,7]

Tương tư như .map, .filter nhận vào 1 callback function để lọc các phần tử từ mảng ban đầu, phần tử nào thỏa điều kiện sẽ được đưa vào mảng kết quả.

const numbers = [1,2,3,4,5,6,7,8];
let odds = numbers.filter(num => num % 2);
console.log(odds);//[1,3,5,7]

Reduce()

Cuối cùng là hàm .reduce(), là hàm gây nhiều khó khăn nhất nếu không hiểu rõ cách dùng. Tên của hàm chỉ ra là chúng ta giảm số lượng các phần tử trong mảng thành 1 giá trị duy nhất. Nếu hàm này có tên là build up thì chắc có lẽ đỡ gây hiểu lầm hơn là reduce.

Hàm này chấp nhận 1 giá trị khởi điểm của output, sau đó thì sẽ lặp từng phần tử theo 1 công thức (tương tự như .map()), rồi cộng dồn giá trị vào output. Đây là 1 trường hợp chúng ta cộng dồn để tính toán số tiền quyên góp được cho quỹ từ thiện như sau:

const donations = [20, 100, 80];
let total = 50;
for(let i=0; i < donations.length; i++) {
   total += donations[i];
}
console.log(total);//250

Không giống .map() và .filter(), hàm .reduce() yêu cầu tham số truyền vào là 1 hàm callback (có 2 tham số: giá trị tích lũy được (accumulator) và giá trị của phần tử hiện tại (current value)), tham số thứ 2 là giá trị khởi điểm của output (có hoặc không, nếu không thì mặc định giá trị là 0).

const donations = [20, 100, 80];
let total = donations.reduce((total,donation) => {
   return total + donation;
}, 50);
console.log(total);//250

Kết luận

Vậy là chúng ta đã tìm hiểu qua 3 function thường được dùng để thao tác với mảng trong Javascript, chúng không những làm cho code của chúng ta ngắn hơn mà còn giúp code được dễ đọc và dễ hiểu hơn. Cảm ơn các bạn đã đọc bài.