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