Top JavaScript Snippets you should try once said

Thursday, 04/02/2021

Tram Ho

Hello everyone, continuing today’s series of JS topics, I would like to share with you some interesting snippets to help us increase work efficiency, improve code quality. Let’s get started (go)

1. Random element in array

<span class="token keyword">const</span> <span class="token function-variable function">random</span> <span class="token operator">=</span> <span class="token parameter">arr</span> <span class="token operator">=&gt;</span> arr <span class="token punctuation">[</span> Math <span class="token punctuation">.</span> <span class="token function">floor</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">random</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">*</span> arr <span class="token punctuation">.</span> length <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">random</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">,</span> <span class="token number">11</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; 3 or 7 or 9 or 11</span>

const random = arr => arr [ Math . floor ( Math . random ( ) * arr . length ) ] ;

console . log ( random ( [ 3 , 7 , 9 , 11 ] ) ) ; // > 3 or 7 or 9 or 11

2. Round the number of decimals

<span class="token keyword">const</span> <span class="token function-variable function">round</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">n <span class="token punctuation">,</span> decimals <span class="token operator">=</span> <span class="token number">0</span></span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">Number</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> Math <span class="token punctuation">.</span> <span class="token function">round</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> n <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">e</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> decimals <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">e-</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> decimals <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></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">round</span> <span class="token punctuation">(</span> <span class="token number">1.005</span> <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; 1.01</span>

const round = ( n , decimals = 0 ) => Number ( ` ${ Math . round ( ` ${ n } e ${ decimals } ` ) } e- ${ decimals } ` ) ;

console . log ( round ( 1.005 , 2 ) ) ; // > 1.01

3. Reverse the chain

<span class="token keyword">const</span> <span class="token function-variable function">reverseString</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span> <span class="token operator">...</span> str <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">reverse</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">join</span> <span class="token punctuation">(</span> <span class="token string">''</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">reverseString</span> <span class="token punctuation">(</span> <span class="token string">'foobar'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// &gt; "raboof"</span>

const reverseString = str => [ ... str ] . reverse ( ) . join ( '' ) ;

console . log ( reverseString ( 'foobar' ) ) ; // > "raboof"

4. Random number in a range of values

<span class="token keyword">const</span> <span class="token function-variable function">randomNumberInRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">min <span class="token punctuation">,</span> max</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Math <span class="token punctuation">.</span> <span class="token function">random</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span> max <span class="token operator">-</span> min <span class="token punctuation">)</span> <span class="token operator">+</span> min <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">randomNumberInRange</span> <span class="token punctuation">(</span> <span class="token number">2</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 punctuation">;</span> <span class="token comment">// &gt; 4.461277106397043</span>

const randomNumberInRange = ( min , max ) => Math . random ( ) * ( max - min ) + min ;

console . log ( randomNumberInRange ( 2 , 10 ) ) ; // > 4.461277106397043

5. Random number types of integers in a range of values

<span class="token keyword">const</span> <span class="token function-variable function">randomIntegerInRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">min <span class="token punctuation">,</span> max</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Math <span class="token punctuation">.</span> <span class="token function">floor</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">random</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span> max <span class="token operator">-</span> min <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> min <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">randomIntegerInRange</span> <span class="token punctuation">(</span> <span class="token number">0</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 punctuation">;</span> <span class="token comment">// &gt; 4</span>

const randomIntegerInRange = ( min , max ) => Math . floor ( Math . random ( ) * ( max - min + 1 ) ) + min ;

6. Random hex color code

<span class="token keyword">const</span> <span class="token function-variable function">randomHexColorCode</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> n <span class="token operator">=</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">random</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">0xfffff</span> <span class="token operator">*</span> <span class="token number">1000000</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token number">16</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token string">'#'</span> <span class="token operator">+</span> n <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">6</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">randomHexColorCode</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; "#346ff8"</span>

const randomHexColorCode = ( ) => {

let n = ( Math . random ( ) * 0xfffff * 1000000 ) . toString ( 16 ) ;

return '#' + n . slice ( 0 , 6 ) ;

} ;

7. Convert radians to deg

<span class="token keyword">const</span> <span class="token function-variable function">radsToDegrees</span> <span class="token operator">=</span> <span class="token parameter">rad</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span> rad <span class="token operator">*</span> <span class="token number">180.0</span> <span class="token punctuation">)</span> <span class="token operator">/</span> Math <span class="token punctuation">.</span> <span class="token constant">PI</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">radsToDegrees</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token constant">PI</span> <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 comment">// &gt; 90</span>

const radsToDegrees = rad => ( rad * 180.0 ) / Math . PI ;

console . log ( radsToDegrees ( Math . PI / 2 ) ) ; // > 90

8. Find the smallest element in the array

<span class="token keyword">const</span> <span class="token function-variable function">minN</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">arr <span class="token punctuation">,</span> n <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 operator">...</span> arr <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">sort</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">a <span class="token punctuation">,</span> b</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> n <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">minN</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 punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>    <span class="token comment">// &gt; Array [1]</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">minN</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 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]</span>

const minN = ( arr , n = 1 ) => [ ... arr ] . sort ( ( a , b ) => a - b ) . slice ( 0 , n ) ;

console . log ( minN ( [ 1 , 2 , 3 ] ) ) ; // > Array [1]

console . log ( minN ( [ 1 , 2 , 3 ] , 2 ) ) ; // > Array [1, 2]

9. Find the largest element in the array

<span class="token keyword">const</span> <span class="token function-variable function">maxN</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">arr <span class="token punctuation">,</span> n <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 operator">...</span> arr <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">sort</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">a <span class="token punctuation">,</span> b</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> b <span class="token operator">-</span> a <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> n <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">maxN</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 punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>    <span class="token comment">// &gt; Array [3]</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">maxN</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 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 [3, 2]</span>

const maxN = ( arr , n = 1 ) => [ ... arr ] . sort ( ( a , b ) => b - a ) . slice ( 0 , n ) ;

console . log ( maxN ( [ 1 , 2 , 3 ] ) ) ; // > Array [3]

console . log ( maxN ( [ 1 , 2 , 3 ] , 2 ) ) ; // > Array [3, 2]

10. Find the min date

<span class="token keyword">const</span> <span class="token function-variable function">minDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token operator">...</span> dates</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">min</span> <span class="token punctuation">.</span> <span class="token function">apply</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token operator">...</span> dates <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2017</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">13</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
  <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2018</span> <span class="token punctuation">,</span> <span class="token number">2</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 keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2016</span> <span class="token punctuation">,</span> <span class="token number">0</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 keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2016</span> <span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">9</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">minDate</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 comment">// &gt; Sat Jan 09 2016 00:00:00 GMT+0700 (Indochina Time)</span>

const minDate = ( ... dates ) => new Date ( Math . min . apply ( null , ... dates ) ) ;

const array = [

new Date ( 2017 , 4 , 13 ) ,

new Date ( 2018 , 2 , 12 ) ,

new Date ( 2016 , 0 , 10 ) ,

new Date ( 2016 , 0 , 9 ) ,

] ;

11. Find the max date

<span class="token keyword">const</span> <span class="token function-variable function">maxDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token operator">...</span> dates</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">max</span> <span class="token punctuation">.</span> <span class="token function">apply</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token operator">...</span> dates <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2017</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">13</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
  <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2018</span> <span class="token punctuation">,</span> <span class="token number">2</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 keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2016</span> <span class="token punctuation">,</span> <span class="token number">0</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 keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2016</span> <span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">9</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">maxDate</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 comment">// &gt; Mon Mar 12 2018 00:00:00 GMT+0700 (Indochina Time)</span>

const maxDate = ( ... dates ) => new Date ( Math . max . apply ( null , ... dates ) ) ;

const array = [

new Date ( 2016 , 0 , 9 ) ,

] ;

12. Compare 2 obj

<span class="token keyword">const</span> <span class="token function-variable function">matches</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">obj <span class="token punctuation">,</span> source</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  Object <span class="token punctuation">.</span> <span class="token function">keys</span> <span class="token punctuation">(</span> source <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">every</span> <span class="token punctuation">(</span> <span class="token parameter">key</span> <span class="token operator">=&gt;</span> obj <span class="token punctuation">.</span> <span class="token function">hasOwnProperty</span> <span class="token punctuation">(</span> key <span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> obj <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token operator">===</span> source <span class="token punctuation">[</span> key <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">matches</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> age <span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">,</span> hair <span class="token operator">:</span> <span class="token string">'long'</span> <span class="token punctuation">,</span> beard <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> hair <span class="token operator">:</span> <span class="token string">'long'</span> <span class="token punctuation">,</span> beard <span class="token operator">:</span> <span class="token boolean">true</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; true</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">matches</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> hair <span class="token operator">:</span> <span class="token string">'long'</span> <span class="token punctuation">,</span> beard <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> age <span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">,</span> hair <span class="token operator">:</span> <span class="token string">'long'</span> <span class="token punctuation">,</span> beard <span class="token operator">:</span> <span class="token boolean">true</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; false</span>

const matches = ( obj , source ) =>

Object . keys ( source ) . every ( key => obj . hasOwnProperty ( key ) && obj [ key ] === source [ key ] ) ;

console . log ( matches ( { age : 25 , hair : 'long' , beard : true } , { hair : 'long' , beard : true } ) ) ; // > true

console . log ( matches ( { hair : 'long' , beard : true } , { age : 25 , hair : 'long' , beard : true } ) ) ; // > false

13. Validate JSON

<span class="token keyword">const</span> <span class="token function-variable function">isValidJSON</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token constant">JSON</span> <span class="token punctuation">.</span> <span class="token function">parse</span> <span class="token punctuation">(</span> str <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> e <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</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">isValidJSON</span> <span class="token punctuation">(</span> <span class="token string">'{"name":"Adam","age":20}'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// &gt; true</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">isValidJSON</span> <span class="token punctuation">(</span> <span class="token string">'{"name":"Adam",age:"20"}'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// &gt; false</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">isValidJSON</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>                       <span class="token comment">// &gt; true</span>

const isValidJSON = str => {

try {

JSON . parse ( str ) ;

return true ;

} catch ( e ) {

return false ;

}

} ;

console . log ( isValidJSON ( '{"name":"Adam","age":20}' ) ) ; // > true

console . log ( isValidJSON ( '{"name":"Adam",age:"20"}' ) ) ; // > false

console . log ( isValidJSON ( null ) ) ; // > true

14. isBrowser

The following code is used to determine if the current running environment is a browser or not

<span class="token keyword">const</span> <span class="token function-variable function">isBrowser</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span> <span class="token punctuation">[</span> <span class="token keyword">typeof</span> window <span class="token punctuation">,</span> <span class="token keyword">typeof</span> document <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> <span class="token string">'undefined'</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">isBrowser</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; true (browser)</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">isBrowser</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; false (Node)</span>

const isBrowser = ( ) => ! [ typeof window , typeof document ] . includes ( 'undefined' ) ;

console . log ( isBrowser ( ) ) ; // > true (browser)

15. Compare characters between two strings

<span class="token keyword">const</span> <span class="token function-variable function">isAnagram</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">str1 <span class="token punctuation">,</span> str2</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token function-variable function">normalize</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=&gt;</span>
    str
      <span class="token punctuation">.</span> <span class="token function">toLowerCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
      <span class="token punctuation">.</span> <span class="token function">replace</span> <span class="token punctuation">(</span> <span class="token regex">/[^a-z0-9]/gi</span> <span class="token punctuation">,</span> <span class="token string">''</span> <span class="token punctuation">)</span>
      <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span>
      <span class="token punctuation">.</span> <span class="token function">sort</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
      <span class="token punctuation">.</span> <span class="token function">join</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token function">normalize</span> <span class="token punctuation">(</span> str1 <span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token function">normalize</span> <span class="token punctuation">(</span> str2 <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">isAnagram</span> <span class="token punctuation">(</span> <span class="token string">'iceman'</span> <span class="token punctuation">,</span> <span class="token string">'cinema'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>  <span class="token comment">// &gt; true</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">isAnagram</span> <span class="token punctuation">(</span> <span class="token string">'iceman'</span> <span class="token punctuation">,</span> <span class="token string">'cinemal'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// &gt; false</span>

const isAnagram = ( str1 , str2 ) => {

const normalize = str =>

str

. toLowerCase ( )

. replace ( /[^a-z0-9]/gi , '' )

. split ( '' )

. sort ( )

. join ( '' ) ;

return normalize ( str1 ) === normalize ( str2 ) ;

} ;

console . log ( isAnagram ( 'iceman' , 'cinema' ) ) ; // > true

console . log ( isAnagram ( 'iceman' , 'cinemal' ) ) ; // > false

16. Check the data type

<span class="token keyword">const</span> <span class="token function-variable function">is</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">type <span class="token punctuation">,</span> val</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span> <span class="token punctuation">[</span> <span class="token punctuation">,</span> <span class="token keyword">null</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> val <span class="token punctuation">.</span> constructor <span class="token operator">===</span> type <span class="token punctuation">;</span>

<span class="token function">is</span> <span class="token punctuation">(</span> Array <span class="token punctuation">,</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 punctuation">;</span>                     <span class="token comment">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> ArrayBuffer <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">ArrayBuffer</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">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> Map <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Map</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">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> RegExp <span class="token punctuation">,</span> <span class="token regex">/./g</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>                   <span class="token comment">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> Set <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Set</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">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> WeakMap <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">WeakMap</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">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> WeakSet <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">WeakSet</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">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> String <span class="token punctuation">,</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>                     <span class="token comment">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> String <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">String</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>         <span class="token comment">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> Number <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>                      <span class="token comment">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> Number <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Number</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 punctuation">;</span>          <span class="token comment">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> Boolean <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>                  <span class="token comment">// true</span>
<span class="token function">is</span> <span class="token punctuation">(</span> Boolean <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Boolean</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>     <span class="token comment">// true</span>

const is = ( type , val ) => ! [ , null ] . includes ( val ) && val . constructor === type ;

is ( Array , [ 1 ] ) ; // true

is ( ArrayBuffer , new ArrayBuffer ( ) ) ; // true

is ( Map , new Map ( ) ) ; // true

is ( RegExp , /./g ) ; // true

is ( Set , new Set ( ) ) ; // true

is ( WeakMap , new WeakMap ( ) ) ; // true

is ( WeakSet , new WeakSet ( ) ) ; // true

is ( String , '' ) ; // true

is ( String , new String ( '' ) ) ; // true

is ( Number , 1 ) ; // true

is ( Number , new Number ( 1 ) ) ; // true

is ( Boolean , true ) ; // true

is ( Boolean , new Boolean ( true ) ) ; // true

17. Find elements that are similar between 2 arrays

<span class="token keyword">const</span> <span class="token function-variable function">intersection</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">a <span class="token punctuation">,</span> b</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span> <span class="token punctuation">(</span> b <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> a <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> <span class="token parameter">x</span> <span class="token operator">=&gt;</span> s <span class="token punctuation">.</span> <span class="token function">has</span> <span class="token punctuation">(</span> x <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">intersection</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 punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">4</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 punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// &gt; Array [2, 3]</span>

const intersection = ( a , b ) => {

const s = new Set ( b ) ;

return a . filter ( x => s . has ( x ) ) ;

} ;

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

18. Get data type

<span class="token keyword">const</span> <span class="token function-variable function">getType</span> <span class="token operator">=</span> <span class="token parameter">v</span> <span class="token operator">=&gt;</span>
  v <span class="token operator">===</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> <span class="token string">'undefined'</span> <span class="token operator">:</span> v <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token string">'null'</span> <span class="token operator">:</span> v <span class="token punctuation">.</span> constructor <span class="token punctuation">.</span> name <span class="token punctuation">.</span> <span class="token function">toLowerCase</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">getType</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Set</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 punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// &gt; "set"</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">getType</span> <span class="token punctuation">(</span> <span class="token string">'foo'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>              <span class="token comment">// &gt; "string"</span>

const getType = v =>

v === undefined ? 'undefined' : v === null ? 'null' : v . constructor . name . toLowerCase ( ) ;

console . log ( getType ( new Set ( [ 1 , 2 , 3 ] ) ) ) ; // > "set"

19. Calculate the distance between 2 days

<span class="token keyword">const</span> <span class="token function-variable function">getDaysDiffBetweenDates</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">dateInitial <span class="token punctuation">,</span> dateFinal</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  <span class="token punctuation">(</span> dateFinal <span class="token operator">-</span> dateInitial <span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token punctuation">(</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">3600</span> <span class="token operator">*</span> <span class="token number">24</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">getDaysDiffBetweenDates</span> <span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token string">'2019-01-13'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
    <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token string">'2019-01-15'</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; 2</span>

const getDaysDiffBetweenDates = ( dateInitial , dateFinal ) =>

( dateFinal - dateInitial ) / ( 1000 * 3600 * 24 ) ;

console . log (

getDaysDiffBetweenDates (

new Date ( '2019-01-13' ) ,

new Date ( '2019-01-15' )

)

) ; // > 2

20. forEachRight

<span class="token keyword">const</span> <span class="token function-variable function">forEachRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">arr <span class="token punctuation">,</span> callback</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  arr
    <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">reverse</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> callback <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">forEachRight</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 punctuation">,</span> <span class="token parameter">val</span> <span class="token operator">=&gt;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// '4', '3', '2', '1'</span>

const forEachRight = ( arr , callback ) =>

arr

. slice ( 0 )

. reverse ( )

. forEach ( callback ) ;

forEachRight ( [ 1 , 2 , 3 , 4 ] , val => console . log ( val ) ) ; // '4', '3', '2', '1'

Conclude

Above are a few small snippets, but I believe they will help you a lot in the process of working with js.

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

Share the news now

Source : Viblo