Hướng dẫn cách sử dụng Array reduce trong JavaScript. Bạn sẽ học được cách dùng Array reduce để xử lý tuần tự các phần tử trong mảng ban đầu thông qua một hàm “thu nhỏ dần” để thu về một kết quả tích lũy trong JavaScript sau bài học này.

Array reduce trong JavaScript

Array reduce trong JavaScript là phương thức trong Array Object, có tác dụng xử lý tuần tự các phần tử trong mảng ban đầu thông qua một hàm “thu nhỏ dần” để thu về một kết quả tích lũy duy nhất.

Trong hàm “thu nhỏ dần” này, giá trị tích lũy trả về của kết quả tính toán với phần tử ngay trước đó được chuyển đến trong phép tính với phần tử sau đó, và quá trình này được lặp lại cho tới khi xử lý hết các phần tử và trả về giá trị tích lũy cuối cùng.

Ví dụ dễ hiểu nhất của Array reduce chính là phép tính tổng các phần tử trong mảng JavaScript. Bằng cách sử dụng Array reduce, các phần tử được lấy tuần tự và cộng dồn vào một biến tích lũy thông qua hàm tính tổng, và biến tích lũy thu được trong kết quả tính toán với phần tử ngay trước đó được chuyển đến trong phép tính với phần tử sau đó. Và cuối cùng, khi tất cả các phần tử được cộng dồn vào biến tích lũy, kết quả duy nhất là tổng của tất cả chúng sẽ được trả về.

Phương thức Array reduce hoạt động theo cơ chế:

1. Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
2. Chuyển chúng đến đối số của phương thức là một hàm callback chứa các xử lý tính toán phần tử này với một biến tích lũy
3. Thay đổi biến tích lũy thông qua xử lý với phần tử, rồi chuyển biến tích lũy này đến trong phép tính với phần tử sau đó

Chúng ta sử dụng Array reduce với cú pháp tổng quát sau đây:

Trong đó:

• arr là mảng ban đầu
• callbackFN là hàm callback chứa xử lý tính tổng. Hàm callback sẽ nhận từng phần tử từ mảng arr để xử lý tích lũy.
• initialValue là giá trị đầu tiên được truyền vào hàm callback trong lần gọi hàm đầu tiên. Nếu được lược bỏ thì giá trị phần tử đầu tiên của mảng arr sẽ được sử dụng.

Lại nữa, hàm callback sử dụng trong phương thức reduce có thể được viết với 1 trong 3 cách sau đây:

Trong đó:

• accumulator là biến dùng để tích lũy các kết trả về sau mỗi lần gọi hàm callback. Sau khi tất cả các phần tử được xử lý, accumulator sẽ là kết quả cuối cùng được trả về từ Array reduce.
• value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
• index là tên một biến dùng để gán index của phần tử đang được lấy từ mảng để truyền vào callbackFN
• array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Hàm callback sẽ nhận lần lượt các phần tử từ mảng ban đầu rồi cộng dồn vào biến tích lũy accumulator. Và vào lần trả về cuối cùng, accumulator sẽ trở thành kết quả cuối cùng thu về từ Array reduce.

Để dễ hiểu hơn, hãy cùng xem cách sử dụng Array reduce trong một số ví dụ sau đây.

Tính tổng các phần tử trong mảng JavaScript bằng Array reduce

Để tính tổng các phần tử trong mảng JavaScript bằng Array reduce, chúng ta sẽ viết chương trình như sau:

let num = [48, 75, 92, 61, 54, 83, 76];
let total = num.reduce(function(accumulator, element){
  return accumulator + element;
}, 0);

console.log(total);
// 489

Trong ví dụ này, chúng ta chỉ định giá trị giá trị ban đầu initialValue của biến tích lũy accumulator bằng 0.

