Javascript reduce nâng cao || Array.Prototype.Reduce() Tutorial

Nói đến javascript reduce array có thể nhiều bạn hình dung mới chỉ được một phần, hoặc các bạn ít sử dụng đến chúng. Trong bài viết này mình sẽ đề cập nhiều hơn về chức năng hoạt động rất rộng của reduce trong javascript.

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Cộng đồng giới thiệu bài viết, website, sản phẩm tăng traffic.

Trước tiên mình muốn biết các bạn hiểu thể nào về reduce: các bạn có thể xem thêm  Reduce là gì? 

Nhiều bạn cho rằng reduce chỉ có nhiệm vụ tính tổng như code dưới đây: ví dụ tính tổng không dùng recude:

let arr = [1, 2, 3, 4, 5];
let sum = 0;
for(var i = 0; i < arr.length; i++) {
    sum += arr[i];
}
console.log(sum);
ví dụ tính tổng dùng reduce:

let arr = [1, 2, 3, 4, 5];

let sum = arr.reduce((x, y) => x + y);

console.log(sum);


Đấy, mình chỉ ra cho các bạn thấy là các bạn đã đúng nhưng rất tiếc reduce còn cung cấp cho chúng ta các developer javascript nhiều hơn chúng ta nghĩ. và đây mình liệt kê thêm những chức năng của reduce, tất nhiên vẫn là chưa đủ. 

1 - Tính tổng của các giá trị trong một object javascript.

let initialValue = 0;
let objArray = [
{x: 1},
{x: 2},
{x: 3},
{x: 4},
{x: 5},
]
let sum = objArray.reduce(function (total, currentValue) {
return total + currentValue.x;
}, initialValue);

console.log(sum); //15

2 - convert nhiều array to một array

let flattened = [[1, 2], [3, 4], [5, 6]]
.reduce((total, currentValue) => total.concat(currentValue), []);

console.log(flattened); //[1, 2, 3, 4, 5, 6]

3 - Groupby using reduce.

Mình thấy đây là một chức năng là reduce() thực hiện quá tốt với một lênh Group by mà hầu như nó chỉ xuất hiện trong các vấn đề về database. Nhưng Reduce() đã giúp ta làm được điều này không thể chê vào đâu được. Giả sử ta có một array như sau:

let team = [
{name: 'cong phuong', country: 'Viet Nam'},
{name: 'Ronaldo', country: 'Portugal'},
{name: 'Quang Hai', country: 'Viet Nam'},
{name: 'Messi', country: 'Argentina'},
{name: 'Nani', country: 'Portugal'},
]

//Nhiệm vụ chúng ta làm sao nhóm được các cầu thủ by quốc gia.

dùng reduce().

Array.prototype.groupBy = function(prop) {
return this.reduce(function(groups, item) {
const val = item[prop]
groups[val] = groups[val] || []
groups[val].push(item)
return groups
}, {})
}

Cách dùng: team.groupBy('country'); 


4 - Kết luận.

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Cộng đồng giới thiệu bài viết, website, sản phẩm tăng traffic.

Cho dù bạn có thuộc nhóm lập trình nào đi chăng nữa, nhưng khi nói đến reduce() thì bạn cũng phải nắm rõ và cách sử dụng. Đôi khi trong phỏng vấn thì các PM hay hỏi những câu như thế nào để lọc những ứng viên. Cho nên biết nhiều càng hay hơn nhé. 

Nguồn tham khảo: 

https://anonystick.com/blog-developer/tu-hoc-javascript-truong-hop-nao-su-dung-map-filter-reduce-trong-javascript-zzlYN6YR.jsx

https://www.consolelog.io/group-by-in-javascript/

https://appdividend.com/2018/10/16/javascript-reduce-example-tutorial/

https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key/40774906