reduce() trong JavaScript có thể làm được những gì

Hi xin chào các bạn, tiếp tục chuỗi chủ để về JavaScript hôm nay chúng ta sẽ cùng tìm hiểu một method có thể coi là loằng ngoằng nhất khi làm việc với array js đó là reduce(). Ngoài ví dụ điển hình nhất là "tính tổng" thì liệu reduce() có thể làm được những gì,.... Hãy cùng mình tìm hiểu thông qua bài viết này nhé

Nhắc lại một chút thì reduce() dùng để thực thi một hàm lên từng phần tử của mảng (từ trái sang phải) với một biến tích lũy để thu về một giá trị duy nhất

• reduce() KHÔNG làm thay đổi mảng ban đầu
• reduce() trả về giá trị sau khi rút gọn

Cú pháp

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

// callback: Hàm dùng để thực thi với từng phần tử của mảng,
// hàm này nhận vào 4 tham số:

  /* 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 */
  
  /* currentValue: Phần tử trong mảng hiện tại đang được xử lý */
  
  /* index (không bắt buộc): 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,
  Bắt đầu tại 1 nếu không có initialValue */
  
  /* array (không bắt buộc): Mảng đang được gọi với reduce() */
  
  /* initialValue (không bắt buộc nhưng NÊN khai báo nó):
  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ỗi */

Sau đây sẽ là một số ví dụ cũng có thể gọi là những đoạn snippet vô cùng lợi hại giúp ích cho bạn trong quá trình làm việc.

1. Tính tổng, hiệu, tích, thương ...

const accumulation = (...numbers) =>
  numbers.reduce((sum, num) => sum + num, 0);
console.log(accumulation(1, 2, 3, 4, 5)); // > 15

2. Thay thế Array.prototype.reverse()

const reverseArr = (arr = []) =>
  arr.reduceRight((t, v) => (t.push(v), t), []);
console.log(reverseArr([1, 2, 3, 4, 5])); // > Array [5, 4, 3, 2, 1]

3. Thay thế Array.prototype.map()

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

const a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);

console.log(a, b); // > Array [0, 2, 4, 6] Array [0, 2, 4, 6]

4. Thay thế Array.prototype.filter()

const a = arr.filter(v => v > 1);
const b = arr.reduce((t, v) => (v > 1) ? [...t, v] : t, []);

console.log(a, b); // > Array [2, 3] Array [2, 3]

5. Thay thế Array.prototype.some()

const arr = [
    { score: 10, subject: "a" },
    { score: 30, subject: "b" },
    { score: 20, subject: "c" }
];

const a = arr.some(v => v.score >= 20);
const b = arr.reduce((t, v) => t || v.score >= 20, false);

console.log(a, b); // > true true

6. Thay thế Array.prototype.every()

const arr = [
    { score: 10, subject: "a" },
    { score: 30, subject: "b" },
    { score: 20, subject: "c" }
];

const a = arr.every(v => v.score >=20);
const b = arr.reduce((t, v) => t && v.score >= 20, true);

console.log(a, b); // > false false

7. Tìm phần tử khác nhau giữa 2 array

const diffItem = (arr = [], otherArr = []) =>
  arr.reduce((t, v) => (!otherArr.includes(v) && t.push(v), t), []);

const a = [1, 2, 3, 4, 5];
const b = [2, 3, 6];

console.log(diffItem(a, b)); // > Array [1, 4, 5]

8. Chia nhỏ array

const chunkArr = (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 a = [1, 2, 3, 4, 5];

console.log(chunkArr(a, 2)); // > Array [[1, 2], [3, 4], [5]]

9. Ngược lại với thằng thứ 8

const flatArr = (arr = []) => 
  arr.reduce((t, v) => t.concat(Array.isArray(v) ? flatArr(v) : v), [])

const a = [0, 1, [2, 3], [4, 5, [6, 7]], [8, [9, 10, [11, 12]]]];

console.log(flatArr(a));
// > Array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

10. Loại bỏ phần tử trùng lặp

const uniq = (arr = []) =>
  arr.reduce((t, v) => t.includes(v) ? t : [...t, v], []);

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

console.log(uniq(a)); // > Array [2, 1, 0, 3]

Tạm kết

Cũng khá dài rồi, đọc nhiều cũng đau hết đầu =)) mình tạm dừng bài viết tại đây nhé, hẹn các bạn ở phần tiếp theo với những thứ hay ho với reduce() nhé

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !