Series lập trình với dữ liệu Array và Object trong Javascript - Xử lý dữ liệu đơn thuần

Series lập trình với dữ liệu Array và Object trong Javascript - Xử lý dữ liệu đơn thuần

Bài viết trong chủ đề này:
  1. Series lập trình với dữ liệu Array và Object trong Javascript - Xử lý dữ liệu đơn thuần
  2. Series lập trình với dữ liệu Array và Object trong Javascript - Xử lý dữ liệu như thế nào cho tốt?
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 đề

Trong bất kì ngôn ngữ nào, Back-end hay Front-end thì tần suất của việc xử lý dữ liệu là rất lớn. Đó có thể là những công việc liên quan đến tiền xử lý trước khi hiển thị trên giao diện cho người dùng, hay là làm mịn dữ liệu rồi trả về cho client thông qua API chẳng hạn.

Array và Object là hai đối tượng mà chúng ta cần phải xử lý nhiều nhất, trong series này tôi sẽ trình bày cho bạn đọc một vài kinh nghiệm xử lý dữ liệu đối với hai đối tượng này.

Bộ ba quyền lực map, filter và reduce

Phải nói rằng 3 hàm map, filter và reduce giúp ích rất nhiều. Nếu như các bạn nếu còn đang mơ hồ về chúng thì nên dành thời gian để tìm hiểu, còn tôi sẽ tóm tắt lại một chút về công dụng của 3 hàm này.

map function

map function hoạt động đối với kiểu dữ liệu là Array, nó nhận tham số đầu vào là một hàm và trả ra kết quả là một mảng với độ dài các phần tử luôn bằng dữ liệu gốc. Về cơ bản, chúng ta sử dụng map khi có mong muốn lặp qua các phần tử trong mảng để thêm/sửa/xoá... dữ liệu của chúng.

Callback của map có các tham số element, index, array tương ứng với phần từ hiện tại, vị trí và dữ liệu của mảng.

map(function callbackFn(element, index, array) { ... }, thisArg)

map là một triển khai của Functor, nếu chưa biết về functor bạn có thể đọc bài viết của tôi tại Functor là gì? Tôi có cần biết đến functor?.

Ví dụ một mảng users có những thông tin cơ bản như sau:

const users = [
  {
    id: 1,
    name: "Nguyễn Văn A",
    age: 18,
    status: "active",
    city_code: "HN"
  },
  {
    id: 2,
    name: "Trần Thị B",
    age: 20,
    status: "active",
    city_code: "HCM"
  },
  {
    id: 3,
    name: "Phạm Thị Xuân C",
    age: 26,
    status: "block",
    city_code: "HN"
  },
];

Tăng tuổi của mỗi người thêm 1:

const usersIncAge  = users.map(item => {
  ...item,
  age: item.age + 1;
});

Ghi chú: Trường hợp này tôi đang cố ý tạo ra một object mới và trả về để tránh reference, sau khi chạy xong thì có một mảng usersIncAge hoàn toàn không tham chiếu đến users.

Tôi thấy có người thường viết viết:

users.map(item => item.age += 1);

Ngắn gọn hơn rất nhiều nhưng như thế vô tình đã làm thay đổi dữ liệu của users, có thể gây ra sai lệch dữ liệu nếu không quản lý được việc sử dụng users ở nơi khác. Vì vậy nếu có thể thì nên hạn chế cách viết này, thay vào đó hãy tạo ra một mảng mới. Nếu quan tâm đến vấn đề này, bạn đọc thêm bài viết Pure Function trong Javascript. Tại sao chúng ta nên biết càng sớm càng tốt?.

filter function

filter được sử dụng để lọc ra các phần tử thoả mãn điều kiện ở trong mảng. Đầu ra của filter luôn là một mảng có độ dài bé hơn hoặc bằng dữ liệu gốc.

Hàm callback của filter cũng giống như map, nó chứa các tham số element, index, array.

Ví dụ tôi muốn lọc ra danh sách users có age >= 20:

users.filter(item => item.age >= 20);

