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

Thứ Bảy, 21/11/2020

Tram Ho

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<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span>accumulator<span class="token punctuation">,</span> currentValue<span class="token punctuation">[</span><span class="token punctuation">,</span> index<span class="token punctuation">[</span><span class="token punctuation">,</span> array<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">,</span> initialValue<span class="token punctuation">]</span><span class="token punctuation">)</span>

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

  <span class="token comment">/* 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 */</span>
  
  <span class="token comment">/* currentValue: Phần tử trong mảng hiện tại đang được xử lý */</span>
  
  <span class="token comment">/* 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 */</span>
  
  <span class="token comment">/* array (không bắt buộc): Mảng đang được gọi với reduce() */</span>
  
  <span class="token comment">/* 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 */</span>

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 …

<span class="token keyword">const</span> <span class="token function-variable function">accumulation</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>numbers</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">sum<span class="token punctuation">,</span> num</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> sum <span class="token operator">+</span> num<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">accumulation</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; 15</span>

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()`

<span class="token keyword">const</span> <span class="token function-variable function">reverseArr</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  arr<span class="token punctuation">.</span><span class="token function">reduceRight</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">,</span> t<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">reverseArr</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; Array [5, 4, 3, 2, 1]</span>

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()`

<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> a <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> v <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span><span class="token operator">...</span>t<span class="token punctuation">,</span> v <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; Array [0, 2, 4, 6] Array [0, 2, 4, 6]</span>

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()`

<span class="token keyword">const</span> a <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> v <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>v <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token operator">...</span>t<span class="token punctuation">,</span> v<span class="token punctuation">]</span> <span class="token operator">:</span> t<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; Array [2, 3] Array [2, 3]</span>

const a = arr.filter(v => v > 1);

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

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

<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> score<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> subject<span class="token operator">:</span> <span class="token string">"a"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> score<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> subject<span class="token operator">:</span> <span class="token string">"b"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> score<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> subject<span class="token operator">:</span> <span class="token string">"c"</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> a <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> v<span class="token punctuation">.</span>score <span class="token operator">&gt;=</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> t <span class="token operator">||</span> v<span class="token punctuation">.</span>score <span class="token operator">&gt;=</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; true true</span>

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

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

<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> score<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> subject<span class="token operator">:</span> <span class="token string">"a"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> score<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> subject<span class="token operator">:</span> <span class="token string">"b"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> score<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> subject<span class="token operator">:</span> <span class="token string">"c"</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> a <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> v<span class="token punctuation">.</span>score <span class="token operator">&gt;=</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> t <span class="token operator">&amp;&amp;</span> v<span class="token punctuation">.</span>score <span class="token operator">&gt;=</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; false false</span>

const arr = [

];

const a = arr.every(v => v.score >=20);

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

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

<span class="token keyword">const</span> <span class="token function-variable function">diffItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> otherArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token operator">!</span>otherArr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> t<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">,</span> t<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">diffItem</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; Array [1, 4, 5]</span>

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

<span class="token keyword">const</span> <span class="token function-variable function">chunkArr</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> size <span class="token operator">=</span> <span class="token number">1</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> arr<span class="token punctuation">.</span>length
    <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
        t<span class="token punctuation">[</span>t<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length <span class="token operator">===</span> size
          <span class="token operator">?</span> t<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span>v<span class="token punctuation">]</span><span class="token punctuation">)</span>
          <span class="token operator">:</span> t<span class="token punctuation">[</span>t<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">,</span> t<span class="token punctuation">)</span>
      <span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">chunkArr</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; Array [[1, 2], [3, 4], [5]]</span>

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)

, [[]])

: [];

}

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

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

<span class="token keyword">const</span> <span class="token function-variable function">flatArr</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> 
  arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> t<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">flatArr</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">:</span> v<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">flatArr</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// &gt; Array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]</span>

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

<span class="token keyword">const</span> <span class="token function-variable function">uniq</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> t<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">?</span> t <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>t<span class="token punctuation">,</span> v<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">uniq</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &gt; Array [2, 1, 0, 3]</span>

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 !

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

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

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

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

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

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

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

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

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

8. Chia nhỏ array

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

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

Tạm kết

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

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

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

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

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

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

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

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

8. Chia nhỏ array

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

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

Tạm kết

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

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

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

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

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

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