Sau đó, bằng cách dùng hàm callback, chúng ta lần lượt lấy các phần tử element từ trong mảng ban đầu và cộng dồn vào trong biến tích lũy accumulator. Biến accumulator thu được trong kết quả tính toán với phần tử ngay trước đó được chuyển đến trong phép tính với phần tử sau đó. Và cuối cùng, khi tất cả các phần tử được cộng dồn vào biến tích lũy này, kết quả duy nhất là tổng của tất cả chúng sẽ được trả về.

Lưu ý, chúng ta cũng có thể sử dụng arrow function để rút gọn hàm callback, như cách viết sau đây:

let num = [48, 75, 92, 61, 54, 83, 76];
let total = num.reduce((accumulator, element) => (accumulator + element), 0);

console.log(total);
// 489

• Xem thêm: Arrow function - hàm mũi tên trong JavaScript

Tìm phần tử lớn nhất trong mảng JavaScript bằng Array reduce

Chúng ta cũng có thể sử dụng Array reduce để tìm phần tử lớn nhất trong một mảng JavaScript.

Ví dụ:

let num = [48, 75, 92, 61, 54, 83, 76];
let max = num.reduce(function(accumulator, element){
  return (accumulator > element) ? accumulator : element
});

console.log(max);

Trong ví dụ này, chúng ta lược bỏ giá trị giá trị ban đầu initialValue của biến tích lũy accumulator, qua đó gán giá trị đầu tiên của mảng là num[0] = 48 vào biến tích lũy accumulator.

Sau đó, bằng cách dùng hàm callback, chúng ta lần lượt lấy các phần tử element từ trong mảng ban đầu và so sánh với biến tích lũy accumulator. Tại đây, bằng cách sử dụng Toán tử 3 ngôi trong JavaScript, chúng ta so sánh giá trị của biến tích lũy accumulator hiện tại và phần tử element, và trả về biến tích lũy accumulator với giá trị lớn nhất giữa chúng. Số lớn nhất thu được trong kết quả tính toán với phần tử ngay trước đó được chuyển đến trong phép tính với phần tử sau đó. Và cuối cùng, khi tất cả các phần tử đã được so sánh với biến tích lũy, kết quả duy nhất là số lớn nhất trong mảng sẽ được trả về.

Chúng ta cũng có thể sử dụng arrow function để rút gọn hàm callback, như cách viết sau đây:

let num = [48, 75, 92, 61, 54, 83, 76];
const max = num.reduce((accumulator, element) => (accumulator > element ? accumulator : element));
console.log(max); 

// 92

Xóa phần tử trùng trong mảng JavaScript bằng Array reduce

Ứng dụng Array reduce, chúng ta cũng có thể tiến hành Xóa phần tử trùng trong mảng JavaScript.

Dưới đây là chương trình mẫu:

let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let myArrayWithNoDuplicates = myArray.reduce(function (accumulator, element) {
  if (accumulator.indexOf(element) === -1) {
    accumulator.push(element)
  }
  return accumulator
}, [])

console.log(myArrayWithNoDuplicates)
// [ 'a', 'b', 'c', 'e', 'd' ]

Trong ví dụ này, chúng ta chỉ định giá trị giá trị ban đầu initialValue của biến mảng tích lũy accumulator là một mảng rỗng [].

Sau đó, bằng cách dùng hàm callback, chúng ta lần lượt lấy các phần tử element từ trong mảng ban đầu và kiểm tra phần tử element này có trong biến mảng accumulator hay không, thông qua phương thức indexOf trong JavaScript.

Nếu element đã tồn tại trong biến mảng accumulator, phần tử này sẽ được bỏ qua. Còn nếu chưa tồn tại thì sẽ được thêm vào trong accumulator thông qua phương thức push trong JavaScript.

Và mảng accumulator thu được trong kết quả kiểm tra với phần tử ngay trước đó được chuyển đến trong phép tính với phần tử sau đó. Và cuối cùng, khi tất cả các phần tử đã được kiểm tra với biến tích lũy, kết quả duy nhất là mảng accumulator đã được tích lũy chứa các phần tử không trùng nhau trong mảng ban đầu.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng Array reduce trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-reduce-trong-javascript/