1. Arrow functions
JS phiên bản ES6 ra mắt Arrow functions cho phép bạn viết function một cách rõ ràng và nhanh hơn! Thay vì phải khai báo function như thế này:
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">*</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Thì bạn có thể khai báo tương tự với ít code hơn:
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">*</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Thậm chí còn có thể rút gọn hơn nữa nếu hàm của bạn chỉ có một biểu thức:
1 2 | <span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token operator">=></span> x <span class="token operator">*</span> y<span class="token punctuation">;</span> |
2. Spread Operator
Spread syntax cho phép những object có thể lặp như Array hoặc String được khai báo một cách mở rộng ở trong function call hoặc trong phần tử của cú pháp khai báo mảng (array literals) hoặc Object. (nếu đọc không hiểu thì xem ví dụ sẽ hiểu ngay)
2.1. Tạo mảng mới mà nó có một phần tử là một mảng
1 2 3 4 5 | <span class="token keyword">const</span> parts <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'shoulders'</span><span class="token punctuation">,</span> <span class="token string">'knees'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> lyrics <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'head'</span><span class="token punctuation">,</span> <span class="token operator">...</span>parts<span class="token punctuation">,</span> <span class="token string">'and'</span><span class="token punctuation">,</span> <span class="token string">'toes'</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>lyrics<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: ["head", "shoulders", "knees", "and", "toes"]</span> |
2.2. Một cách tốt hơn để ghép mảng
1 2 3 4 5 6 | <span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span> <span class="token operator">...</span>arr2<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>arr1<span class="token punctuation">)</span> <span class="token comment">// Result: [0, 1, 2, 3, 4, 5]</span> |
2.3. Sử dụng như là tham số truyền vào function
1 2 3 4 | <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 class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b <span class="token operator">+</span> c<span class="token punctuation">;</span> <span class="token keyword">let</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token operator">...</span>array<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 6</span> |
3. Rest Operator
Rest syntax trông giống y hệt spread syntax, chỉ khác ở chỗ rest syntax được sử dụng để gộp mảng và object. Hiểu một cách khác, rest syntax là cú pháp đối nghịch với spread syntax. Spread syntax cho phép mở rộng mảng vào chính phần tử của nó, trong khi rest syntax lại gộp tất cả thành một phần tử duy nhất.
P/s: Nếu bạn vẫn chưa hiểu thì có thể hiểu theo cách của người dịch như sau:
- Spread syntax là để truyền vào trong function
=> Sử dụng bằng function call, khai báo object, khai báo mảng, …
- Rest syntax là để lấy tất cả các phần tử truyền vào bằng một biến duy nhất
=> Sử dụng bên trong function
1 2 3 4 5 6 7 | <span class="token keyword">const</span> <span class="token function-variable function">blend</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">ice<span class="token punctuation">,</span> liquid<span class="token punctuation">,</span> <span class="token operator">...</span>theRest</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>theRest<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function">blend</span><span class="token punctuation">(</span><span class="token string">'ice'</span><span class="token punctuation">,</span> <span class="token string">'milk'</span><span class="token punctuation">,</span> <span class="token string">'banana'</span><span class="token punctuation">,</span> <span class="token string">'strawberry'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: ['banana', 'strawberry']</span> |
Tham số cuối cùng của hàm trên được thêm tiền tố ...
khiến cho tất cả các tham số còn lại được đặt vào trong cùng một mảng.
4. Fill arrays
Tạo một mảng đơn giản với một dòng code.
4.1. Mảng có 5 phần tử là chuỗi rỗng
1 2 | <span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: ['', '', '', '', '']</span> |
4.2. Mảng có số từ 0
đến 4
1 2 3 4 5 | <span class="token keyword">let</span> array <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keys</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">// Result: [0, 1, 2, 3, 4]</span> <span class="token comment">// Using the spread operator</span> <span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token comment">// Result: [0, 1, 2, 3, 4]</span> |
5. Computed property names
ES6 hỗ trợ một cú pháp mới gọi là computed property names cho phép bạn đặt biểu thức trong dấu ngoặc vuông []
, biểu thức ở trong đó sẽ được sử dụng như là key ở trong object đó
1 2 3 4 5 6 7 8 | <span class="token keyword">let</span> key <span class="token operator">=</span> <span class="token string">'A_DYNAMIC_KEY'</span><span class="token punctuation">;</span> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'A_VALUE'</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>obj<span class="token punctuation">)</span> <span class="token comment">// Result: { A_DYNAMIC_KEY: 'A_VALUE' }</span> |
6. Những cách hay để console.log()
6.1. Sử dụng console.table()
khi bạn có một mảng object.
1 2 3 4 5 6 | <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Suibin'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> coder<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">const</span> bar <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Borja'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span> coder<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">const</span> baz <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Paul'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> coder<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">table</span><span class="token punctuation">(</span><span class="token punctuation">[</span>foo<span class="token punctuation">,</span> bar<span class="token punctuation">,</span> baz<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
=> Kết quả:
6.2. Làm kết quả in ra màn hình nổi bật hơn bằng CSS và dấu %
1 2 3 | console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'%cStyled log'</span><span class="token punctuation">,</span> <span class="token string">'color: orange; font-weight: bold;'</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">'Normal log'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
=> Kết quả:
6.3. Log nhiều object cùng lúc để tiết kiệm không gian và cũng để dễ đọc hơn.
1 2 3 4 5 6 | <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Suibin'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> coder<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">const</span> bar <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Borja'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span> coder<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">const</span> baz <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Paul'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> coder<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">{</span> foo<span class="token punctuation">,</span> bar<span class="token punctuation">,</span> baz <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
=> Kết quả:
7. Object destructuring
Loại bỏ code bị lặp bằng cách destructuring thuộc tính của object mà bạn cần.
1 2 3 4 5 6 | <span class="token keyword">const</span> dog <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Nala'</span><span class="token punctuation">,</span> gender<span class="token operator">:</span> <span class="token string">'female'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Destructure bên trong cú pháp hàm bằng cách bọc tên thuộc tính trong dấu ngoặc nhọn {}
1 2 3 4 5 6 | <span class="token keyword">const</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span><span class="token template-punctuation string">`</span></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">func</span><span class="token punctuation">(</span>dog<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: Nala is 10 years old.</span> |
Hoặc là truyền vào một object và khai báo tên biến trùng với tên thuộc tính của object đó. Cách này sẽ tốt hơn nếu có nhiều destructure object trong hàm.
1 2 3 4 5 6 7 | <span class="token keyword">const</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">animal</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> animal<span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span><span class="token template-punctuation string">`</span></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">func</span><span class="token punctuation">(</span>dog<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: Nala is 10 years old.</span> |
8. Sử dụng reduce()
, map()
và filter()
thay vì những vòng lặp thông thường.
8.1. Sử dụng reduce()
để tính toán giá trị của mảng.
1 2 3 4 5 6 | <span class="token keyword">let</span> orders <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> total <span class="token operator">=</span> orders<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=></span> acc <span class="token operator">+</span> cur<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>total<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 15</span> |
8.2. Sử dụng map()
để tạo mảng mới, cùng với đó là gọi một function cho mỗi phần tử.
1 2 3 4 5 6 | <span class="token keyword">let</span> orders <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> total <span class="token operator">=</span> orders<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>total<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [2, 4, 6, 8, 10]</span> |
8.3. Sử dụng filter()
để filter mảng với một function.
1 2 3 4 5 6 | <span class="token keyword">let</span> orders <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> total <span class="token operator">=</span> orders<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token operator">></span> <span class="token number">3</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>total<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [4, 5]</span> |