Khôn ngoan trong việc sử dụng collections

Collections là gì?

Collections là một kiểu dữ liệu mà chúng ta hay thường sử dụng để lưu trữ dữ liệu có dạng một danh sách các giá trị, gọi dưới cái tên cụ thể là arrays, sets và maps.

Tại sao tôi cần quan tâm đến nó?

Trong Javascript, chúng ta thường xuyên phải làm việc với collection, đơn giản như việc trỏ lần lượt đến từng phần tử, lọc ra những thứ cần thiết, tìm một phần tử hoặc thậm chí giảm mảng ban đầu bằng nhiều cách khác nhau.
Có 3 phương thức chính để thao tác với collection là .map(), .filter(), và .reduce().
Nắm vững trong tay 3 phương thức này là một bước quan trọng để viết ra một đoạn code sạch, rõ ràng và dễ hiểu.
Hãy bắt đầu mới một mảng chứa thông tin của các developer sau:

Map pattern

Map sẽ áp dụng một function đến từng phân tử trong mảng và trả về một mảng mới với giá trị là kết quả khi chạy function đó.
Rườn ra thế là đủ rồi. Hiểu đơn giản như bây giờ chúng ta có một mảng object, nếu bạn muốn sửa đổi dữ liệu của từng phần tử, hoặc đơn giản chỉ là lấy ra những thuộc tính cần thiết thì hãy sử dụng .map().
Ví dụ như chúng ta chỉ cần lấy ra ngày sinh của từng developer thôi thì làm như thế nào nhỉ.
Input: Một mảng dữ liệu developers
Output: Một mảng dữ liệu chỉ chứa tên của các developer

Khi không dùng map():

Sử dụng for():

Sử dụng .forEach():

Và khi dùng map()

Sử dụng .map():

Chuyện gì vừa xảy ra vậy? Sao chỉ có 1 dòng mà đã ra được những cái kia. Hãy để tôi giải thích những gì đã xảy ra khi dùng map ở ví dụ trên nhé:

1. Tạo 1 mảng mapArr
2. Lặp qua các phần tử của mảng developers
3. Gọi hàm mapFunc với phần tử hiện tại làm đối số
4. Đẩy kết quả của mapFunc vào mảng mapArr
5. Trả về mảng mapArr sau khi đã duyệt qua tất cả các phần tử

Khá là giống với việc sử dụng .for() và .forEach đúng không.

Ngoài ra bạn có thể xử lý dữ liệu (thêm, sửa đổi) thông qua map()

Giúp tôi lấy ra số tuổi của developer nào:

Cách tạo ra hàm map()

Hàm .map() có thể được thực hiện thông qua đệ quy.

Filter Pattern

Filter sẽ áp dụng một function kiểm tra điều kiện duyệt qua từng phần tử một, sang đó trả về một mảng mới với dữ liệu chứa các phần tử đã pass điều kiện đó(trả về true).
Cái tên nói lên tất cả, bất kể khi nào bạn muốn lọc dữ liệu từ một mảng hãy sử dụng filter nhé.
Hãy bắt đầu với việc lấy ra những developer sinh sau năm 1950.
Input: Một mảng dữ liệu developers
Output: Một mảng dữ liệu chỉ chứa những developer sinh sau năm 1950

Cách tốt nhất

Hãy đi từng bước để biết hàm .filter() hoạt động như thế nào nha:

1. Tạo một mảng trống filterArr.
2. Lặp qua các phần tử mảng.
3. Gọi đến hàm filterFunc với phần tử hiện tại làm đối số.
4. Nếu kết quả là đúng, đẩy phần tử vào mảng filterArr.
5. Trả về mảng filterArr sau khi đi qua tất cả các phần tử.

Khi không dùng filter

Và đây là kết quả trả về:

Cách tạo ra hàm filter()

Chúng ta có thể tạo ra hàm filter() bằng cách sử dụng hàm đệ quy.

Reduce Pattern

Reduce sẽ chuyển đổi mảng thành một giá trị bằng cách kết hợp từng phần tử lại với nhau.
Ví dụ như bạn có một mảng dữ liệu các bảng điểm các môn học, giờ bạn muốn biết điểm phẩy của mình thì reduce sẽ dẽ dàng giúp bạn tính toán và trả về điểm phẩy cho bạn.
Giờ chúng ta muốn biết năm sinh trung bình của các developer thì như thế nào nhỉ:
Input: Một mảng dữ liệu developers
Output: Năm sinh trung bình của các developer

Cách tốt nhất

Sử dụng .reduce(), thật sự rất đơn giản:

Khi không dùng reduce

Bonus

Cách sử dụng join()

Nếu bạn muốn có được thông tin đây đủ của developer thì làm như thế nào?

Mọi thứ có vẻ ổn đấy, nhưng chúng ta nên viết như sau thì hơn đấy:

Cách sử dụng .min() hoặc .max()

Việc so sánh 2 giá trị với nhau và sau đó trả về giá trị nhỏ hơn hoặc lớn hơn khá là phố biến đấy:
Cách điển hình để giải quyết vấn đề đó là:

Tại sao phải như vậy? Hàm Math.min() sẽ trả về giá trị nhỏ nhất của bất kỳ tập hợp số nào đúng không. Mỗi tham số được truyền vào lần lượt chứ không phải là truyền thẳng vào một mảng. Để dễ hiểu hơn, hay xem ví dụ dưới đây:

Trước ES6/ES2015 .apply() function đã được dùng để giải quyết vấn đề đó.
Ngoài ra cũng có thể dùng Spread syntax (…) đối với ES6

Cách tạo ra hàm sum()

Hàm .sum () trả về tổng của tất cả các giá trị trong một mảng đã cho.

Tham khảo

https://levelup.gitconnected.com/use-collections-wisely-in-javascript-c1440f2ff595
https://www.freecodecamp.org/news/how-to-write-your-own-map-filter-and-reduce-functions-in-javascript-ab1e35679d26/