Chắc hẳn khi làm các dự án , các bạn sẽ sử dụng for-loop để duyệt các phần tử trong mảng, tuy nhiên điều này sẽ làm cho code của bạn sẽ trở nên dài dòng, khó đọc. Hầu hết khi đã sử dụng hay học lập trình Javascript để làm dự án thì các bạn sẽ dùng các hàm khác để thay thế for-loop là map , filter , reduce , … điều này làm cho code trở nên tường minh hơn và dễ đọc hơn. Sau đây mình xin giới thiệu một số cách sử dụng những hàm này:
1. Hàm map : Phương thức map() giúp tạo ra một mảng mới với các phần tử là kết quả từ việc thực thi một hàm lên từng phần tử của mảng được gọi.
Xem thêm tại đây:
https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Hàm map() sẽ nhận vào 3 tham số theo thứ tự sau:
Phần tử hiện tại của mảng ( bắt buộc )
Chỉ số của phần tử ( optional )
Mảng ban đầu ( optional )
Sau đây là cách cài đặt hàm map() và một số cách sử dụng.
– Bước 1: tạo arrayStored để lưu các giá trị của mảng mới
– Bước 2: loop qua các phần tử của mảng
* 2.1 : dùng callback
* 2.2 : push phần tử vào mảng
– Bước 3: trả về mảng
Một số ứng dụng:
Sau đây là 1 số ví dụ của hàm này :
1. Cho một mảng cars, chúng ta cần loop qua và tạo một message như sau: Xe Ford có giá 200 …
2. Cho một mảng persons , chúng ta cần loop qua và kiểm tra nếu age > 18 thì sẽ tạo thêm một thuộc tính isAdult = true, và ngược lại isAdult = false
2. Hàm filter: Phương thức filter() dùng để tạo một mảng mới với tất cả các phần tử thỏa điều kiện
Xem thêm tại đây:
https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Hàm filter() sẽ nhận vào 3 tham số giống như hàm map()
Sau đây là cách cài đặt và một số ví dụ của hàm filter()
– Bước 1: tạo arrayStored để lưu các giá trị của mảng mới
– Bước 2: loop qua các phần tử của mảng
2.1 : dùng callback và kiểm tra điều kiện
2.2 : push phần tử vào mảng
– Bước 3: trả về mảng
Sau đây là một số ứng dụng của hàm filter :
1. Cho một mảng persons và loại bỏ phần tử thoả mãn điều kiện id = 2
2. Cho mảng numbers và loại bỏ các phần tử trùng trong mảng
3. Hàm reduce: Phương thức reduce() dùng để thực thi một hàm lên từng phần tử của mảng (từ trái sang phải) với một biến tích lũy để thu về một giá trị duy nhất.
Xem thêm tại đây:
https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
-Implement hàm reduce
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 (Cụ thể các bạn hãy đọc document của MDN nhé !)
Sau đây là một số ví dụ của hàm reduce()
1. Cho một mảng trips ta cần tính tổng price của các phần tử có trong mảng trips
2. Cho một mảng persons, hãy tính số lượng male và female trong mảng
KẾT LUẬN:
Trong dự án Javascript thực tế , các hàm trên đặc biệt được sử dụng nhiều. Ở trên mình đã đưa ra một số ví dụ để các bạn tham khảo, tránh bỡ ngỡ khi gặp các hàm map(), filter(), reduce(). Đây là bài viết đầu tiên của mình mong , chắc hẳn còn nhiều sai sót mong các bạn đóng góp . Happy Coding 😀
Các bạn cũng cần lưu ý là ngôn ngữ lập trình JavaScript là nền tảng để mình có thể phát triển thêm kỹ năng trên các framework như ReactJS, NodeJS, VueJS,…vì vậy nếu bạn đã có kiến thức nền tảng Javascript rồi thì bạn có thể tự tin apply vào 2 khóa học ReactJS & NodeJS của Nordic Coder để nâng cao kỹ năng cũng như CV của bạn:
