Hướng dẫn one line reduce javascript - giảm một dòng javascript

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

function Accumulation[...vals] {
    return vals.reduce[[t, v] => t + v, 0];
}

function Multiplication[...vals] {
    return vals.reduce[[t, v] => t * v, 1];
}

Accumulation[1, 2, 3, 4, 5]; // 15
Multiplication[1, 2, 3, 4, 5]; // 120

Reduce thay thế Reverse[]

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

reduce thay thế map[] or filter[]

const arr = [0, 1, 2, 3];

//map: [0, 2, 4, 6]
const a = arr.map[v => v * 2];
const b = arr.reduce[[t, v] => [...t, v * 2], []];

//filter: [2, 3]
const c = arr.filter[v => v > 1];
const d = arr.reduce[[t, v] => v > 1 ? [...t, v] : t, []];

// reduce chấp cả hai map + fitler
const e = arr.map[v => v * 2].filter[v => v > 2];
const f = arr.reduce[[t, v] => v * 2 > 2 ? [...t, v * 2] : t, []];

reduce thay thế some[] or every[]

const scores = [
    { score: 45, subject: "chinese" },
    { score: 90, subject: "math" },
    { score: 60, subject: "english" }
];

//some
const isAtLeastOneQualified = scores.reduce[[t, v] => t || v.score >= 60, false]; // true

//every
const isAllQualified = scores.reduce[[t, v] => t && v.score >= 60, true]; // false

chunk array

function Chunk[arr = [], size = 1] {
    return arr.length ? arr.reduce[[t, v] => [t[t.length - 1].length === size ? t.push[[v]] : t[t.length - 1].push[v], t], [[]]] : [];
}

const arr = [1, 2, 3, 4, 5];
Chunk[arr, 2]; // [[1, 2], [3, 4], [5]]

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

function Difference[arr = [], oarr = []] {
    return arr.reduce[[t, v] => [!oarr.includes[v] && t.push[v], t], []];
}

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 6]
Difference[arr1, arr2]; // [1, 4, 5]

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

function Fill[arr = [], val = "", start = 0, end = arr.length] {
    if [start < 0 || start >= end || end > arr.length] return arr;
    return [
        ...arr.slice[0, start],
        ...arr.slice[start, end].reduce[[t, v] => [t.push[val || v], t], []],
        ...arr.slice[end, arr.length]
    ];
}
const arr = [0, 1, 2, 3, 4, 5, 6];
Fill[arr, "aaa", 2, 5]; // [0, 1, "aaa", "aaa", "aaa", 5, 6]

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

function Flat[arr = []] {
    return arr.reduce[[t, v] => t.concat[Array.isArray[v] ? Flat[v] : v], []]
}
const arr = [0, 1, [2, 3], [4, 5, [6, 7]], [8, [9, 10, [11, 12]]]];
Flat[arr]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

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

function Uniq[arr = []] {
    return arr.reduce[[t, v] => t.includes[v] ? t : [...t, v], []];
}
const arr = [2, 1, 0, 3, 2, 1, 2];
Uniq[arr]; // [2, 1, 0, 3]

Reduce thay thế max[] và min[]

function Max[arr = []] {
    return arr.reduce[[t, v] => t > v ? t : v];
}

function Min[arr = []] {
    return arr.reduce[[t, v] => t < v ? t : v];
}
const arr = [12, 45, 21, 65, 38, 76, 108, 43];
Max[arr]; // 108
Min[arr]; // 12

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

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

group by use reduce

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

Parse url use reduce

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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à

const arr = [0, 1, 2, 3];

//map: [0, 2, 4, 6]
const a = arr.map[v => v * 2];
const b = arr.reduce[[t, v] => [...t, v * 2], []];

//filter: [2, 3]
const c = arr.filter[v => v > 1];
const d = arr.reduce[[t, v] => v > 1 ? [...t, v] : t, []];

// reduce chấp cả hai map + fitler
const e = arr.map[v => v * 2].filter[v => v > 2];
const f = arr.reduce[[t, v] => v * 2 > 2 ? [...t, v * 2] : t, []];

const arr = [0, 1, 2, 3];

//map: [0, 2, 4, 6]
const a = arr.map[v => v * 2];
const b = arr.reduce[[t, v] => [...t, v * 2], []];

//filter: [2, 3]
const c = arr.filter[v => v > 1];
const d = arr.reduce[[t, v] => v > 1 ? [...t, v] : t, []];

// reduce chấp cả hai map + fitler
const e = arr.map[v => v * 2].filter[v => v > 2];
const f = arr.reduce[[t, v] => v * 2 > 2 ? [...t, v * 2] : t, []];

const arr = [0, 1, 2, 3];

//map: [0, 2, 4, 6]
const a = arr.map[v => v * 2];
const b = arr.reduce[[t, v] => [...t, v * 2], []];

//filter: [2, 3]
const c = arr.filter[v => v > 1];
const d = arr.reduce[[t, v] => v > 1 ? [...t, v] : t, []];

// reduce chấp cả hai map + fitler
const e = arr.map[v => v * 2].filter[v => v > 2];
const f = arr.reduce[[t, v] => v * 2 > 2 ? [...t, v * 2] : t, []];

2 và

const arr = [0, 1, 2, 3];

//map: [0, 2, 4, 6]
const a = arr.map[v => v * 2];
const b = arr.reduce[[t, v] => [...t, v * 2], []];

//filter: [2, 3]
const c = arr.filter[v => v > 1];
const d = arr.reduce[[t, v] => v > 1 ? [...t, v] : t, []];

// reduce chấp cả hai map + fitler
const e = arr.map[v => v * 2].filter[v => v > 2];
const f = arr.reduce[[t, v] => v * 2 > 2 ? [...t, v * 2] : t, []];

function Reverse[arr = []] {
    return arr.reduceRight[[t, v] => [t.push[v], t], []];
}
Reverse[[1, 2, 3, 4, 5]]; // [5, 4, 3, 2, 1]

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.