Các hàm: map, filter, reduce trong Javascript

Map, filter và reduce là các hàm được xử dụng phổ biến trong Js để xử lý các yêu cầu về mảng. Tuy nhiên, đối với các bạn mới thậm chí là với những người đã làm một thời gian rồi thì cũng chưa chắc đã hiểu rõ về ý nghĩa, mục đích sử dụng đúng đắn. Khi nào thì sử dụng map? Khi nào thì sử dụng filter?, ... của các hàm được nêu trong bài viết này. :smile:.

Giả sử cho một mảng sau:

let array = [
  {
    id: 1,
    name: "Nguyen Van A",
    age: 18,
    salary: 1000
  },
  {
    id: 2,
    name: "Nguyen Van B",
    age: 18,
    salary: 800
  },
  {
    id: 3,
    name: "Nguyen Van C",
    age: 20,
    salary: 900
  },
  {
    id: 4,
    name: "Nguyen Van D",
    age: 21,
    salary: 1200
  },
]

1. Hàm map:

Hàm map, hiểu theo đúng tên gọi của nó tức hàm này được dùng để ánh xạ các phần tử trong một mảng từ hình thức này sang một hình thức khác. Hiểu đơn giản hơn, chúng ta có thể xem hàm map này như một cổ máy, cổ máy này làm nhiệm vụ biến một tập X nào đó thành một tập Y tương ứng, có nghĩa là với mỗi một phần tử x trong tập X thì sẽ tương đương với phần tử y trong tập Y.

Từ đó có thể thấy hàm map sẽ không làm thay đổi số lượng phần tử trong mảng mà nó chỉ chuyển các phần tử này thành các phần tử khác tương ứng.
Ví dụ: Đối với mảng được cho ở trên, ta sử dụng map để render tất cả các phần tử trong này vào một table, như vậy có thể thấy sau khi được render vào ra thì số lượng các phần tử trong mảng này không hề bị thay đổi mà chúng được ánh xạ tương ứng với mỗi một hàng một trên table.
Code:

<TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="center">Name</TableCell>
            <TableCell align="center">Age</TableCell>
            <TableCell align="center">Salary</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {array.map((item) => (
            <TableRow key={item.id}>
              <TableCell align="center">{item.name}</TableCell>
              <TableCell align="center">{item.age}</TableCell>
              <TableCell align="center">{item.salary}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

Kết quả:
alt text

2. Hàm filter:

Khác với hàm map ở trên, hàm này được dùng khi chúng ta muốn lấy ra một tập các phần tử con trong mong một mảng lớn có điều kiện. Hàm filter này sẽ không ánh xạ các phần tử trong mảng thành một phần tử khác tương ứng mà nó sẽ làm thay đổi số lượng các phần tử đang có trong mảng trên bằng cách loại bỏ các phần tử nào không thoả với điều kiện được đưa ra.

Ví dụ: Từ mảng trên, chúng ta sẽ dùng hàm filter để lọc ra các nhân viên có độ tuổi bằng 18.
Code:

const demoFilter = array.filter((item) => {return item.age === 18})
Kết quả:
result:  [
  { id: 1, name: 'Nguyen Van A', age: 18, salary: 1000 },
  { id: 2, name: 'Nguyen Van B', age: 18, salary: 800 }
]

3. Hàm reduce:

Hàm cuối cùng trong bài viết hôm nay chính là reduce. Hàm này nhận vào 2 đối số là 1 hàm callBack và một giá trị khởi tạo (initValue).

Hàm callBack được truyền vào đây sẽ lại được truyền vào 2 đối số bắt buộc đó là total và currentItem, trong đó:

  • total: nó có giá trị bằng với giá trị khởi tạo (đối số thứ 2) được truyền vào hàm reduce.
  • currentItem: giá trị của phần tử hiện tại trong mảng. Giải thích rõ hơn về hàm này, chúng ta có thể hiểu như sau: xem total (initValue) là một con quái vật, thông qua hàm reduce các phần tử trong mảng sẽ được xử lý và cuối cùng sẽ được hấp thụ bởi con quái vật tên total. Kết quả trả về cuối cùng của hàm này chỉ là một giá trị đơn (giá trị của con quái vật total), cái mà đã được xử lý và được cái quái vật total này hấp thụ vào. Kiểu dữ liệu trả về của hàm này rất đa dạng, nó có thể trả về một giá trị là số hoặc mảng hoặc object phụ thuộc vào total có kiểu dữ liệu là gì.

Ví dụ: Với mảng đã cho, ta sẽ dùng hàm reduce này để tổng kết số tiền lương mà công ty phải trả trong một tháng cho tất cả các nhân viên là bao nhiêu.
Code:

const demoReduce = array.reduce((total, currentItem) => {
    return total += currentItem.salary;
}, 0);

Kết quả:

result: 3900USD

4. Tổng kết:

Nhìn chung, chúng ta có thể hiểu một cách đơn giản nhất về các hàm được nêu trong bài viết này một cách ngắn gọn như sau:

  • map: không làm thay đổi số lượng phần tử, làm thay đổi chất lượng của mỗi phần tử.
  • filter: không làm thay đổi chất lượng của mỗi phần tử, làm thay đổi số lượng phần tử.
  • reduce: là 1 con mèo, xem mỗi phần tử trong mảng là cá hồi, con mèo Reduce này sẽ ăn hết tất cả cá có trong mảng này và trả về một con mèo bụng bự duy nhất.

Đến đây cũng nhiều rồi :smile: , mình xin tạm dừng ở đây nhé, hi vọng sẽ nhận được góp ý từ các bạn.
Cám ơn mọi người đã đọc bài viết :heart:
Cơ Khánh - Alpha Wolf

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Co Khanh - Alpha Wolf

1 bài viết.
10 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
69 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 6 năm trước
69 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
10 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!