34 Kỹ thuật tối ưu code JavaScript 2021

Thứ Hai, 24/05/2021

Tram Ho

Mở đầu

Gần đây mình có tìm hiểu những tips và tricks javascript , mục đích để giảm những đoạn code không thật sự cần thiết cũng như giúp code Javascript rõ ràng và tối ưu hơn.

Hôm nay, mình sẽ chia sẻ với các bạn về 1 bài viết khá hữu ích về 34 kỹ thuật mà lập trình viên Javascript nên biết trong năm 2021.

Chúng ta cùng bắt đầu nhé

1. If với nhiều điều kiện

Bạn có thể lưu nhiều giá trị trong mảng và sau đó sử dụng phương thức Include.

<span class="token comment">//longhand</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">===</span> <span class="token string">'abc'</span> <span class="token operator">||</span> x <span class="token operator">===</span> <span class="token string">'def'</span> <span class="token operator">||</span> x <span class="token operator">===</span> <span class="token string">'ghi'</span> <span class="token operator">||</span> x <span class="token operator">===</span><span class="token string">'jkl'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//logic</span>
<span class="token punctuation">}</span>

<span class="token comment">//shorthand</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'abc'</span><span class="token punctuation">,</span> <span class="token string">'def'</span><span class="token punctuation">,</span> <span class="token string">'ghi'</span><span class="token punctuation">,</span> <span class="token string">'jkl'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</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 comment">//logic</span>
<span class="token punctuation">}</span>

//longhand

if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {

//logic

}

//shorthand

if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {

//logic

}

2. If true … else

Với điều kiện if else đơn giản thì bạn có thể sử dụng các toán tử ternary để viết ngắn gọn

<span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&gt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   variable <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
   variable <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Shorthand</span>
<span class="token keyword">let</span> variable <span class="token operator">=</span> <span class="token punctuation">(</span>x <span class="token operator">&gt;</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

<span class="token comment">//Hoặc</span>
<span class="token keyword">let</span> variable <span class="token operator">=</span> x <span class="token operator">&gt;</span> <span class="token number">10</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>variable<span class="token punctuation">)</span><span class="token punctuation">;</span>

if (x > 100) {

variable = true;

} else {

variable = false;

}

// Shorthand

let variable = (x > 10) ? true : false;

//Hoặc

let variable = x > 10;

console.log(variable);

3. Khai báo biến

Khi bạn muốn khai báo hai biến có giá trị chung hoặc kiểu chung, thì có thể viết ngắn gọn như sau.

<span class="token comment">//Longhand </span>
<span class="token keyword">let</span> variable1<span class="token punctuation">;</span>
<span class="token keyword">let</span> variable2 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token comment">//Shorthand </span>
<span class="token keyword">let</span> variable1<span class="token punctuation">,</span> variable2 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

//Longhand

let variable1;

let variable2 = 1;

//Shorthand

let variable1, variable2 = 1;

4. Kiểm tra Null, Undefined, Empty

Khi bạn tạo biến mới, và bạn muốn kiểm tra xem biến mà bạn đang tham chiếu đến, giá trị của nó có phải là empty hoặc undefined hay không.

JavaScript có một cách viết tắt để thực hiện được chức năng này.

<span class="token comment">// Longhand</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>variable1 <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">||</span> variable1 <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">||</span> variable1 <span class="token operator">!==</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> variable2 <span class="token operator">=</span> variable1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Shorthand</span>
<span class="token keyword">let</span> variable2 <span class="token operator">=</span> variable1 <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span>

// Longhand

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

let variable2 = variable1;

}

// Shorthand

let variable2 = variable1 || '';

5. Kiểm tra giá trị Null và gán giá trị mặc định

<span class="token keyword">let</span> variable1 <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">,</span> variable2 <span class="token operator">=</span> variable1 <span class="token operator">||</span> <span class="token string">'default value'</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 string">"null check"</span><span class="token punctuation">,</span> variable2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// output là "default value"</span>

let variable1 = null, variable2 = variable1 || 'default value';

