Video học lập trình mỗi ngày

Reduce javascript gần đây được sử dụng rộng rãi và phổ biến rất nhiều, đến nỗi keyword này nằm top về lượt tìm kiếm liên quan đến cụm từ javascript. Ở Tipjs đã có rất nhiều bài viết về reduce và cũng đưa ra nhiều ví dụ và khi nào sử dụng. Nhưng riêng bài này sẽ giúp bạn khám phá cách thức nó hoạt động thế nào?

Làm thế nào để sử dụng hàm reduce trong lập trình Javascript?

Câu hỏi muôn thủa khi học và tìm kiếm một kiến thức gì đó, không hề thừa và không hề thiếu trong bất kỳ bài viết nào? Reduce JavaScript là một method có trong Array.prototype được giới thiệu từ ES6 hay còn gọi là ECMAScript 5, và hiện tại support trên các browser hiện đại.

Và một điều thú vị nữa là, tipjs nhận được nhiều câu hỏi nhất về "Reduce javascript" này. Array Reduce là một trong những phương thức khó hiểu và gây nhầm lẫn đối với developer nào khác. Chính vì lẽ đó, hôm nay chúng ta sẽ khám phá nó và hiểu bản chất của nó nhằm không gây ra sự hiểu lầm đáng tiếc nào nữa.

Notes: Ngãy nghĩ đơn giản thế này, đó là Hàm reduce trong js giúp ta giảm một array thành một giá trị.

Cách sử dụng reduce js và các ví dụ đơn giản

OK, để xem cú pháp của nó như thế nào?

const reducedValue = array.reduce((prev, next, index, array) => {...}, initialValue);

reducedValue chứa nhiều value trong reduce, thông thường thì sẽ trả về một number, nhưng ở trường hợp khác nâng cao hơn. Bạn có thể tìm thấy những ví dụ Tìm hiểu sâu về array reduce trọng javascript

Trong đó:

prev: hay còn gọi là accumulator - biến tích lũy, truyền giá trị trả về của mỗi lần gọi callback; nó là giá trị tích lũy được trả về trong lần gọi callback trước, hoặc giá trị của tham số initialValue, nếu được cung cấp

next: hay còn gọi là currentValue Phần tử trong mảng hiện tại đang được xử lý.

index (Optional): Chỉ mục (index) của phần tử đang được xử lý. Bắt đầu tại 0, nếu giá trị initialValue được cung cấp, và tại 1 nếu không có initialValue.

array (Optional): Mảng đang được gọi với reduce().

initialValue: Giá trị cho tham số thứ nhất (accumulator) của hàm callback trong lần gọi đầu tiên. Nếu giá trị ban đầu này không được cung cấp, phần tử đầu tiên của mảng sẽ được dùng. Do đó, gọi reduce() trên một mảng rỗng và không có giá trị ban đầu sẽ gây ra lỗ

Lấy ví dụ từ developer.mozilla.org

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue;
}, 10);

Xem giải thích dưới đây.

Rất đơn giản phải không? Chúng ta tiếp tục xem một ví dụ nữa,/p>

const reduced = [1, 2, 3, 4, 5].reduce((prev, next) => {
  console.log(prev, next);
  return prev + next;
}, 0);

Ouput console ta thấy tiếp

0   1   // 0  = initial value,             1 = first array item
1   2   // 1  = previous result (0 + 1)    2 = second array item
3   3   // 3  = previous result (1 + 2)    3 = third array item
6   4   // 6  = previous result (3 + 3)    4 = fourth array item
10  5   // 10 = previous result (6 + 4)    5 = fifth array item

Giờ đây qua rõ ràng, nếu bạn cảm thấy còn bế tắc nữa thì chúng ta sẽ tách nó ra như thế này.

// native reduce function

const numbers = \[1, 2, 3, 4, 5\]

const sumReducer = (initialValue, current) => initialValue + current;

const sumOfNumbersNative = numbers.reduce(sumReducer, 0)

console.log('Native reduce function, ' + sumOfNumbersNative)

Các bạn có thể tách ra như những cách ở trên sumReducer, kết quả sumOfNumbersNative mình đạt được.

Lời kết

Nếu từng đó mà thực sự chưa giúp được các bạn để hiểu về reduce javascript, thì tôi khuyên bạn tìm hiểu thêm nhiều ví dụ nữa. Bạn có thể tìm thấy ở đây Resource

• Array Reduce
• Tìm hiểu sâu về JavaScript Reduce Method
• Javascript reduce nâng cao || Array.Prototype.Reduce() Tutorial
• Trường hợp nào sử dụng map, filter, reduce trong javascript