Khi bắt đầu học Javascript, mình đã tìm kiếm được 1 số những trick và hôm nay mình sẽ chia sẻ cho các bạn những thứ hay ho đó, mình nghĩ nó sẽ giúp ích rất nhiều cho các bạn trong quá trình code.
1. Filter Unique Values
Set được đưa vào trong es6, cùng với … spread operator, chúng ta có thể sử dụng nó để tạo ra một array mới với giá trị duy nhất.
1 2 3 4 5 | <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">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">5</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token keyword">const</span> uniqueArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>array<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>uniqueArray<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [1, 2, 3, 5]</span> |
Trick này làm việc đối với những array có giá trị nguyên thuỷ (primitive type): undefined, null, boolean, string và number (Nếu bạn có array chứa những object, function, array thì không áp dụng Set được nhé !!!)
2. Every and Some
Hàm every và some không phải là 2 hàm thường sử dụng nhiều. Nhưng nó lại rất hữu ích trong một vài trường hợp nhất định.
every: chạy qua từng phần tử và kiểm tra một điều kiện nhất định. Nếu pass qua hết phần tử trong mảng sẽ trả về true. Nếu một phần tử không thoả màn điều kiện trả về false
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> more_random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">22</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token function-variable function">isPositive</span> <span class="token operator">=</span> <span class="token punctuation">(</span>number<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> number <span class="token operator">></span> <span class="token number">0</span> <span class="token punctuation">}</span> random_numbers<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>isPositive<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns true</span> more_random_numbers<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>isPositive<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns false</span> |
some: chạy qua từng phần tử và kiểm tra một điều kiện nhất định. Nếu tìm thấy được phần tử nào đủ điều kiện thì trả về true. Nếu chạy hết phần tử trong mảng mà vẫn không tìm thấy phần tử phù hợp điều kiện thì trả về false
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> more_random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">22</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token function-variable function">isPositive</span> <span class="token operator">=</span> <span class="token punctuation">(</span>number<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> number <span class="token operator">></span> <span class="token number">0</span> <span class="token punctuation">}</span> random_numbers<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>isPositive<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns true</span> more_random_numbers<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>isPositive<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns true</span> |
3. Convert to Boolean
Ngoài những giá trị boolean thuần true và false, tất cả giá trị trong Javascript là truthy ngoại trừ 0, '', null, undefined, NaN là falsy
Chúng ta có thể chuyển đổi giữa true và false bằng việc sử dụng ! (negative operator), toán tử ! có thể chuyển một type thành boolean
1 2 3 4 5 6 7 | <span class="token keyword">const</span> isTrue <span class="token operator">=</span> <span class="token operator">!</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">const</span> isFalse <span class="token operator">=</span> <span class="token operator">!</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">const</span> alsoFalse <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token number">0</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isTrue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: true</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "boolean"</span> |
Kiểu chuyển đổi này rất tiện trong những câu lệnh điều kiện.
4. Convert to String
Chuyển đổi nhanh một number thành một string, chúng ta có thể sử dụng toán tử + ''
1 2 3 4 5 | <span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token string">""</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 comment">// Result: "1"</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "string"</span> |
5. Get the Last Item(s) in an Array
Method slice() trong array có thể nhận một số nguyên âm, và nếu bạn đưa vào đó là số nguyên âm thì nó sẽ lấy từ điểm cuối của một array thay vì điểm bắt đầu
1 2 3 4 5 6 | <span class="token keyword">let</span> array <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> <span class="token number">9</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>array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</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 punctuation">;</span> <span class="token comment">// Result: [9]</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 function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [8, 9]</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 function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [7, 8, 9]</span> |
Nguồn tham khảo: https://morioh.com/p/2a323b4a7909