console.log("null check", variable2); // output là "default value"

6. Kiểm tra giá trị Undefined và gán giá trị mặc định

<span class="token keyword">let</span> variable1 <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> variable2 <span class="token operator">=</span> variable1 <span class="token operator">||</span> <span class="token string">'default value'</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 string">"null check"</span><span class="token punctuation">,</span> variable2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// output là "default value"</span>

let variable1 = undefined, variable2 = variable1 || 'default value';

7. Gán giá trị cho nhiều biến

Khi bạn xử lý nhiều biến và muốn gán các giá trị khác nhau cho các biến khác nhau, kỹ thuật viết tắt này rất hữu ích.

<span class="token comment">//Longhand </span>
<span class="token keyword">let</span> variable1<span class="token punctuation">,</span> variable2<span class="token punctuation">,</span> variable3<span class="token punctuation">;</span>
variable1 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
variable2 <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
variable3 <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token comment">//Shorthand </span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>variable1<span class="token punctuation">,</span> variable2<span class="token punctuation">,</span> variable3<span class="token punctuation">]</span> <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 punctuation">;</span>

//Longhand

let variable1, variable2, variable3;

variable1 = 1;

variable2 = 2;

variable3 = 3;

//Shorthand

let [variable1, variable2, variable3] = [1, 2, 3];

8. Toán tử gán

Chúng ta sẽ xử lý rất nhiều toán tử số học trong khi lập trình. Và đây là một kỹ thuật hữu ích để gán toán tử cho các biến JavaScript.

variable1 <span class="token operator">=</span> variable1 <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
variable2 <span class="token operator">=</span> variable2 <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
variable3 <span class="token operator">=</span> variable3 <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">;</span>

<span class="token comment">// Shorthand</span>
variable1<span class="token operator">++</span><span class="token punctuation">;</span>
variable2<span class="token operator">--</span><span class="token punctuation">;</span>
variable3 <span class="token operator">*=</span> <span class="token number">10</span><span class="token punctuation">;</span>

variable1 = variable1 + 1;

variable2 = variable2 - 1;

variable3 = variable3 * 10;

// Shorthand

variable1++;

variable2--;

variable3 *= 10;

9. If Presence Shorthand

<span class="token comment">// Longhand</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>variable1 <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">)</span> or <span class="token keyword">if</span> <span class="token punctuation">(</span>variable1 <span class="token operator">!==</span> <span class="token string">""</span><span class="token punctuation">)</span> or <span class="token keyword">if</span> <span class="token punctuation">(</span>variable1 <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span>

<span class="token comment">// Shorthand //Nó sẽ kiểm tra string empty,null và undefined</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>variable1<span class="token punctuation">)</span>

// Longhand

if (variable1 === true) or if (variable1 !== "") or if (variable1 !== null)

// Shorthand //Nó sẽ kiểm tra string empty,null và undefined

if (variable1)

Đây là một cách viết tắt khá phổ biến.

Nhưng cần lưu ý Nếu variable1 có bất kỳ giá trị nào, nó sẽ vào logic sau vòng lặp if, nên toán tử này chủ yếu được sử dụng để kiểm tra null hoặc undefined.

10. Toán tử AND (&&) cho nhiều điều kiện

Nếu bạn chỉ gọi một hàm nếu biến là true thì bạn có thể sử dụng toán tử &&

<span class="token comment">//Longhand </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>variable1<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token function">callMethod</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">//Shorthand </span>
variable1 <span class="token operator">&amp;&amp;</span> <span class="token function">callMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

//Longhand

if (variable1) {

callMethod();

}

//Shorthand

variable1 && callMethod();

11. Vòng lặp for shorthand

<span class="token comment">// Longhand</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> testData<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>

<span class="token comment">// Shorthand</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">in</span> dataTest<span class="token punctuation">)</span> hoặc <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">of</span> testData<span class="token punctuation">)</span>

// Longhand

for (var i = 0; i < testData.length; i++)

// Shorthand

for (let i in dataTest) hoặc for (let i of testData)

12. Comparison Returns

