Hàm reduce() trong JavaScript

• Trần Thị Vân
• 989
• 29/08/2025

Chức năng của Hàm reduce() trong JavaScript

Hàm reduce() trong JavaScript dùng để tính tổng các giá trị trong một mảng đơn giản hoặc mảng đa chiều, làm phẳng mảng, thay đổi cấu trúc mảng,...

Cú pháp của Hàm reduce() trong JavaScript

var tong  = mang.reduce(function(total, currentValue, currentIndex, arr) {
  // Code
},initialValue);

mang: Mảng chính.

total: Giá trị trả về cho mỗi lần lặp của hàm return, nếu initialValue là số lớn hơn 0 ví dụ là 5 thì giá trị trả về ban đầu của total là 5.

currentValue: Giá trị hiện tại của phần tử trong mảng.

currentIndex: Vị trí chỉ mục hiện tại của phần tử trong mảng.

arr: Xem các phần tử của mảng theo dạng chuỗi.

initialValue: Tham số không bắt buộc nhưng đối với mảng rỗng thì nên để, nó sẽ là giá trị ban đầu của total, nếu initialValue bằng 3 thì khi lặp phần tử đầu tiên thì total sẽ bằng 3, nếu không để initialValue thì total ban đầu sẽ là currentValue của phần tử đầu tiên sau đó thực hiện tiếp phần tử thứ 2 (phần tử đầu tiên sẽ không thực hiện phép tính cộng, trừ, nhân, chia mà chỉ lấy currentValue làm total rồi lấy total đó thực hiện phép tính với currentValue của phần tử thứ 2).

Code Hàm reduce() trong JavaScript

Hàm reduce() tính tổng trong JavaScript

<script>
// Tính tổng một mảng đơn giản
document.write("<b>Tính tổng một mảng đơn giản</b><br>");
var mang = [10, 15,25 ];
// Biến chứa tổng các giá trị
var initialValue= 0; // Giá trị ban đầu, nếu giá trị ban đầu là 5 thì total khởi tạo là 5
var tong  = mang.reduce(function(total, currentValue, currentIndex, arr) {
    document.write("Giá trị trả lại (total): " + total+"<br>"); // Giá trị trả lại của hàm return, nếu initialValue bằng 5 thì total khởi tạo là 5
    document.write("Giá trị (currentValue): " + currentValue+"<br>"); // Giá trị của phần tử trong mảng
    document.write("Chỉ mục (currentIndex): " + currentIndex+"<br>"); // Vị trí index của phần tử trong mảng
    document.write("Mảng (arr): " + arr+"<br>");
    document.write("------------------------<br>");
    return total + currentValue; // total cuối cùng là 25 + currentValue là 25 =  50.
    // mỗi lần lặp từng phần tử sẽ lấy total + currentValue, kết quả lần lặp 1 sẽ trả về total cho lần lặp 2 rồi lấy total đó cộng tiếp cho currentValue, cứ thế cộng ra tổng
},initialValue);
document.write("Tổng giá trị: "+tong);
document.write("<br>");

// Tính lương tuần mảng đa chiều
document.write("<b>Tính lương tuần mảng đa chiều</b><br>");
var thongtin = [{ ten: "Lực", luong: 500000,songay: 5}, { ten: "Vân", luong: 600000,songay: 5}, { ten: "Dung", luong: 600000,songay: 4} ];
// Tính tổng số tuổi
let tongluong = thongtin.reduce(function(total, currentValue) {
    return total + currentValue.songay * currentValue.luong;
}, 0);

// In ra tổng tiền của giỏ hàng
document.write(tongluong);

</script>

Kết quả:

Tính tổng một mảng đơn giản
Giá trị trả lại (total): 0
Giá trị (currentValue): 10
Chỉ mục (currentIndex): 0
Mảng (arr): 10,15,25
------------------------
Giá trị trả lại (total): 10
Giá trị (currentValue): 15
Chỉ mục (currentIndex): 1
Mảng (arr): 10,15,25
------------------------
Giá trị trả lại (total): 25
Giá trị (currentValue): 25
Chỉ mục (currentIndex): 2
Mảng (arr): 10,15,25
------------------------
Tổng giá trị: 50
Tính lương tuần mảng đa chiều
7900000

Chạy Thử

