Khi làm việc trên các dự án Javascript, chúng ta thường gặp những tình huống cần phải thực hiện một số thao tác với dữ liệu. Ví dụ như lọc kết quả từ 1 list data hoặc thao tác với một thuộc tính của tất cả các phần tử trong 1 list data. Bạn có thể sử dụng vòng lặp loop for-loop để lấy kết quả mong muốn, tuy nhiên trong 1 số trường hợp sử dụng, mã sẽ trở nên nạo ra và lộn ngược
Hầu hết các trường hợp có thể dễ dàng lấy dữ liệu bằng cách sử dụng bản đồ, thu nhỏ và lọc. Code của bạn sẽ trở nên đẹp hơn và dễ đọc hơn. Bên cạnh đó, trong lập trình hàm, các hàm bậc cao như map, reduce, filter sẽ tương tác trên 1 mảng mới, và như vậy nó sẽ không làm thay đổi giá trị của mảng gốc
Trong bài viết này, hãy cùng CO-WELL khám phá cách sử dụng của 3 hàm này nhé
Các trường hợp có thể sử dụng chức năng Map, Reduce, Filter
Để biết khi nào cần sử dụng hàm nào, hãy tuân theo các quy tắc dưới đây nhé
- Nếu tôi có 1 mảng và tôi muốn xử lý từng phần tử của mảng theo cùng 1 cách và trả về một mảng có số lượng phần tử đúng bằng số lượng phần tử của mảng ban đầu thì tôi sẽ áp dụng bản đồ
- Nếu tôi đã có 1 mảng nhưng tôi chỉ muốn lấy các phần tử theo 1 tiêu chuẩn nhất, thì tôi sử dụng bộ lọc
- Nếu tôi đã có 1 mảng và tôi muốn sử dụng các giá trị trong mảng để tạo ra thứ hoàn toàn mới, tôi sẽ sử dụng giảm
Các quy tắc trên có vẻ hơi mơ hồ nên chúng ta sẽ xem các ví dụ bên dưới để hiểu rõ hơn nhé
const animals = [
{
"name": "cat",
"size": "small",
"weight": 5
},
{
"name": "dog",
________số 8
"weight": 10
},
{
{2
{3
{4
},
{
{7
{8
{9
"name": "cat",0
"name": "cat",1
Hàm đồ[]
Trường hợp chúng ta muốn có một mảng mới chứa các tên con vật từ mảng đã có sẵn trên
If used for-loop chúng ta sẽ làm như sau
"name": "cat",2
"name": "cat",3
"name": "cat",4
"name": "cat",5
If used map[] function
"name": "cat",6
"name": "cat",7
"name": "cat",8
Hàm map[] nhận vào 3 tham số để gọi lại hàm
- Phần tử hiện tại của mảng
- Index of Elemental section display at
- Heading to input
Ưu điểm so với vòng lặp for
- Không cần quản lý trạng thái vòng lặp
- Không cần sử dụng chỉ mục để truy cập phần tử của mảng
- Không cần thiết phải tạo thêm 1 mảng mới[animal_names] rồi thêm giá trị vào đó
1 điểm cần lưu ý khi sử dụng bản đồ là bắt buộc phải sử dụng return. Nếu không sử dụng, thì mảng trả lại sẽ chỉ bao gồm các giá trị không xác định
Bộ lọc hàm []
Trường hợp chúng ta chỉ muốn lấy ra một mảng bao gồm những con vật nhỏ
If used for-loop chúng ta sẽ làm như sau
"name": "cat",9
"size": "small",0
"size": "small",1
"size": "small",2
"name": "cat",0
"size": "small",4
If used filter[]
"size": "small",5
"size": "small",6
"size": "small",7
Hàm gọi lại của bộ lọc cũng được nhận vào các tham số như hàm map. Nhưng trong trường hợp này, chúng tôi không sử dụng đến 2 tham số Chỉ mục của phần tử được hiển thị và Mã đầu vào nên chúng tôi sẽ không đưa nó vào hàm gọi lại. Chúng ta cũng cần sử dụng return để trả lại các giá trị cho mảng đầu ra. Tuy nhiên, cần lưu ý đối với hàm bộ lọc mà chúng ta sẽ trả về giá trị boolean [điều kiện cần điền]. Nếu không làm được phần này thì hàm sẽ luôn trả về false
Hàm reduce[]
Trường hợp chúng ta cần tính toán tổng khối lượng các con vật
Nếu sử dụng vòng lặp for chúng ta sẽ làm như sau
"size": "small",8
"name": "cat",3
"weight": 50
"size": "small",4
If used function reduce[]
"weight": 52
"weight": 53
"weight": 54
Với hàm reduce[], các tham số truyền vào sẽ khác 1 chút so với 2 hàm kể trên.
Giá trị hiện tại của biến ta muốn trả về khi kết thúc hàm[trong ví dụ trên là total_weight]. Chúng ta cần gán giá trị ban đầu cho biến này [trong ví dụ trên là 0]
- Phần tử hiện tại của mảng
- Phần tử chỉ mục được hiển thị tại
- Heading to input
Những lợi ích khi sử dụng reduce[] cũng tương tự như map[], filter[] làm cho mã ngắn hơn, dễ đọc hơn. Chúng ta vẫn sẽ phải sử dụng return. Lần này sẽ trả về giá trị cho biến total_weight, giá trị này sẽ được cộng gộp sau mỗi lần lặp và gán vào tham số đầu tiên của hàm gọi lại[trọng số]
Kết quả
Thông qua những ví dụ trên, CO-WELL Asia hy vọng bạn sẽ hiểu rõ hơn về cách sử dụng bản đồ, bộ lọc và thu nhỏ. Các hàm này sẽ còn hữu dụng hơn khi mã hoặc dữ liệu của bạn trở nên phức tạp. Các bạn có thể sử dụng 3 hàm này thường xuyên hơn để code trở nên sạch, dễ đọc và dễ bảo trì hơn nhé