What can reduce () in JavaScript do

Saturday, 21/11/2020

Tram Ho

Hi guys, continuing on the topic of JavaScript today, we will look at a method that can be considered the most cumbersome when working with array js that is reduce() . In addition to the most typical example is “summing”, then what can reduce() can do, …. Let me learn through this article.

Again, reduce() used to execute a function on each element of the array (from left to right) with a cumulative variable to return a unique value.

reduce () DOES NOT change the original array
Reduce () returns the value after reduction

Syntax

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 */

Here are some examples also called snippets extremely beneficial to help you during your work.

1. Calculate the sum, difference, product, quotient …

<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. Replace `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. Replace `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. Replace `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. Replace `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. Replace `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. Find the difference between the 2 arrays

<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. Split up the 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. Contrast with the 8th guy

<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. Eliminate duplicate elements

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

Conclusion

It’s also quite long, reading a lot is also painful =)) I pause the article here, see you in the next section with interesting things with reduce()

If you find a good article, give me +1 upvote. If you like me, please press the follow button for more cool things. Good luck !

Share the news now

Source : Viblo

What can reduce () in JavaScript do

1. Calculate the sum, difference, product, quotient …

2. Replace `Array.prototype.reverse()`

3. Replace `Array.prototype.map()`

4. Replace `Array.prototype.filter()`

5. Replace `Array.prototype.some()`

6. Replace `Array.prototype.every()`

7. Find the difference between the 2 arrays

8. Split up the array

9. Contrast with the 8th guy

10. Eliminate duplicate elements

Conclusion

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

1. Calculate the sum, difference, product, quotient …

2. Replace Array.prototype.reverse()

3. Replace Array.prototype.map()

4. Replace Array.prototype.filter()

5. Replace Array.prototype.some()

6. Replace Array.prototype.every()

7. Find the difference between the 2 arrays

8. Split up the array

9. Contrast with the 8th guy

10. Eliminate duplicate elements

Conclusion

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

2. Replace `Array.prototype.reverse()`

3. Replace `Array.prototype.map()`

4. Replace `Array.prototype.filter()`

5. Replace `Array.prototype.some()`

6. Replace `Array.prototype.every()`