Filter sẽ dựa vào kết quả của hàm callback trả về là true hoặc false để lọc dữ liệu, nếu true là lấy còn false thì không.

Vì filter chỉ có thể lọc ra được phần tử từ array gốc thế nên dữ liệu mới được tạo ra từ filter sẽ có reference đến dữ liệu gốc thế nên cần thận trọng.

reduce function

Không giống với map và filter, đầu ra của reduce không được đảm bảo. Nó có thể là bất kì kiểu dữ liệu gì tuỳ thuộc vào mục đích.

Reduce sẽ duyệt qua từng phần tử trong mảng, thực hiện một hàm tính toán rồi trả ra dữ liệu duy nhất.

Hàm callback của reduce có 4 giá trị accumulator, currentValue, index, array lần lượt là tham số nhận vào ban đầu, phần tử hiện tại, vị trí phần tử hiện tại và mảng ban đầu.

reduce(function callbackFn(accumulator, currentValue, index, array) { ... }, initialValue)

Lý thuyết thì là dài dòng nhưng tôi sẽ lấy một ví dụ đơn giản trước tiên, dưới đây là ví dụ sử dụng reduce để tính tổng các số có trong mảng:

const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10

0 là giá trị đầu vào ban đầu tương ứng với accumulator, sau đó cứ sau mỗi lần lặp nó thực hiện phép tính accumulator + currentValue, kết quả thì gán ngược lại cho accumulator. Nên accumulator là giá trị tích luỹ sau mỗi lần lặp và nó cũng là kết quả cuối cùng reduce sẽ trả ra.

Một ví dụ phức tạp hơn, tôi không dùng filter để lọc ra danh sách users có age >= 20, thay vào đó là sẽ dùng reduce:

const usersFilter = users.filter((accumulator, currentValue) => {
  if (currentValue.age >= 20) {
    return [...accumulator, { ...currentValue }];
  } else return accumulator;
}, []);

// hoặc ngắn gọn hơn nữa
const usersFilter = users.filter((accumulator, currentValue) => currentValue.age >= 20 ? [...accumulator, { ...currentValue }] : accumulator, []);

Với cách này tôi có thể tránh được reference như khi sử dụng filter mặc dù nó hơi dài dòng.

Hai cấp độ khi dùng hàm callback

Ở trong các ví dụ tôi đều viết hàm callback trực tiếp vào các function, điều đó giúp tôi viết code nhanh hơn nhưng đổi lại bạn sẽ có những đoạn mã dài dòng mà đôi khi còn gây khó khăn cho người đọc code.

Tôi tạm gọi cách cách viết như trên là cấp độ 1. Vậy ở cấp độ 2 bạn sẽ viết như thế nào?

Đó là cách viết bằng hàm curry, nếu bạn chưa biết về curry thì có thể tham khảo bài viết vể Curry function là gì? Một món "cà ri" ngon và làm sao để thưởng thức nó?.

Ví dụ tôi giải quyết yêu cầu ban đầu là tăng age của mỗi user lên 1:

const incAge = item => ({...item, age: item.age + 1});
const usersIncAge = users.map(incAge);

Tôi tạo một hàm incAge có nhiệm vụ là nhận một object, tăng giá trị thuộc tính age lên 1 rồi trả về một object hoàn toàn mới. Sau đó map nhận nó như một callback để xử lý dữ liệu. Nhìn vào dòng 2 bạn có thể thấy đoạn code tập trung vào nó đang làm gì hơn là nó đang làm như thế này...

Cho đến bây giờ thì các yêu cầu chỉnh sửa dữ liệu hay lọc dữ liệu đơn giản mà tôi đưa ra đều được giải quyết mặc dù hơi tốn thời gian viết code một chút. Vậy thì hãy đến với một yêu cầu phức tạp hơn: Tôi muốn nhóm các users theo city_code và sắp xếp các user theo thứ tự giảm dần của age?

