Gỉa sử chúng có một mảng các chữ số như sau:

1

const numbers = [2, 4, 6];

Làm sao chúng ta có thể tính tổng các chữ số trong mảng trên. Sử dụng reduce trong javascript chúng ta có dễ dàng làm việc này mà không cần sử dụng vòng lặp.

1
2
3
4
5
6

const numbers = [2, 4, 6];
const sum = numbers.reduce(function(sum, number) {
  const updatedSum = sum + number;
  return updatedSum;
}, 0);
sum; // 12

Trong bài viết này, chúng ta sẽ tìm hiểu về phương thức reduce và cách sử dụng array.reduce(callback, initialValue)

1.Phương thức reduce

Trước khi đi sâu hơn về cách sử dụng array.reduce() chúng ta hãy cùng tìm hiểu reduce được sử dụng làm mục đích gì? Đó chính là giảm kích thước của 1 mảng thành
1 giá trị duy nhất.

Một ví dụ khác của việc này là xác đinh phần từ lớn nhất của mảng [7,2,10,6] kết quả ở đây sẽ là 10.

Qua đó chúng ta có thể thấy được rằng phương thức reduce() mục đích là để thực hiện thao tác rút gọn phần tử trong mảng.

2.Array.reduce()

Array.reduce() có 2 đối số truyền vào:

1

const value = array.reduce(callback[, initialValue]);

Trong đó callback là đối số bắt buộc, initialValue không bát buộc và làm giá trị khởi tạo.

Javascript gọi callback trên mỗi phần tử của mảng với 4 đối số (giá trị tích lũy, phần tử hiện tại của mảng, index của phần tử hiện tại trong mảng, mảng chính)

1
2
3
4
5

array.reduce(function(accumulator, item, index, array) {
  // Use `accumulator` and `item` 
  // to calculate `updatedAccumulator`...
  return updatedAccumulator;
})

Một ví dụ cụ thể hơn:

1
2
3
4
5
6

const numbers = [2, 4, 6];
const sum = numbers.reduce(function summarize(sum, number) {
  const updatedSum = sum + number;
  return updatedSum;
}, 0);
sum; // 12

numbers.reduce(summarize, 0) dùng để tính tổng tất cả các phần tử trong mảng

Ngoài ra hãy lưu ý đối số thứ 2 numbers.reduce(summarize, 0) đó là tổng các phần tử trong mảng được gán mặc định ban đầu là 0.

Vậy làm cách nào để tìm phần tử lớn nhất trong mảng khi chúng ta sử dụng reduce()? Bạn hãy tìm hiểu xem sao nhé? 😄

3. Bỏ qua giá trị khởi tạo ban đầu (initialValue)

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ụ:

1
2
3

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

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

1
2
3
4
5
6
7
8
9

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 }