Một số cách sử dụng Hàm reduce() trong JavaScript

Ngoài những phép tính đơn giản trên mảng, reduce() còn có thể xử lý nhiều bài toán dữ liệu thường gặp trong JavaScript. Điểm mạnh của phương thức này là cho phép duyệt qua từng phần tử và tích lũy kết quả theo một quy tắc nhất định. Nhờ đó, bạn có thể dùng một đoạn code ngắn để tính toán, thống kê, nhóm hoặc biến đổi dữ liệu.

Dùng reduce() để tính tổng và tích các phần tử

Đây là một trong những cách dùng phổ biến nhất của reduce(). Thay vì tạo biến bên ngoài rồi dùng vòng lặp để cộng hoặc nhân từng giá trị, bạn có thể để hàm tự quản lý giá trị tích lũy.

Ví dụ, tính tổng các phần tử trong mảng:

const numbers = [2, 4, 6, 8];

const total = numbers.reduce((sum, number) => sum + number, 0);

console.log(total);

Tham số thứ hai của reduce() là giá trị khởi tạo. Trong ví dụ trên, 0 là điểm bắt đầu của biến tích lũy sum. Với phép nhân, nên khởi tạo bằng 1 để không làm thay đổi kết quả:

const numbers = [2, 3, 4];

const product = numbers.reduce((result, number) => result * number, 1);

console.log(product);

Cách viết này đặc biệt hữu ích khi cần thực hiện một phép tính trên toàn bộ dữ liệu mà không muốn duy trì nhiều biến trung gian.

Dùng reduce() để đếm số lần xuất hiện của phần tử

reduce() cũng có thể biến một mảng thành một đối tượng thống kê. Với mỗi phần tử, bạn kiểm tra giá trị đó đã xuất hiện trong kết quả hay chưa, sau đó tăng bộ đếm tương ứng.

const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];

const count = fruits.reduce((result, fruit) => {
    result[fruit] = (result[fruit] || 0) + 1;
    return result;
}, {});

console.log(count);

Kết quả thu được là một đối tượng chứa tên phần tử và số lần xuất hiện tương ứng. Cách làm này phù hợp khi cần thống kê dữ liệu như số lượng sản phẩm theo tên, số lượt xuất hiện của từ hoặc tần suất của một giá trị.

Dùng reduce() để nhóm các phần tử trong mảng

Khi dữ liệu có một thuộc tính dùng để phân loại, reduce() có thể giúp gom các phần tử thành từng nhóm. Ví dụ, danh sách sản phẩm có thể được chia theo danh mục.

const products = [
    { name: "Áo thun", category: "Thời trang" },
    { name: "Quần jean", category: "Thời trang" },
    { name: "Chuột không dây", category: "Công nghệ" }
];

const grouped = products.reduce((result, product) => {
    if (!result[product.category]) {
        result[product.category] = [];
    }

    result[product.category].push(product);
    return result;
}, {});

console.log(grouped);

Trong trường hợp này, mỗi danh mục trở thành một thuộc tính của đối tượng kết quả, còn các sản phẩm tương ứng được đưa vào một mảng riêng. Đây là cách hữu ích khi cần chuẩn bị dữ liệu cho giao diện hoặc xử lý các danh sách được phân loại.

Dùng reduce() để chuyển mảng thành Object

Nếu mỗi phần tử trong mảng có một khóa riêng, reduce() có thể chuyển toàn bộ danh sách thành Object để truy cập dữ liệu thuận tiện hơn. Cách này thường hữu ích khi muốn tìm phần tử thông qua một mã định danh thay vì phải duyệt lại mảng.

const users = [
    { id: 101, name: "An" },
    { id: 102, name: "Bình" },
    { id: 103, name: "Cường" }
];

const userMap = users.reduce((result, user) => {
    result[user.id] = user;
    return result;
}, {});

console.log(userMap);

Sau khi chuyển đổi, có thể lấy nhanh người dùng thông qua id:

console.log(userMap[102]);

Điểm đáng chú ý là reduce() không chỉ tạo ra một giá trị số. Giá trị tích lũy có thể là Object, Array hoặc một cấu trúc dữ liệu khác, miễn là cách cập nhật kết quả được xác định rõ trong hàm callback.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm reduce() trong JavaScript.