Tại sao bạn nên sử dụng thành thạo bộ ba map, filter và reduce trong Javascript?

Tại sao bạn nên sử dụng thành thạo bộ ba map, filter và reduce trong Javascript?

Tin ngắn hàng ngày dành cho bạn
  • Từ lâu rồi suy nghĩ làm thế nào để tăng sự hiện diện thương hiệu, cũng như người dùng cho blog. Nghĩ đi nghĩ lại thì chỉ có cách chia sẻ lên mạng xã hội hoặc trông chờ họ tìm kiếm, cho đến khi...

    In cái áo này được cái tắc đường khỏi phải lăn tăn, càng đông càng vui vì hàng trăm con mắt nhìn thấy cơ mà 🤓

    (Có tác dụng thật nha 🤭)

    » Xem thêm
  • Một vòng của sự phát triển nhiều dự án khá là thú vị. Tóm tắt lại trong 3 bước: Thấy một cái gì đó phức tạp -> Làm cho nó đơn giản đi -> Thêm thắt tính năng cho đến khi nó phức tạp... -> Quay trở lại vòng lặp mới.

    Tại sao lại như vậy? Để mình lấy 2 ví dụ cho các bạn thấy.

    Markdown ra đời với mục tiêu tạo ra một định dạng văn bản thô "dễ viết, dễ đọc, dễ dàng chuyển thành một dạng gì đó như HTML". Vì thời đó chẳng ai đủ kiên nhẫn mà vừa ngồi viết vừa thêm định dạng cho văn bản hiển thị ở trên web như thế nào. Ấy vậy mà giờ đây người ta đang "nhồi nhét" hoặc tạo ra các biến thể dựa trên markdown để bổ sung thêm nhiều định dạng mới đến mức... chẳng nhớ nổi hết cú pháp.

    React cũng là một ví dụ. Từ thời PHP, việc khát khao tạo ra một cái gì đó tách biệt hẳn giao diện người dùng và phần xử lý logic chính của ứng dụng thành 2 phần riêng biệt cho dễ đọc, dễ viết. Kết quả là các thư viện UI/UX phát triển rất mạnh mẽ, mang lại khả năng tương tác với người dùng rất tốt, còn phần logic ứng dụng thì nằm ở một máy chủ riêng biệt. Bộ đôi Front-end, Back-end cũng từ đấy mà thịnh hành, không thể thiếu anh bồi bàn REST API. Ấy vậy mà giờ đây React trông cũng không khác biệt gì so với PHP là mấy, kéo theo là cả Vue, Svelte... lại cùng quy tất cả về một mối.

    Cơ mà không phải vòng lặp là xấu, ngược lại vòng lặp này mang tính tiến hoá nhiều hơn là "cải lùi". Nhiều khi lại tạo ra được cái hay hơi cái cũ thế là người ta lại dựa trên cái hay đó để tiếp tục lặp. Nói cách khác là chắc lọc tinh hoa từng tí một tí một á 😁

    » Xem thêm
  • Song song với các dự án chính thức thì thi thoảng mình vẫn thấy các dự án "bên lề" nhằm tối ưu hoặc cải tiến ngôn ngữ theo khía cạnh nào đó. Ví dụ nature-lang/nature là một dự án hướng tới cải tiến Go, mang lại một số thay đổi nhằm giúp cho việc sử dụng Go trở nên thân thiện hơn.

    Nhìn lại mới thấy hao hao JavaScript 😆

    » Xem thêm

Vấn đề

Dữ liệu được lưu trữ trong cơ sở dữ liệu thường phải được chuẩn hóa để giảm dung lượng và tăng tốc độ truy vấn, Vì thế sau khi lấy ra thường phải qua nhiều phép biến đổi dữ liệu thì mới có thể dùng để xử lý logic tiếp được.

Lập trình FE, đặc biệt là lập trình dựa trên những Framework hiện đại như Angular, React, Vue... việc tạo ra những đối tượng để lưu trạng thái (state) của ứng dụng đòi hỏi khả năng xử lý dữ liệu nhiều hơn nữa. Bởi vì những trạng thái này là thay đổi liên tục phụ thuộc vào logic hiển thị và thao tác người dùng.

Những dữ liệu trên thông thường được lưu trữ trong Object hay Array, chính vì thế kể từ ES5 tung ra bộ ba map, filterreduce để giúp chúng ta xử lý dữ liệu mảng một cách hữu ích hơn rất nhiều.

map, filter và reduce

Hàm map duyệt qua mảng, và trả về một mảng có số lượng phần tử bằng đúng với số lượng phần tử mảng ban đầu. Các phần tử được trả về thông qua return.