Bạn cũng có thể sử dụng phép so sánh trong câu lệnh return.

<span class="token comment">// Longhand</span>
<span class="token keyword">let</span> test<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">checkReturn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span>test <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> test<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">callMe</span><span class="token punctuation">(</span><span class="token string">'test'</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">var</span> data <span class="token operator">=</span> <span class="token function">checkReturn</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>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//output test</span>
<span class="token keyword">function</span> <span class="token function">callMe</span><span class="token punctuation">(</span><span class="token parameter">val</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>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Shorthand</span>
<span class="token keyword">function</span> <span class="token function">checkReturn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> test <span class="token operator">||</span> <span class="token function">callMe</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// Longhand

let test;

function checkReturn() {

if (!(test === undefined)) {

return test;

} else {

return callMe('test');

}

var data = checkReturn();

console.log(data); //output test

function callMe(val) {

console.log(val);

}

// Shorthand

return test || callMe('test');

}

13. Arrow Function

Arrow Function là một tính năng mới được giới thiệu trong ES6. Nó giúp bạn tạo các hàm một cách gọn gàng hơn rất nhiều.

<span class="token comment">//Longhand </span>
<span class="token keyword">function</span> <span class="token function">add</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 punctuation">{</span> 
   <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span> 
<span class="token punctuation">}</span> 
<span class="token comment">//Shorthand </span>
<span class="token keyword">const</span> <span class="token function-variable function">add</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> a <span class="token operator">+</span> b<span class="token punctuation">;</span>

//Longhand

function add(a, b) {

return a + b;

}

//Shorthand

const add = (a, b) => a + b;

14. Short Function Calling

Chúng ta có thể sử dụng ternary operator để thực hiện chức năng này.

<span class="token comment">// Longhand</span>
<span class="token keyword">function</span> <span class="token function">test1</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 string">'test1'</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">function</span> <span class="token function">test2</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 string">'test2'</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">var</span> test3 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>test3 <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">test1</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">else</span> <span class="token punctuation">{</span>
  <span class="token function">test2</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">// Shorthand</span>
<span class="token punctuation">(</span>test3 <span class="token operator">===</span> <span class="token number">1</span><span class="token operator">?</span> test1<span class="token operator">:</span>test2<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// Longhand

function test1() {

console.log('test1');

};

function test2() {

console.log('test2');

};

var test3 = 1;

if (test3 == 1) {

test1();

} else {

test2();

}

// Shorthand

(test3 === 1? test1:test2)();

15. Switch Shorthands

Bạn có thể lưu các điều kiện trong key-value objects và sử dụng dựa trên các điều kiện.

<span class="token comment">// Longhand</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">case</span> <span class="token number">1</span><span class="token operator">:</span>
    <span class="token function">test1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">break</span><span class="token punctuation">;</span>

  <span class="token keyword">case</span> <span class="token number">2</span><span class="token operator">:</span>
    <span class="token function">test2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">break</span><span class="token punctuation">;</span>

  <span class="token keyword">case</span> <span class="token number">3</span><span class="token operator">:</span>
    <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token comment">// And so on...</span>
<span class="token punctuation">}</span>

<span class="token comment">// Shorthand</span>
<span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token number">1</span><span class="token operator">:</span> test1<span class="token punctuation">,</span>
  <span class="token number">2</span><span class="token operator">:</span> test2<span class="token punctuation">,</span>
  <span class="token number">3</span><span class="token operator">:</span> test
<span class="token punctuation">}</span><span class="token punctuation">;</span>

data<span class="token punctuation">[</span>something<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> data<span class="token punctuation">[</span>something<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// Longhand

switch (data) {

case 1:

test1();

break;

case 2:

test2();

break;

case 3:

test();

break;

// And so on...

}

// Shorthand

var data = {

1: test1,

2: test2,

3: test

};

data[something] && data[something]();

16. Implicit Return

Với việc sử dụng Arrow Function, chúng ta có thể trả về giá trị trực tiếp mà không cần phải viết câu lệnh return.

<span class="token comment">//Longhand </span>
<span class="token keyword">function</span> <span class="token function">add</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 punctuation">{</span> 
   <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span> 
<span class="token punctuation">}</span> 
<span class="token comment">//Shorthand </span>
<span class="token keyword">const</span> <span class="token function-variable function">add</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> a <span class="token operator">+</span> b<span class="token punctuation">;</span>

//Longhand

return a + b;

}

//Shorthand

17. Lũy thừa cơ số thập phân

<span class="token comment">// Longhand</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>

<span class="token comment">// Shorthand</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">1e2</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

// Longhand

for (var i = 0; i < 100; i++) { ... }

// Shorthand

for (var i = 0; i < 1e2; i++) {

18. Default Parameter Values

ES6 cho phép đặt giá trị mặc định cho tham số khi khai báo hàm.

<span class="token comment">//Longhand</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">variable1<span class="token punctuation">,</span> variable2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>variable1 <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
    variable1 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>variable2 <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
    variable2 <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> variable1 <span class="token operator">+</span> variable2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//shorthand</span>
<span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">variable1 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> variable2 <span class="token operator">=</span> <span class="token number">2</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>variable1 <span class="token operator">+</span> variable2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//output: 3</span>

//Longhand

function add(variable1, variable2) {

if (variable1 === undefined)

variable1 = 1;

if (variable2 === undefined)

variable2 = 2;

return variable1 + variable2;

}

//shorthand

add = (variable1 = 1, variable2 = 2) => (variable1 + variable2);

add() //output: 3

19. Toán tử Spread

<span class="token comment">//longhand</span>
<span class="token comment">// joining arrays dùng concat</span>
<span class="token keyword">const</span> data <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 punctuation">;</span>
<span class="token keyword">const</span> array1 <span class="token operator">=</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 number">6</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//shorthand</span>
<span class="token comment">// joining arrays</span>
<span class="token keyword">const</span> data <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 punctuation">;</span>
<span class="token keyword">const</span> array1 <span class="token operator">=</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 number">6</span><span class="token punctuation">,</span> <span class="token operator">...</span>data<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>array1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 4, 5, 6, 1, 2, 3]</span>

//longhand

// joining arrays dùng concat

const data = [1, 2, 3];

const array1 = [4 ,5 , 6].concat(data);

//shorthand

// joining arrays

const array1 = [4 ,5 , 6, ...data];

console.log(array1); // [ 4, 5, 6, 1, 2, 3]

Clone array dùng spread

<span class="token comment">//longhand</span>

<span class="token comment">// cloning arrays</span>
<span class="token keyword">const</span> array1 <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 punctuation">;</span>
<span class="token keyword">const</span> array2 <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">//shorthand</span>
<span class="token comment">// cloning arrays</span>
<span class="token keyword">const</span> array1 <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 punctuation">;</span>
<span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>array1<span class="token punctuation">]</span><span class="token punctuation">;</span>

//longhand

// cloning arrays

const array1 = [1, 2, 3];

const array2 = array1.slice()

//shorthand

// cloning arrays

const array2 = [...array1];

20. Template Literals

Thay vì sử dụng nhiều toán tử + để nối nhiều biến trong một string thì bạn có thể sử dụng Template Literals

<span class="token comment">//longhand</span>
<span class="token keyword">const</span> welcome <span class="token operator">=</span> <span class="token string">'Hi '</span> <span class="token operator">+</span> variable1 <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> variable2 <span class="token operator">+</span> <span class="token string">'.'</span>

<span class="token comment">//shorthand</span>
<span class="token keyword">const</span> welcome <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>variable1<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>variable2<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

//longhand

const welcome = 'Hi ' + variable1 + ' ' + variable2 + '.'

//shorthand

const welcome = `Hi ${variable1} ${variable2}`;

21. Multi-line String

Khi bạn xử lý một chuỗi nhiều dòng trong code, bạn có thể thực hiện cách này:

<span class="token comment">//longhand</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token string">'string text line 1\n'</span> <span class="token operator">+</span>
<span class="token string">'string text line 2'</span>
    
<span class="token comment">//shorthand</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">string text line 1
                           string text line 2</span><span class="token template-punctuation string">`</span></span>

//longhand

const data = 'string text line 1\n' +

'string text line 2'

//shorthand

const data = `string text line 1

string text line 2`

22. Gán thuộc tính Object

<span class="token keyword">let</span> variable1 <span class="token operator">=</span> <span class="token string">'a'</span><span class="token punctuation">;</span> 
<span class="token keyword">let</span> variable2 <span class="token operator">=</span> <span class="token string">'b'</span><span class="token punctuation">;</span>
<span class="token comment">//Longhand </span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>variable1<span class="token operator">:</span> variable1<span class="token punctuation">,</span> variable2<span class="token operator">:</span> variable2<span class="token punctuation">}</span><span class="token punctuation">;</span> 

<span class="token comment">//Shorthand </span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>variable1<span class="token punctuation">,</span> variable2<span class="token punctuation">}</span><span class="token punctuation">;</span>

let variable1 = 'a';

let variable2 = 'b';

//Longhand

let obj = {variable1: variable1, variable2: variable2};

//Shorthand

let obj = {variable1, variable2};

23. Chuyển String thành Number

<span class="token comment">//Longhand </span>
<span class="token keyword">let</span> variable1 <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'456'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token keyword">let</span> variable2 <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'456.9'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

<span class="token comment">//Shorthand </span>
<span class="token keyword">let</span> variable1 <span class="token operator">=</span> <span class="token operator">+</span><span class="token string">'456'</span><span class="token punctuation">;</span> 
<span class="token keyword">let</span> variable2 <span class="token operator">=</span> <span class="token operator">+</span><span class="token string">'456.9'</span><span class="token punctuation">;</span>

//Longhand

let variable1 = parseInt('456');

let variable2 = parseFloat('456.9');

//Shorthand

let variable1 = +'456';

let variable2 = +'456.9';

24. Destructuring Assignment

<span class="token comment">//longhand</span>
<span class="token keyword">const</span> variable1 <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>variable1<span class="token punctuation">;</span>
<span class="token keyword">const</span> variable2 <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>variable2<span class="token punctuation">;</span>
<span class="token keyword">const</span> variable2 <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>variable3<span class="token punctuation">;</span>

<span class="token comment">//shorthand</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> variable1<span class="token punctuation">,</span> variable2<span class="token punctuation">,</span> variable3 <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">;</span>

//longhand

const variable1 = this.data.variable1;

const variable2 = this.data.variable2;

//shorthand

const { variable1, variable2, variable3 } = this.data;

25 Array.find

Khi bạn có một mảng các đối tượng và bạn muốn tìm object cụ thể theo thuộc tính object thì có thể sử dụng phương thức find()

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'test1'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'abc'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'test2'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'cde'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'test1'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'fgh'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token keyword">function</span> <span class="token function">findtest1</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'test1'</span> <span class="token operator">&amp;&amp;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">===</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> data<span class="token punctuation">[</span>i<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">//Shorthand</span>
filteredData <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=&gt;</span> data<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'test1'</span> <span class="token operator">&amp;&amp;</span> data<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'fgh'</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>filteredData<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { type: 'test1', name: 'fgh' }</span>

const data = [{

type: 'test1',

},

{

type: 'test2',

},

{

type: 'test1',

},

]

function findtest1(name) {

for (let i = 0; i < data.length; ++i) {

if (data[i].type === 'test1' && data[i].name === name) {

return data[i];

}

//Shorthand

filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');

console.log(filteredData); // { type: 'test1', name: 'fgh' }

26 Điều kiện Lookup

Ví dụ, nếu bạn muốn kiểm tra 1 biến type và dựa trên biến type sẽ gọi các method khác nhau.

Bạn có thể sử dụng nhiều else if hoặc sử dụng switch, nhưng có một cách ngắn gọn khác để thực hiện việc này

<span class="token comment">// Longhand</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'test1'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">test1</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">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'test2'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">test2</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">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'test3'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">test3</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">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'test4'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">test4</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">else</span> <span class="token punctuation">{</span>
  <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Invalid value '</span> <span class="token operator">+</span> type<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Shorthand</span>
<span class="token keyword">var</span> types <span class="token operator">=</span> <span class="token punctuation">{</span>
  test1<span class="token operator">:</span> test1<span class="token punctuation">,</span>
  test2<span class="token operator">:</span> test2<span class="token punctuation">,</span>
  test3<span class="token operator">:</span> test3<span class="token punctuation">,</span>
  test4<span class="token operator">:</span> test4
<span class="token punctuation">}</span><span class="token punctuation">;</span>
 
<span class="token keyword">var</span> func <span class="token operator">=</span> types<span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token operator">!</span>func<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Invalid value '</span> <span class="token operator">+</span> type<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// Longhand

if (type === 'test1') {

test1();

}

else if (type === 'test2') {

test2();

}

else if (type === 'test3') {

test3();

}

else if (type === 'test4') {

test4();

} else {

throw new Error('Invalid value ' + type);

}

// Shorthand

var types = {

test1: test1,

test2: test2,

test3: test3,

test4: test4

};

var func = types[type];

(!func) && throw new Error('Invalid value ' + type); func();

27. Bitwise IndexOf

Hàm indexOf() được sử dụng để truy xuất vị trí của mục bạn đang tìm kiếm trong 1 mảng. Nếu mục không được tìm thấy sẽ trả về giá trị -1.

Và trong JavaScript, 0 được coi là falsy, còn các số lớn hơn hoặc nhỏ hơn 0 được coi là truthy

Toán tử bitwise (~) sẽ trả về giá trị truthy cho bất kỳ giá trị nào ngoại trừ -1


<span class="token comment">//longhand</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// item found </span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// item not found</span>
<span class="token punctuation">}</span>

<span class="token comment">//shorthand</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">~</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// item found</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token operator">~</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// item not found</span>
<span class="token punctuation">}</span>

//longhand

if(arr.indexOf(item) > -1) { // item found

}

if(arr.indexOf(item) === -1) { // item not found

}

//shorthand

if(~arr.indexOf(item)) { // item found

}

if(!~arr.indexOf(item)) { // item not found

}

28. Object.entries()

Tính năng này giúp chuyển đổi object thành một array object.

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> test1<span class="token operator">:</span> <span class="token string">'abc'</span><span class="token punctuation">,</span> test2<span class="token operator">:</span> <span class="token string">'cde'</span><span class="token punctuation">,</span> test3<span class="token operator">:</span> <span class="token string">'efg'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> array <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>data<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>array<span class="token punctuation">)</span><span class="token punctuation">;</span>

Output<span class="token operator">:</span>
   <span class="token punctuation">[</span> 
     <span class="token punctuation">[</span> <span class="token string">'test1'</span><span class="token punctuation">,</span> <span class="token string">'abc'</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
     <span class="token punctuation">[</span> <span class="token string">'test2'</span><span class="token punctuation">,</span> <span class="token string">'cde'</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
     <span class="token punctuation">[</span> <span class="token string">'test3'</span><span class="token punctuation">,</span> <span class="token string">'efg'</span> <span class="token punctuation">]</span>
   <span class="token punctuation">]</span>

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };

const array = Object.entries(data);

console.log(array);

Output:

[

[ 'test1', 'abc' ],

[ 'test2', 'cde' ],

[ 'test3', 'efg' ]

]

29. Object.entries()

Đây cũng là một tính năng mới được giới thiệu trong ES8 thực hiện chức năng tương tự như Object.entries (), nhưng không có phần key:

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> test1<span class="token operator">:</span> <span class="token string">'abc'</span><span class="token punctuation">,</span> test2<span class="token operator">:</span> <span class="token string">'cde'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> array <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>data<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>array<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/** Output:
[ 'abc', 'cde']
**/</span>

const data = { test1: 'abc', test2: 'cde' };

const array = Object.values(data);

/** Output:

[ 'abc', 'cde']

**/

30. Double Bitwise

Lưu ý là phương pháp này chỉ hoạt động đối với số nguyên 32 bit

<span class="token comment">// Longhand</span>
Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">1.9</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">1</span> <span class="token comment">// true</span>

<span class="token comment">// Shorthand</span>
<span class="token operator">~</span><span class="token operator">~</span><span class="token number">1.9</span> <span class="token operator">===</span> <span class="token number">1</span> <span class="token comment">// true</span>

// Longhand

Math.floor(1.9) === 1 // true

// Shorthand

~~1.9 === 1 // true

31. Lặp lại một chuỗi nhiều lần

<span class="token comment">//longhand </span>
<span class="token keyword">let</span> test <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> 
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">5</span><span class="token punctuation">;</span> i <span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
  test <span class="token operator">+=</span> <span class="token string">'test '</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>str<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// test test test test test </span>

<span class="token comment">//shorthand </span>
<span class="token string">'test '</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

//longhand

let test = '';

for(let i = 0; i < 5; i ++) {

test += 'test ';

}

console.log(str); // test test test test test

//shorthand

'test '.repeat(5);

32. Tìm số max và min trong array

<span class="token keyword">const</span> array <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 punctuation">;</span> 
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>…array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>…array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>

const array = [1, 2, 3];

Math.max(…array); // 3

Math.min(…array); // 1

33. Lấy character từ string

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'abc'</span><span class="token punctuation">;</span>
<span class="token comment">//Longhand </span>
str<span class="token punctuation">.</span><span class="token function">charAt</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 comment">// c</span>

<span class="token comment">//Shorthand </span>
<span class="token constant">L</span>ưu ý<span class="token operator">:</span> <span class="token constant">N</span>ếu bạn biết index của mảng thì có thể sử dụng trực tiếp index được chèn ký tự<span class="token punctuation">.</span>
<span class="token constant">N</span>ếu index sai nó sẽ <span class="token keyword">throw</span> <span class="token keyword">undefined</span>
str<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// c</span>

let str = 'abc';

//Longhand

str.charAt(2); // c

//Shorthand

Lưu ý: Nếu bạn biết index của mảng thì có thể sử dụng trực tiếp index được chèn ký tự.

Nếu index sai nó sẽ throw undefined

str[2]; // c

34. Power Shorthand

Cách viết tắt cho hàm lũy thừa.

<span class="token comment">//longhand</span>
Math<span class="token punctuation">.</span><span class="token function">pow</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 comment">// 8</span>

<span class="token comment">//shorthand</span>
<span class="token number">2</span><span class="token operator">**</span><span class="token number">3</span> <span class="token comment">// 8</span>

//longhand

Math.pow(2,3); // 8

//shorthand

2**3 // 8

Mọi người có thể đọc bài gốc ở đây

https://javascript.plainenglish.io/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3

Chia sẻ bài viết ngay

Mở đầu

1. If với nhiều điều kiện

2. If true … else

3. Khai báo biến

4. Kiểm tra Null, Undefined, Empty

5. Kiểm tra giá trị Null và gán giá trị mặc định

6. Kiểm tra giá trị Undefined và gán giá trị mặc định

7. Gán giá trị cho nhiều biến

8. Toán tử gán

9. If Presence Shorthand

10. Toán tử AND (&&) cho nhiều điều kiện

11. Vòng lặp for shorthand

12. Comparison Returns

13. Arrow Function

14. Short Function Calling

15. Switch Shorthands

16. Implicit Return

17. Lũy thừa cơ số thập phân

18. Default Parameter Values

19. Toán tử Spread

20. Template Literals

21. Multi-line String

22. Gán thuộc tính Object

23. Chuyển String thành Number

24. Destructuring Assignment

25 Array.find

26 Điều kiện Lookup

27. Bitwise IndexOf

28. Object.entries()

29. Object.entries()

30. Double Bitwise

31. Lặp lại một chuỗi nhiều lần

32. Tìm số max và min trong array

33. Lấy character từ string

34. Power Shorthand

Mọi người có thể đọc bài gốc ở đây

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