Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Reduce Javascript là gì? Giới thiệu hàm reduce trong Javascript

@devnavSep 17, 20213 min read...

Method Reduce() trong js sẽ thực thi một "reducer" callback function do chúng ta cung cấp, trên mỗi phần tử của mảng, nó sẽ chuyển giá trị mà chúng ta return của phần tử trước cho phần tử kế tiếp. Sau khi duyệt qua tất cả phần tử của mảng thì kết quả cuối cùng ta thu được một giá trị duy nhất.

Cú pháp reduce:

reduce((previousValue, currentValue, currentIndex, array) => { ... }, initialValue)

Giải thích:

callbackFn:

previousValue: giá trị của phần tử trước phần tử hiện tại.
currentValue: giá trị của phần tử hiện tại
currentIndex: index hiện tại (Optional)
array: mảng được duyệt qua (Optional)

initialValue (Optional)

Giá trị này sẽ được khởi tạo cho previousValue ở lần thực thi đầu tiên. Nếu bạn truyền 1 initialValue thì currentValue sẽ được khởi tạo là giá trị đầu tiên của mảng. Nếu không truyền initialValue thì previousValue được khởi tạo là giá trị đầu của mảng và vì thế currentValue sẽ là giá trị thứ hai của mảng ^^.

Để dễ hiểu hơn thì chúng ta cùng xem một ví dụ:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue // 10
})

Cùng xem cách reduce thực thi để hiểu hơn nhé:

callback	previousValue	currentValue	currentIndex	array	return value
first call	0	1	1	[0, 1, 2, 3, 4]	1
second call	1	2	2	[0, 1, 2, 3, 4]	3
third call	3	3	3	[0, 1, 2, 3, 4]	6
fourth call	6	4	4	[0, 1, 2, 3, 4]	10

Bây giờ ta thử truyền 1 giá trị khởi tạo thử xem nhé:

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue; // callback

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4 (giá trị ban đầu là 5)
console.log(array1.reduce(reducer, 5));
// expected output: 15

Tính tổng với mảng object

Để tính tổng thì bạn phải truyền 1 initialValue vào method. Việc này cũng khá dễ hiểu vì nếu bạn không truyền giá trị khởi tạo thì previousValue được khởi tạo là giá trị đầu của mảng, mà giá trị đầu của mảng là một object nên chúng ta sẽ không thể tính tổng đúng như mong muốn ^^.

let initialValue = 0
let arr = [{x: 1}, {x: 2}, {x: 3}]
let sum = arr.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue.x
}, initialValue)

console.log(sum) // logs 6

Đếm số lần xuất hiện phần tử trong mảng

Một cách để đếm số lần xuất hiện của phần tử khá hay chính là dùng reduce ^^.

let names = ['John', 'Bob', 'Jonas', 'Bruce', 'John']

let count = names.reduce(function (allNames, name) {
  if (name in allNames) allNames[name]++
  else allNames[name] = 1

  return allNames
}, {})
// { 'John': 2, 'Bob': 1, 'Jonas': 1, 'Bruce': 1 }

Sử dụng reduce để triển khai compose & pipe

method reduce còn được sử dụng cho compose & pipe. Mình đã có bài viết về vấn đề này. Các bạn có thể xem tại: Compose và Pipe trong Javascript là gì?

Như vậy là mình đã hướng dẫn cho các bạn cách sử dụng reduce rồi. Hy vọng sau bài viết các bạn có thể sử dụng reduce trong các bài toán một cách hợp lý ^^.

Chúc các bạn học tốt.