Ví dụ:

const arr = [1, 2, 3];
const arr2 = arr.map(function (item) {
  return item + 1;
});
// [2, 3, 4]

Hàm filter cũng duyệt qua mảng, trả về một mảng mới với các phần tử thỏa mãn một điều kiện true/false.

Ví dụ:

const arr = [1, 2, 3];
const arr2 = arr.map(function (item) {
  return item > 1;
});
// [2, 3]

Reduce duyệt qua mảng, thực hiện tính toán trong hàm callback.

Ví dụ:

const arr = [1, 2, 3];
const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

reduce là hàm nâng cao nên độ khó cao hơn khi bắt đầu. Tuy nhiên bạn có thể nhanh chóng sử dụng thành thạo chúng thông qua một vài ví dụ tại Reduce Syntax.

Cú pháp đầy đủ của reduce là:

reduce((accumulator, currentValue, currentIndex, array) => {
    /* … */
}, initialValue)

Với accumulator là giá trị tích lũy, giá trị tích lũy ban đầu sẽ bằng initialValue, currentValue là phần tử trong mảng ở lần lặp hiện tại, tương tự currentIndex là vị trí phần tử và array là mảng ban đầu. initialValue là giá trị khởi tạo.

Đầu ra của mapfilter luôn luôn là một mảng, chính vì thế nếu thấy chúng xuất hiện thì chắc chắn đầu ra phải là một thứ "có thể lặp". Điều này rất quan trọng, vì nó giúp tạo nên tính cam kết và khả năng liền mạch trong khi kết hợp nhiều hàm với nhau khi xử lý.

const arr = [];
arr.map().filter().map()...

Bạn có thể dùng ngay filter ngay sau map mà không lo lắng rằng kết quả của map trả về null, undefined... bất kì thứ gì đó mà "không thể lặp" qua.

Một vài trường hợp sử dụng

Có rất nhiều trường hợp bạn cần dùng đến bộ 3 này, khi nào cần biến thêm/thắt hay thay đổi thuộc tính trong mảng thì dùng map, khi nào cần lọc dữ liệu trong mảng thì dùng filter còn khi nào muốn trả về một kết quả cần tổng hợp từ mảng thì dùng reduce.

Tóm lại là khi làm việc với dữ liệu là mảng thì hãy nghĩ đến bộ ba này đầu tiên, dần dần bạn sẽ biết cách dùng thành thạo. Điều này giúp bạn viết ra đoạn mã ngắn gọn hơn.

Một số trường hợp tiêu biểu mình sử dụng là trong xử lý dữ liệu nhận từ API.

Dữ liệu nhận từ API về là dữ liệu "thô", gọi như thế bởi vì cần qua một vài bước xử lý nữa thì mới thành dữ liệu "chuẩn" để hiển thị lên trang web được, lúc đó chúng ta có thể sử dụng map, filter hoặc reduce để thêm, bớt, sửa đổi hay lọc dữ liệu trong mảng.

Thứ hai là dữ liệu được lấy ra trong cơ sở dữ liệu (database). Đây là dữ liệu được tối ưu hóa để lưu trữ vì thế trong lúc xử lý những logic bạn vẫn cần phải thêm thắt nhiều nữa mới ra dữ liệu chuẩn. Một ví dụ tiêu biểu cho trường hợp này là định dạng lại dữ liệu trả về cho client thông qua API.

Thứ ba là dữ liệu tạo ra để phục vụ cho mục đích xử lý logic. Loại dữ liệu này được tạo ra trong quá trình xử lý logic của bài toán nào đó. Trong quá trình tính toán thì việc biến đổi dữ liệu có thể xảy ra thường xuyên. Việc vận dụng map, filterreduce thành thạo có thể giúp bạn xử lý vấn đề với số lượng mã ít hơn.

Ngoài ra, có rất nhiều hàm mà Javascript cung cấp khi thao tác với mảng như find, findIndex, indexOf... Những hàm này hoàn toàn có thể thay thế bởi bộ ba map, filterreduce. Tuy nhiên nếu có thể hãy sử dụng chúng để tăng tính minh bạch cho mã.

Tổng kết

Bộ ba map, filterreduce là trợ thủ đắc lực khi làm việc với dữ liệu mảng. Biết cách vận dụng chúng phù hợp giúp bạn giảm được thời gian viết mã đồng thời giúp mã ngắn gọn hơn.

Cao cấp
Hello

5 bài học sâu sắc

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (0)

Nội dung bình luận...