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

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.

Reduce Javascript là gì?

Ở bài viết này "Phân tích của pháp của reduce javascript" tipjs cũng đã nói rất rõ về method Reduce rồi, bạn có thể xem lại nếu thực sự chưa hiểu về cú pháp của reduce. Xong bài viết này tôi muốn bạn sẽ xem cách 25 cách sử dụng reduce javascript.

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ì? 

reduce javascript thay thế Higher Order Function

# reduce() thay thế cho map()

const arr = [{name:'Amy'},{name:'Bob'}];
    arr.map(it=>it.name); // map
    arr.reduce((c,n)=>[...c,n.name],[]); // reduce

# reduce() thay thế cho filter()

    const arr = [{name:'Amy',age:18},{name:'Bob',age:20}];
    arr.filter(it=>it.age>18); // filter
    arr.reduce((c,n)=>n.age>18? [...c,n]:c,[]); // reduce

# reduce() thay thế cho map() + filter()

    const arr = [{name:'Amy',age:18},{name:'Bob',age:20}];
    arr.filter(it=>it.age>18).map(it=>it.name); // 
    arr.reduce((c,n)=>n.age>18? [...c,n.name]:c,[]); // reduce   Bob

# reduce() thay thế cho some() or every()

    const arr = [{name:'Amy',age:18},{name:'Bob',age:20}];
    arr.reduce((c,n)=>c||n.age>18 , false); // some
     arr.reduce((c,n)=>c&&n.age>18 , true); // every

# reduce() [1,2,3,4] => [[1,2], [3,4]] 

console.log( [1,2,3,4].reduce((c,n)=>{c[c.length-1].length>=2?c.push([n]):c[c.length-1].push(n);return c},[[]]))

Ví dụ về reduce javascript

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 25 cách sử dụng reduce javascript., tất nhiên vẫn là chưa đủ. 

Ngoài ra chúng tôi có một bài viết rất sâu về Reduce Javascript Method hy vọng các bạn sẽ không bỏ qua bài viết đó.

Tính tổng của các giá trị trong một Reduce 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

convert nhiều array to một array fitler reduce javascrip

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

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

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. Đọc thêm: Reduce Javascript Method

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'); 

Xem thêm về cách dùng reduce javascript: JavaScript Reduce Method

Kết luận

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 Javascript Method 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é.