Chào bạn, reduce[] trong JavaScript là một phương thức có thể khó hiểu đối với những người mới bắt đầu, đặc biệt là khi các giải thích trên mạng cũng rất mơ hồ.
Do đó, trong bài viết này, mình sẽ giúp bạn tìm hiểu về căn bản của phương thức reduce[] trong JavaScript qua các ví dụ từ đơn giản đến phức tạp.
Hiểu được cách sử dụng reduce[] có rất nhiều lợi ích sau này bởi khi học Front end [chuyên sâu], bạn sẽ sử dụng reduce[] thường xuyên để quản lý state [hãy nghĩ đến Redux].
Cú pháp đơn giản của phương thức reduce[] trong JavaScript là:
arr.reduce[reducer,initialValue];
> Lưu ý #1: initialValue [giá trị khởi tạo] là tùy chọn. Nếu bạn truyền vào đối số khởi tạo, phương thức reducer[] sử dụng nó ở lần gọi đầu tiên.
Phương thức reduce[] là gì?
Phương thức reduce[] là:
- Phương thứcgiảm mảng xuống thànhmột giá trị duy nhất.
- Phương thức reduce[] thực thi một hàm được cung cấp cho mỗi giá trị của mảng [từ trái sang phải].
- Giá trị trả về của hàm được lưu trữ trong bộ tích lũy [kết quả / tổng].
> Lưu ý #2: reduce[] không thực thi hàm đối với các phần tử mảng không có giá trị.
> Lưu ý #3: Phương thức này không thay đổi mảng ban đầu.
Reduce đi kèm với một số thuật ngữ nhưreducervà accumulator. Trong đó: - accumulator là giá trị mà chúng ta kết thúc
- reducerlà hành động mà chúng ta sẽ thực hiện để đạt được một giá trị.
Bạn phải nhớ rằng một reduce[] sẽ chỉ trả về một giá trị duy nhất do đó nó tên là reduce.
Hàm call back truyền vào trong reduce[]
Hàm call back [reducer] này có bốn đối số:
functionreducer[accumulator,currentValue,currentIndex,array]{}
Trong đó:
- accumulator: Bắt buộc. Giá trị được trả về từ lần gọi trước. Nếu bạn truyền giá trị khởi tạo cho phương thức reduce[], khi hàm call back này được thực thi lần đầu tiên, accumulator bằng giá trị khởi tạo.
- currentValue: Bắt buộc. Giá trị của phần tử mảng trong lần lặp hiện tại.
- currentIndex: Tùy chọn. Chỉ số của phần tử mảng trong lần lặp hiện tại.
- arr: Tùy chọn. Mảng mà phương thức reduce[] gọi và áp dụng hàm call back trên từng phần tử của nó.
Hàm reducer này thực thi trên mỗi phần tử và trả về một giá trị. Giá trị trả về này được gán cho đối số tích lũy [accumulator] trong mỗi lần lặp.
Ở lần lặp cuối cùng, giá trị của accumulator trở thành giá trị kết quả duy nhất.
Lấy ví dụ cổ điển sau:
lettong=0;
constmangSo=[5,10,15];
for[leti=0;i{ returnboTichLuy+phanTuHienTai; };
//Sửdụngreduce[] consttong=mangSo.reduce[tinhTong,giaTriKhoiTao]; console.log[tong];
Kết quả:
30
Chương trình trên nhìn có vẻ khó hiểu, nhưng chúng ta thêm console vào trong hàm tinhTong như sau:
//Đâylàgiátrịkhởitạocủachúngta constgiaTriKhoiTao=0;
/*Mảngsố*/ constmangSo=[5,10,15];
//Tạohàmtínhtổng.Hànhđộngnàylátnữasẽ //ápdụnglêntrênmảng[hàmnàysẽđượcgọilại] consttinhTong=[boTichLuy,phanTuHienTai]=>{ console.log["Bộtíchlũy:"+boTichLuy]; console.log["Phầnhiện tại:"+phanTuHienTai]; console.log["---"]; returnboTichLuy+phanTuHienTai; };
//Sửdụngreduce[] consttong=mangSo.reduce[tinhTong,giaTriKhoiTao]; console.log[tong];
Kết quả:
Bộ tích lũy: 0
Phần hiện tại: 5
---
Bộ tích lũy: 5
Phần hiện tại: 10
---
Bộ tích lũy: 15
Phần hiện tại: 15
---
30
Như vậy ta thấy, phương thức của chúng ta được gọi 3 lần vì mảng có 3 phần tử.
boTichLuy bắt đầu từ 0, đó là giá trị khởi tạo mà chúng ta đã truyền vào reduce[].
Trên mỗi lần gọi hàm các phần tử hiện tại sẽ được cộng vào bộ tích lũy [là accumulator đó].
Cuối cùng, chúng ta có kết quả 30.
> Lưu ý #4: Hãy nhớ là hàm reduce[] chỉ trả về giá trị duy nhất
Một ví dụ khác khá phổ biến trong lập trình web, giả sử chúng ta có giỏ hàng như sau:
//Giỏhàng letgioHang=[{ sanPham:"iPhone12", soLuong:1, giaBan:999 }, { sanPham:"RAM", soLuong:1, giaBan:50 }, { sanPham:"AirPods", soLuong:2, giaBan:250 } ];
Bây giờ, nhiệm vụ của chúng ta là tính tổng giá trị của giỏ hàng ngày bằng cách lấy số lượng * giá bán.
Chúng ta sử dụng phương thức reduce[] như sau:
//Tínhtổngtiềnphảitrảbằngreduce[] lettongTien=gioHang.reduce[function[tong,sp]{ returntong+sp.soLuong*sp.giaBan; },0];
//Inratổngtiềncủagiỏhàng console.log[tongTien];
Kết quả ta được:
1549
> Lưu ý #5: Nếu bạn không truyền giá trị khởi tạo, lần lặp đầu tiên, nó sẽ lấy phần tử đầu tiên [1 đối tượng] để tính cộng => sẽ tính toán sai.
> Nếu bạn muốn học lập trình web nhanh hơn thì có thể tham gia KHÓA HỌC JAVA WEB hoặc HỌC LÀM WEB PHP [Dành cho sinh viên CNTT, người đi làm] trong 4.5 tháng.
> Hoặc KHÓA HỌC LẬP TRÌNH WEB[Full stack] dành cho dân ngoại đạo trong 12 tháng
Trên đây là một vài ví dụ đơn giản về phương thức reduce[], bây giờ chúng ta sẽ thử với ví dụ phức tạp hơn.
Làm phẳng một mảng bằng cách sử dụng reduce[]
Giả sử chúng ta có mảng sau:
constmangSo=[1,2,[3,10,[11,12]],[1,2,[3,4]],5,6];
Và giả sử vì một số lý do điên rồ, JavaScript đã loại bỏ phương thức .flat, thế nên chúng ta phải tự làm phẳng mảng này.
Chúng ta sẽ viết một hàm để làm phẳng bất kỳ mảng nào bất kể các mảng được lồng sâu như thế nào:
functionlamPhangMang[mang]{ //Giátrịkhởitạocủachúngta //trongtrườnghợpnàylà1mảngtrống constgiaTriKhoiTao=[];
//Gọireduce[]trênmảngcủachúngta returnmang.reduce[[ketQua,giaTri]=>{ //Nếugiátrịlà1mảngthìgọiđệquyreduce //Nếugiátrịkhôngphải1mảngthìcầnnối //cácgiátrịlạivớinhau returnketQua.concat[Array.isArray[giaTri]?lamPhangMang[giaTri]:giaTri]; },giaTriKhoiTao]; }
constmangSo=[1,2,[3,10,[11,12]],[1,2,[3,4]],5,6];
//Làmphẳngmảnglồngsâu console.log[lamPhangMang[mangSo]];
Kết quả:
[1, 2, 3, 10, 11, 12, 12, 3, 4, 5, 6]
Việc làm phẳng mảng khá phổ biến đó, với reduce thì việc này cũng đã đơn giản đi hơn rất nhiều.
Thay đổi cấu trúc đối tượng với reduce[]
Giả sử, máy chủ gửi cho chúng ta một đối tượng như thế này:
constduLieu=[ {name:"Apple",country:"Mỹ"}, {name:"Samsung",country:"HànQuốc"}, {name:"Google",country:"Mỹ"} ];
Và chúng ta muốn chuyển đối tượng này thành như thế này:
constduLieuDaThayDoi={ Apple:{country:"Mỹ"}, Samsung:{country:"HànQuốc"}, Google:{country:"Mỹ"} };
Để có được kết quả mong muốn, chúng ta thực hiện như sau:
constthayDoiCauTruc=data=> data.reduce[[acc,item]=>{ //Thêmkeychođốitượng acc[item.name]={country:item.country}; returnacc; },{}];
console.log[thayDoiCauTruc[duLieu]];
Tổng kết về reduce[]
Như vậy, trong bài hướng dẫn này, mình đã giúp bạn tìm hiểu sơ bộ về cách hoạt động của phương thức reduce[] trong JavaScript. Hi vọng nó giúp ích cho bạn.
Chúc bạn học tốt!
Tham khảo thêm:
- Array method trong JavaScript
--- HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI Học Lập trình chất lượng cao [Since 2002]. Học thực tế + Tuyển dụng ngay! Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội SĐT: 02435574074 - 0383.180086 Email: Website://niithanoi.edu.vn Fanpage: //facebook.com/NIIT.ICT/ #niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python