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

Posted on by mtoplistChuyên mục:Top List

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  

}
)

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
;
  

 
console
.
log
(
array1
.
reduce
(
reducer
)
)
;

 

 
console
.
log
(
array1
.
reduce
(
reducer
,
 
5
)
)
;

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
)

Đế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

}
,
 
{
}
)

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.

mtoplist