Hướng dẫn javascript reduce
Trong bài này mình sẽ giới thiệu hàm array reduce trong javascript, đây là một method được thêm vào mảng kể từ phiên bản ES6. Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Hàm reduce sẽ duyệt qua từng phần tử trong mảng, sau đó trả về một giá trị cuối cùng, giá trị này phụ thuộc vào chương trình của hàm mà bạn truyền vào reduce. Mới nghe thì có vẻ hơi khó hiểu phải khong các bạn? Đừng lo lắng quá nhé, bởi qua các phần tiếp theo mình sẽ giải thích thật kỹ về hàm này. 1. Cú pháp hàm reduce trong JavascriptTrước tiên bạn hãy tham khảo cú pháp của nó đã nhé: Bài viết này được đăng tại [free tuts .net] array.reduce(function(total, currentValue, currentIndex, arr), initialValue) Nếu viết theo arrow function thì sẽ như sau: array.reduce((total, currentValue, currentIndex, arr) => {...}, initialValue) Trong đó:
2. Số lần lặp của hàm reduce trong javascriptĐã xem cú pháp rồi thì bây giờ hãy cùng mình tìm hiểu xem hàm reduce sẽ có tổng số lần lặp bao nhiêu, thông qua một ví dụ cực kì đơn giản dưới đây. Giả sử mình có mảng dưới đây: const numbers = [10, 15, 20]; Bây giờ ta sẽ thực hiện hàm reduce trên mảng này với hai trường hợp khác nhau. Trường hợp 1: Không gán giá trị ban đầuconst numbers = [10, 15, 20]; // Biến dùng để đếm số lần lặp let i = 1; numbers.reduce(function(total, currentValue, currentIndex, arr) { console.log("# Lần lặp thứ " + i); console.log("# Giá trị: " + currentValue); console.log("# Chỉ mục: " + currentIndex); console.log("# Mảng: " + arr); console.log("------------------------"); i++; }); Kết quả: Như bạn thấy, trường hợp này thì hàm reduce sẽ lặp 2 lần mặc dù mảng có 3 phần tử. Lý do là chúng ta không truyền giá trị ban đầu nên nó sẽ lấy phần tử đầu tiên làm giá trị ban đầu, vì vậy hàm reduce sẽ không lặp cho phần tử này. Trường hợp 2: Có gán giá trị ban đầuconst numbers = [10, 15, 20]; // Biến dùng để đếm số lần lặp let i = 1; numbers.reduce(function(total, currentValue, currentIndex, arr) { console.log("# Lần lặp thứ " + i); console.log("# Giá trị: " + currentValue); console.log("# Chỉ mục: " + currentIndex); console.log("# Mảng: " + arr); console.log("------------------------"); i++; }, 5); Theo như dự đoán của mình thì nó sẽ lặp 3 lần. Lý do là chúng ta đã truyền giá trị ban đầu cho hàm này rồi, nên nó sẽ duyệt qua tất cả các phần tử của mảng. 3. Biến total trong tham số callback của hàm reduceQua phần 2 thì chắc hẳn bạn đã biết được ý nghĩa của các biến
Ví dụ: Thử in biến total ra xem có gì nhé. Trước tiên hãy chạy đoạn code dưới đây. const numbers = [10, 15, 20]; var result = numbers.reduce(function(total, currentValue, currentIndex, arr) { console.log(total); // Trả về biến total cộng với giá trị của phần tử đang lặp return total + currentValue; }, 5); console.log("----------------"); console.log(result); Kết quả: 5 15 30 ---------------- 50 Quy trình chạy như sau:
4. Một số ví dụ về hàm reduce trong javascriptNhư vậy là bạn đã hiểu hết tất cả các tham số của hàm callback trong reduce rồi phải không nào? Bây giờ mình sẽ làm thêm một vài ví dụ đơn giản khác nữa nhé. Ví dụ 1: Tính tổng các phần tử trong mảng numbers. const numbers = [10, 15, 20, 54, 60]; var total = numbers.reduce(function(total, currentValue) { return total + currentValue; }); console.log(total); // 195 Ví dụ 2: Tính tổng các phần tử có giá trị chẵn trong mảng numbers. const numbers = [10, 15, 20, 54, 60]; var total = numbers.reduce(function(total, currentValue) { if (currentValue % 2 == 0){ return total + currentValue; } else { return total; } }); console.log(total); // 144 Như vậy là mình đã hướng dẫn xong cách sử dụng hàm reduce trong javascript. Đây là một hàm tương đối khó hiểu, nhưng một khi hiểu nó rồi thì bạn sẽ thấy nó rất hay. |