Trong bài viết này, tôi sẽ chỉ ra một số thủ thuật JavaScript đơn giản và tuyệt vời mà bạn có thể sử dụng để cải thiện code của mình.
Trick 1: Kết hợp nhiều đối tượng
Hãy xem xét bạn có ba đối tượng khác nhau:
1 2 3 4 | <span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'a'</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'b'</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">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'c'</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> obj3 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'d'</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">;</span> |
Nếu ta muốn một đối tượng chứa các thuộc tính kết hợp của tất cả các đối tượng này, chúng ta có thể làm như sau với code đơn giản dưới đây:
1 2 | <span class="token keyword">const</span> objCombined <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>obj1<span class="token punctuation">,</span> <span class="token operator">...</span>obj2<span class="token punctuation">,</span> <span class="token operator">...</span>obj3<span class="token punctuation">}</span><span class="token punctuation">;</span> |
In ra giá trị objCombined trong console:
“...” là một “spread operator”, bạn có thể đọc thêm ở đây MDN Web Docs
objCombined là một đối tượng mới được tạo. Cập nhật bất kỳ giá trị nào của obj1, obj2 hoặc obj3 sẽ không ảnh hưởng đến các giá trị của objCombined
Đối với các đối tượng nested (lồng nhau), các tham chiếu của các đối tượng bên trong sẽ được copy và sẽ không tạo ra các đối tượng mới. Cú pháp spread sẽ sao chép tất cả các thuộc tính của đối tượng, nhưng sẽ chỉ tạo một đối tượng mới ở cấp cao nhất.
Bạn cũng có thể kết hợp các đối tượng bằng phương thức Object.assign ().
Trick 2: Chèn giá trị vào giữa một mảng
Xem xét bạn có mảng số nguyên sau:
1 2 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
Nếu ta muốn chèn số nguyên 4 vào index thứ 4 của mảng thì sao?
Chúng ta chỉ đơn giản có thể làm như vậy bằng cách sử dụng hàm splice của Array. Cú pháp của hàm splice là:
1 2 | arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> itemsToDelete<span class="token punctuation">,</span> item1ToAdd<span class="token punctuation">,</span> item2ToAdd<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">)</span> |
Để chèn số nguyên 4 vào index thứ 4 :
1 2 3 4 5 | arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> kết quả <span class="token punctuation">:</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token 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 number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span> |
Để chèn nhiều số nguyên vào một index, ta cũng có thể viết :
1 2 3 4 5 | arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">,</span> <span class="token number">102</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Output <span class="token punctuation">:</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">,</span> <span class="token number">102</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 number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span> |
Sử dụng splice sẽ làm thay đổi mảng ban đầu, không tạo ra một mảng mới :
Bạn muốn tìm hiểu thêm về chức năng của splice? Đọc thêm về nó trong bài viết sau : Array.splice and Array.slice in JavaScript
Trick 3: Lấy thời gian hiện tại
Để có được thời gian hiện tại trong JavaScript, bạn chỉ cần thực thi đoạn code sau:
1 2 3 4 5 6 | <span class="token keyword">var</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> date<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> Output <span class="token punctuation">:</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token number">1573490661715</span> |
Ngoài ra còn có một cách ngắn hơn để có được thời gian hiện tại.
1 2 3 4 | <span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> hoặc Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
Trick 4: Kiểm tra nếu một đối tượng là một mảng
Để kiểm tra xem một đối tượng có phải là một mảng không, bạn có thể gọi phương thứcisArray ()của Array.
1 2 3 | <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</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 punctuation">;</span> |
Để kiểm tra một mảng, sử dụng đoạn code sau:
1 2 3 | Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> |
Trick 5: Object Destructuring (Phá hủy đối tượng)
Hãy xem xét bạn có đối tượng sau trong JavaScript:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Kunal'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span> profile<span class="token punctuation">:</span> <span class="token string">'https://medium.com/@kunaltandon.kt'</span><span class="token punctuation">,</span> followers<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span> blogs<span class="token punctuation">:</span> <span class="token number">57</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Chúng ta có thể trực tiếp lấy các biến cho các thuộc tính của đối tượng bằng cách sử dụng cú pháp sau:
1 2 3 4 5 6 | <span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> profile<span class="token punctuation">,</span> blogs<span class="token punctuation">,</span> followers <span class="token punctuation">}</span> <span class="token operator">=</span> user<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Kunal</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>profile<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// https://medium.com/@kunaltandon.kt</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>blogs<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 57</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>followers<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1000</span> |
Sau khi chạy câu lệnh trên, bây giờ chúng ta sẽ có 4 biến khác nhau chứa các thuộc tính của đối tượng.
Để làm việc này, các tên biến ở phía bên trái phải khớp chính xác với tên chính của đối tượng.
Cú pháp được gọi là Object Destructuringphá hủy đối tượng.
Trick 6: Rest parameter syntax (Cú pháp tham số phần còn lại)
Bạn có biết rằng bạn có thể tạo một hàm chấp nhận bất kỳ số lượng đối số nào không? Có một cú pháp đặc biệt gọi là Rest parameter syntax để tạo ra một hàm như vậy.
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span>values<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>values<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">sum</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 function">sum</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 function">sum</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> |
Gọi các hàm sum sẽ thu thập các giá trị dưới dạng một mảng các tham số được truyền cho hàm. Điều này sẽ in đầu ra sau đây.
1 2 3 4 5 | <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">[</span><span class="token number">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 number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span> <span class="token punctuation">[</span><span class="token number">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> |
Chúng ta cũng có thể hoàn thành hàm sum và làm cho nó tính tổng của tất cả các tham số được truyền cho hàm.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span>values<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</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> values<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 punctuation">{</span> sum <span class="token operator">+=</span> values<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> sum<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">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</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 punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</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 punctuation">;</span> Output<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">3</span> <span class="token number">6</span> <span class="token number">10</span> |
Nguồn dịch : https://medium.com/developers-arena/some-simple-and-amazing-javascript-tricks-292e1962b1f6