| 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. Show map functionMột 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 6 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 function có các tham số 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 7, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 8, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 9 tương ứng với phần từ hiện tại, vị trí và dữ liệu của mảng. 1 map(function callbackFn(element, index, array) { ... }, thisArg) Map function 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: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 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: 1 2 3 4 const usersIncAge = users.map(item => { ...item, age: item.age + 1; }); Note: 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ì tôi có một mảng users2 hoàn toàn không reference đến users. Tôi thấy có một số người yêu thích cách viết: 1 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. filter functionconst 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"
},
];
0 đượ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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 7, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 8, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 9. Ví dụ tôi muốn lọc ra danh sách users có age >= 20: 1 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. reduce functionKhô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. 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" }, ]; 4, 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" }, ]; 5, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 8, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 9 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. 1 map(function callbackFn(element, index, array) { ... }, thisArg) 1 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: map(function callbackFn(element, index, array) { ... }, thisArg) 2 map(function callbackFn(element, index, array) { ... }, thisArg) 3 0 là giá trị đầu vào ban đầu tương ứng với 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" }, ]; 4, sau đó cứ sau mỗi lần lặp nó thực hiện phép tính 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" }, ]; 4 + 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" }, ]; 5, kết quả thì gán ngược lại cho 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" }, ]; 4. Nên 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" }, ]; 4 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 sẽ không dùng filter để lọc ra danh sách users có age >= 20, thay vào đó là sẽ dùng reduce: map(function callbackFn(element, index, array) { ... }, thisArg) 4 map(function callbackFn(element, index, array) { ... }, thisArg) 5 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. 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: map(function callbackFn(element, index, array) { ... }, thisArg) 6 map(function callbackFn(element, index, array) { ... }, thisArg) 7 Tôi tạo một hàm 1 2 3 4 3 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. 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ìnhCho 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. Trong lodash có hàm 1 2 3 4 4 để phân nhóm và hàm 1 2 3 4 5 để 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: map(function callbackFn(element, index, array) { ... }, thisArg) 6 map(function callbackFn(element, index, array) { ... }, thisArg) 9 Kết quả sẽ trông như là: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 1 Đừ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. 1 2 3 4 6 có thể giúp tôi sắp xếp dữ liệu theo thứ tự tăng hoặc giảm: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 3 1 2 3 4 7 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 1 2 3 4 7 để 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: 1 2 3 4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 5 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. |