Tôi sẽ không triển khai code ở yêu cầu này vì có thể code sẽ khá dài, thay vào đó tôi đưa ra cách làm như sau: Đầu tiên lấy tất cả các giá trị city_code ra rồi lọc trùng dữ liệu (unique), lặp qua từng giá trị city_code để tìm những user thoả mãn. Cuối cùng lặp qua từng nhóm để sắp xếp thứ tự user trong mỗi nhóm.

Đó là cách của tôi nghĩ ra được, nếu bạn còn cách nào khác thì hãy comment cho mọi người cùng biết nhé.

Vậy thì có cách nào ngắn gọn để giải quyết vấn đề trên mà không cần nhiều code không? Câu trả lời là có! Hãy dùng lodash.

Sử dụng lodash để tăng tốc lập trình

Cho những ai chưa biết thì lodash là một thư viện xử lý dữ liệu rất là nổi tiếng, với hơn 50k star trên github thì các bạn cũng đủ biết độ phổ biến của thư viện này như thế nào rồi.

Về lodash thì nó là tập hợp những hàm tiện ích trong việc xử lý dữ liệu là Array hay Object, thậm chí là cả kiểu dữ liệu String, Number.... Nó có rất là nhiều hàm, bạn có thể xem trên trang Document.

Trong lodash có hàm groupBy để phân nhóm và hàm sortBy để sắp xếp dữ liệu, áp dụng nó vào giải quyết yêu cầu nhóm theo city_code trên của tôi:

const _ = require("lodash");
const usersGroupByCity = _.groupBy(users, "city_code");

Kết quả sẽ trông như là:

{
  HN: [
    {
      id: 1,
      name: 'Nguyễn Văn A',
      age: 18,
      status: 'active',
      city_code: 'HN'
    },
    {
      id: 3,
      name: 'Phạm Thị Xuân C',
      age: 26,
      status: 'block',
      city_code: 'HN'
    }
  ],
  HCM: [
    {
      id: 2,
      name: 'Trần Thị B',
      age: 20,
      status: 'active',
      city_code: 'HCM'
    }
  ]
}

Đừng quên chúng ta vẫn còn một yêu cầu nữa là sắp xếp lại dữ liệu trong mỗi nhóm theo age giảm dần.

Trong lodash có một hàm là orderBy có thể giúp tôi sắp xếp dữ liệu theo thứ tự tăng hoặc giảm:

const _ = require("lodash");
const usersGroupByCity = _.groupBy(users, "city_code");
const orderByAge = _.mapValues(usersGroupByCity, o => {
  return _.orderBy(o, "age", "desc");
});

mapValues là hàm cho phép sửa đổi giá trị của từng thuộc tính có trong object. Ở đây tôi dùng mapValues để sắp xếp dữ liệu trong mỗi nhóm.

Lodash còn hỗ trợ cách viết hàm chain, nghĩa là một chuỗi các hàm nối tiếp nhau. Đầu ra của hàm này sẽ là đầu vào của hàm kia. Có thể nói nó như các hàm compose/pipe mà tôi đã có bài viết ở Triển khai mã hiệu quả hơn với compose & pipe function trong Javascript.

const _ = require("lodash");
const orderByAgeDesc = o => _.orderBy(o, "age", "desc");

const result = _(users).groupBy("city_code").mapValues(orderByAgeDesc).value();

Hai cách đều giải quyết được vấn đề, tuy nhiên cách 1 thì tập trung vào làm như thế nào còn cách 2 thì đang làm gì hơn.

Tổng kết

Xử lý dữ liệu là công việc không thể thiếu trong lập trình, nó bao gồm những công việc liên quan đến thêm/sửa/xoá các kiểu dữ liệu để phục vụ cho một mục đích nào đó.

Đối với kiểu dữ liệu là Array, Javascript có bộ ba map, filter, reduce là trợ thủ đắc lực trong việc xử lý.

Tuy nhiên, còn rất nhiều những hàm tiện ích để xử lý dữ liệu khác mà có thể kể đến như lodash. Tích hợp lodash sẽ giúp giảm thời gian viết lại mã đồng thời cũng tăng thời gian đọc hiểu code.

Cao cấp
Hello

Tôi & khao khát "chơi chữ"

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên 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...