Hướng dẫn reduce group by javascript - giảm nhóm bằng javascript

Nội dung bài viết

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

Ở 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

#

    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

    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

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

#

    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

    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

    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

#

    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

    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

    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

    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

#

    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

    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

    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

    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

#

    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

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 đó.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 MethodReduce 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 MethodJavaScript 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é. 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é. 

Nội dung bài viết

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

Reduce javascript - Qua một cuộc khảo sát về độ khó của các method thì 90% câu trả lời đó chính là reduce method. Không quá bất ngờ, bời vì sử dụng reduce gây hiểu nhầm nhất, và cũng gây khó hiểu nhất trong các method. Lý do vì sao? Tôi sẽ nói cho các bạn nghe ngay dưới đây.

Nói về Reduce thì thật ra đây là một method được những devjs nhiều kinh nghiệm hay sử dụng nhiều nhất, bởi vì nó có thể thay thế cho nhiều method khác mà tôi sắp trình bày dưới đây. Cho dù trong bất cứ hoảnh cảnh nào, ý tôi ở đây là có thể nhiều trường hợp không thể sử dụng map() or filter() thì reduce thay thế là một phương án tuyệt vời. 

Qua bài viết về "Mổ xẻ cú pháp reduce javascript" thì ở đó bất cứ bạn nào cũng đã hiểu về syntax reduce method rồi. Và bây giờ dưới đây sẽ có 25 cách sử dụng reduce trong thực tế cho lập trình javascript. Đừng từ bỏ nó, chỉ vì reduce khó sử dung, hay xem đây...

Reduce trong Javascript - 25 cách sử dụng

Có thể sắp xếp dưới dây không phù hợp đối với mỗi lập trình bạn có thể tuỳ chỉnh cho các nhân của bạn nếu cần thiết.

Tính tổng và tích của array sử dụng reduce javascript

    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ế Reverse()

    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ế map() or 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ế some() or every()

    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

chunk array

    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

sử dụng reduce tìm phần tử khác nhau giữa hai array

    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

Chèn phần từ vào một array cho trước sử dụng reduce

    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

Làm phẳng một array sử dụng reduce

    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

Array trùng lặp phần tử sử dụng reduce

    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ế max() và min()

    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

Tách phần tử trong Array theo đúng type of

    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

Đếm số lượng giống nhau trong một array sử dụng recude

    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

group by use reduce

    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

Thống kê xem các từ khoá có trong array hay không?

    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

Định dang số thập phân sử dụng reduce

    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

Parse url use reduce

    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

Phân tích một Object sang params url

    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

Get value của key của một Object cho trước

    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

Chuyển đổi một array object sang object sử dụng redcuce

    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

Hiệu suất khi sử dụng reduce javascript

Có nhiều câu hỏi tôi thường thấy và cũng có nhiều câu hỏi tương tự như vậy đó là hiệu suất khi thay thế reduce như thế nào khi sử dụng. Câu trả lời là khó nhận biết, bởi vì nó tuỳ thuộc và trường hợp bạn sử dụng, vào hoàn cảnh... Nhưng tôi có thể lấy một ví dụ dưới đây sử dụng 4 method đó là

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},[[]]))

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},[[]]))

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},[[]]))

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},[[]]))

    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

Kết quả test

for loop javascript

reduce loop javascript

map javascript

Và hình ảnh kết quả cho ta thấy reduce trong trường hợp này là có hiệu suất tốt hơn hẳn. Chính vì vậy tôi cũng đã nói nó tuỳ thuộc vào nhiều yếu tố hay skill của bạn. Ví dụ bạn khai báo length trước khi sử dụng for kết quả có thể cho khác đấy! Chú ý kết quả test trên console chrome 83. Macbook 2019. Chú ý kết quả test trên console chrome 83. Macbook 2019. 

Như vậy rất nhiều bài viết về "reduce javascript" và có thể đến đây là bạn có thể phào nhẹ nhõm khi vào một trường hợp nào đấy bắt buộc bạn phải sử dụng reduce trong ứng dụng của bạn. Bài viết chỉ khám phá bản thân cũng như tổng hợp kiến thức. Nếu bạn có một câu hỏi hay có ý kiến gì thì vui lòng pm vào fan page tips javascript. Cảm ơn đã đọc bài viết.