Giới thiệu
Chào mọi người, hôm nay mình xin giới thiệu cho mọi người một vài lưu ý nho nhỏ để dần cải thiện hơn trong việc viết code javascript.
Giúp việc code javascript trở nên dễ dàng và trình bày code gọn gàng hơn bằng những cú pháp rút gọn code và đa phần là những tính năng của ES6 cung cấp cho chúng ta .
1. Toán tử 3 ngôi
Có khá là nhiều ngôn ngữ hỗ trợ cú pháp này như java, c++ , c#, php, ruby,… Đơn giản đây chỉ là cách viết gọn hơn của if...else
chỉ trên 1 dòng code.
Longhand:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span> <span class="token keyword">let</span> answer<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">></span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> answer <span class="token operator">=</span> <span class="token string">"Lớn hơn 10"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> answer <span class="token operator">=</span> <span class="token string">"Nhỏ hơn 10"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Shorthand:
1 2 | <span class="token keyword">const</span> answer <span class="token operator">=</span> x <span class="token operator">></span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">"Lớn hơn 10"</span> <span class="token punctuation">:</span> <span class="token string">"Nhỏ hơn 10"</span><span class="token punctuation">;</span> |
2. Định nghĩa biến
Sẽ nhanh hơn và gọn hơn nếu chúng ta khai báo nhiều biến cũng một lúc.
Longhand:
1 2 3 4 | <span class="token keyword">let</span> x<span class="token punctuation">;</span> <span class="token keyword">let</span> y<span class="token punctuation">;</span> <span class="token keyword">let</span> z <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> |
Shorthand:
1 2 | <span class="token keyword">let</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> |
3. So sánh với giá trị kiểu boolean
Trong trường hợp giá trị so sánh được so sánh với giá trị true
thì ta có thể bỏ qua toán tử so sánh đó.
Longhand:
1 2 | <span class="token keyword">if</span> <span class="token punctuation">(</span>likeJavaScript <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">)</span> |
Shorthand:
1 2 | <span class="token keyword">if</span> <span class="token punctuation">(</span>likeJavascript<span class="token punctuation">)</span> |
Note: Thực tế thì 2 cú pháp trên không hoàn toàn giống nhau. Với cú pháp rút gọn thì chỉ cần
likeJavascript
làtruthy value
thì sẽ đúng do mình khuyên bạn chỉ nên sử dụng với trường hợp so sánh điều kiện kiểuboolean
.
Ngoài ra còn có cũng có thể áp dụng đối với trường hợp KHÔNG PHẢI
là true
Longhand:
1 2 | <span class="token keyword">if</span> <span class="token punctuation">(</span>isRobot <span class="token operator">!==</span> <span class="token boolean">true</span><span class="token punctuation">)</span> |
Shorthand:
1 2 | <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isRobot<span class="token punctuation">)</span> |
4. Vòng lặp For
Mẹo này giúp bạn thật sự hữu ích đối với những người muốn viết JS thuần và không muốn dựa vào các thư viện bên ngoài như JQuery hay Lodash.
Longhand:
1 2 3 | <span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'mango'</span><span class="token punctuation">,</span> <span class="token string">'peach'</span><span class="token punctuation">,</span> <span class="token string">'banana'</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"><</span> fruits<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> |
Shorthand:
1 2 | <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> fruit <span class="token keyword">of</span> fruits<span class="token punctuation">)</span> |
Nếu bạn muốn lặp theo index thì có thể sử dụng cú pháp:
1 2 3 | <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token keyword">in</span> fruits<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">// output: mango, peach, banana</span> |
5. Arrow functions
Một trong những tính năng phải gọi là cực kỳ hữu ích của ES6 mà bạn không nên bỏ qua. Thay vì phải sử dụng cú pháp rờm rà để định nghĩa một funtion thì giờ đây ta có thể sử dụng dấu =>
nhìn trực quan và ngắn gọn hơn hẳn.
Thay vì bạn viết:
1 2 3 4 5 6 7 8 9 | <span class="token comment">// cách 1</span> <span class="token keyword">function</span> <span class="token function">name</span><span class="token punctuation">(</span>var1<span class="token punctuation">,</span> var2<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// cách 2</span> <span class="token keyword">const</span> <span class="token function-variable function">Name</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>var1<span class="token punctuation">,</span> var2<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Thì hãy viết thành:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">const</span> <span class="token function-variable function">nameFunction</span> <span class="token operator">=</span> <span class="token punctuation">(</span>var1<span class="token punctuation">,</span> var2<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// nếu không truyền vào tham số nào thì</span> <span class="token keyword">const</span> <span class="token function-variable function">nameFunction</span> <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 operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// nếu chỉ truyền vào 1 tham số thì</span> <span class="token keyword">const</span> <span class="token function-variable function">nameFunction</span> <span class="token operator">=</span> var1 <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">function</span> <span class="token function">sayHi</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">'Hi'</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">sayHello</span><span class="token punctuation">(</span>name<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">'Hello'</span><span class="token punctuation">,</span> name<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">multiply</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<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> <span class="token comment">// shorthand</span> <span class="token keyword">const</span> <span class="token function-variable function">sayHi</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">sayHello</span> <span class="token operator">=</span> name <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<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> |
6. Implicit Return
Nếu bạn sử dụng cú pháp của arrow function thì sẽ không cần sử dụng từ khóa return
vẫn có thể trả về kết quả mà ta mong muốn:
Longhand
1 2 3 4 | <span class="token keyword">function</span> <span class="token function">calcCircumference</span><span class="token punctuation">(</span>diameter<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> diameter <span class="token punctuation">}</span> |
Shorthand
1 2 | <span class="token function-variable function">calcCircumference</span> <span class="token operator">=</span> diameter <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> diameter<span class="token punctuation">;</span> |
7. Default Parameter Values
Cũng là một tính năng của ES6, việc này giúp bạn tránh giá trị của tham số truyền vào là undefined
. Việc khởi tạo những tham số mặc định trong function cũng khá là quan trọng đấy.
Longhand
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">volume</span><span class="token punctuation">(</span>l<span class="token punctuation">,</span> w<span class="token punctuation">,</span> h<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>w <span class="token operator">===</span> undefined<span class="token punctuation">)</span> w <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>h <span class="token operator">===</span> undefined<span class="token punctuation">)</span> h <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token keyword">return</span> l <span class="token operator">*</span> w <span class="token operator">*</span> h<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Shorthand
1 2 | <span class="token keyword">const</span> <span class="token function-variable function">volume</span> <span class="token operator">=</span> <span class="token punctuation">(</span>l<span class="token punctuation">,</span> w <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">,</span> h <span class="token operator">=</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>l <span class="token operator">*</span> w <span class="token operator">*</span> h<span class="token punctuation">)</span><span class="token punctuation">;</span> |
8. Template Literals
Bạn đã gặp khó khăn trong việc lấy là một đoạn chuỗi mà vừa có cả biến vừa có cả string chưa? Để giải quyết vấn đề này thì ES6 có đưa ra cú pháp ${}
giúp việc thao tác với chuỗi trở nên đơn giản hơn.
1 2 3 4 5 | <span class="token comment">// Longhand</span> <span class="token keyword">const</span> welcome <span class="token operator">=</span> <span class="token string">'You have logged in as '</span> <span class="token operator">+</span> first <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> last <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 string">`You have logged in as </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>first<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>last<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span> |
9. Multi-line String
Bạn đã bao giờ viết một chuỗi trên nhiều dòng chưa, mình nghĩ là vẫn còn nhiều bạn vẫn viết theo cách sau:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> lorem <span class="token operator">=</span> <span class="token string">'Lorem ipsum dolor sit amet, consecteturnt'</span> <span class="token operator">+</span> <span class="token string">'adipisicing elit, sed do eiusmod tempor incididuntnt'</span> <span class="token operator">+</span> <span class="token string">'ut labore et dolore magna aliqua. Ut enim ad minimnt'</span> <span class="token operator">+</span> <span class="token string">'veniam, quis nostrud exercitation ullamco laborisnt'</span> <span class="token operator">+</span> <span class="token string">'nisi ut aliquip ex ea commodo consequat. Duis autent'</span> <span class="token operator">+</span> <span class="token string">'irure dolor in reprehenderit in voluptate velit esse.nt'</span> |
thay vào đó hãy viết như sau nhé:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> lorem <span class="token operator">=</span> <span class="token template-string"><span class="token string">`Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.`</span></span> |
10. Spread Operator Shorthand (…)
Đây là cú pháp khá là mới và có thể nhiều bạn còn chưa từng biết và cú pháp này. Trong bài các phương thức xử lý về mảng mình cũng đã từng giới thiệu qua rồi. Về cơ bản Spread Operator cho phép ta chuyển 1 mảng thành nhiều phần tử đơn lẻ, một chuỗi thành nhiều kỹ tự rồi chúng ta có thể tùy ý thao tác với từng phần tử hoặc ký tự đó.
Longhand
1 2 3 4 5 6 7 8 | <span class="token comment">// joining arrays</span> <span class="token keyword">const</span> odd <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">3</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> nums <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span> <span class="token punctuation">,</span><span class="token number">4</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>odd<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// cloning arrays</span> <span class="token keyword">const</span> arr <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 punctuation">;</span> <span class="token keyword">const</span> arr2 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
Shorthand
1 2 3 4 5 6 7 8 9 | <span class="token comment">// joining arrays</span> <span class="token keyword">const</span> odd <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">3</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> nums <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span> <span class="token punctuation">,</span><span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token operator">...</span>odd<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>nums<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 2, 4, 6, 1, 3, 5 ]</span> <span class="token comment">// cloning arrays</span> <span class="token keyword">const</span> arr <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 punctuation">;</span> <span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span><span class="token punctuation">;</span> |
Note: Không giống như concat()
bạn có thể sử dụng spread operator để chèn vào bất kỳ vị trí vào bạn muốn chứ không phải nhất thiết ở cuối một mảng.
1 2 3 | <span class="token keyword">const</span> odd <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">3</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> nums <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">...</span>odd<span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
11. Double Bitwise NOT (~~ )
Double bitwise NOT (~~ ) có thể dùng thay thế cho hàm làm tròn xuống Math.floor().
1 2 3 | Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">4.9</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">4</span> <span class="token comment">//true</span> <span class="token operator">~</span><span class="token operator">~</span><span class="token number">4.9</span> <span class="token operator">===</span> <span class="token number">4</span> <span class="token comment">//true</span> |
12. Exponent Power (** )
Đây là cách viết tắt của hàm pow()
1 2 3 4 | 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> 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">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span> Math<span class="token punctuation">.</span><span class="token function">pow</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 punctuation">;</span> <span class="token comment">// 64</span> |
Shorthand
1 2 3 4 | <span class="token number">2</span><span class="token operator">**</span><span class="token number">3</span> <span class="token comment">// 8</span> <span class="token number">2</span><span class="token operator">**</span><span class="token number">4</span> <span class="token comment">// 4</span> <span class="token number">4</span><span class="token operator">**</span><span class="token number">3</span> <span class="token comment">// 64</span> |
13. Chuyển đổi qua lại giữa chuỗi và số
Việc chuyển đổi này có vẻ không mấy là phức tạp cho lắm.
1 2 3 | <span class="token keyword">const</span> num1 <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"100"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> num2 <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"100.01"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
nhưng bạn có thể sử dụng cú pháp sau vừa đơn giản và dễ nhớ nữa:
1 2 3 | <span class="token keyword">const</span> num1 <span class="token operator">=</span> <span class="token operator">+</span><span class="token string">"100"</span><span class="token punctuation">;</span> <span class="token comment">// converts to int data type</span> <span class="token keyword">const</span> num2 <span class="token operator">=</span> <span class="token operator">+</span><span class="token string">"100.01"</span><span class="token punctuation">;</span> <span class="token comment">// converts to float data type</span> |
Kết luận
Trên đây chỉ là một cách giúp bạn rút gọn code hơn và không hẳn phải áp dụng hết trong mọi trường hợp, vì có thể việc mình rút gọn code nhiều quá dẫn đến khi đọc lại code sẽ trở thành khó khăn vậy nên bạn thận trọng và linh hoạt trong việc trình bày code.