Reduce javascript - Mổ xẻ xem cách hoạt động

Nội dung bài viết

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?

Reduce JavaScript là gì?

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ị.

Reduce syntax javascript

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.

Exploring Array Reduce in JavaScript

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

Có thể bạn đã bị missing