Mở đầu
Bài viết này mình nhắm tới những người mới bắt đầu với Javascript hoặc những người mới bắt đầu làm việc với Javascript . Nhằm giúp refactor lại code nếu bạn gặp 1 số trường hợp dưới đây. Và thông qua đó giúp các bạn hiêu hơn về higher-order functions như map, reduce, and filter …..
Tại sao lại sử dụng map, filter, reduce ….
- Nhìn code sẽ dễ đọc hơn rất nhiều
- Dễ hiểu hơn
- Dễ dàng debug
- Tránh thay đổi mảng ban đầu, do đó, giảm thiểu những rủi ro có thể xảy ra .
- Không cần quản lí vòng lặp
- Hãy nhớ rằng nó luôn được trả về trong callback
1, Lặp qua tất cả các phần tử và nhận về 1 mảng đã sửa đổi
Đôi khi chúng ta có một mảng các object muốn sửa đổi / thêm các thuộc tính của từng đối tượng , cụ thể giả sử chúng ta có thể có một mảng các string mà ta sẽ biến tất cả chúng thành chữ thường . Trên thực tế có thể có vô số tình huống ở đó Map sẽ giúp chúng ta xử lý 1 cách dễ dàng .
Using for
1 2 3 4 5 6 | <span class="token keyword">var</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Jack"</span><span class="token punctuation">,</span> <span class="token string">"Jecci"</span><span class="token punctuation">,</span> <span class="token string">"Ram"</span><span class="token punctuation">,</span> <span class="token string">"Tom"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> upperCaseNames <span class="token operator">=</span> <span class="token punctuation">[</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> totalNames <span class="token operator">=</span> names<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator"><</span> totalNames <span class="token punctuation">;</span> i<span class="token operator">=</span> i <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> upperCaseNames<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> names<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Using map
1 2 3 | <span class="token keyword">var</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Jack"</span><span class="token punctuation">,</span> <span class="token string">"Jecci"</span><span class="token punctuation">,</span> <span class="token string">"Ram"</span><span class="token punctuation">,</span> <span class="token string">"Tom"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> upperCaseNames <span class="token operator">=</span> names<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>name <span class="token operator">=></span> name<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Chú ý: Nếu bạn sử dụng map .Thì bạn sẽ không dùng được
break,continue,returntrong khi lặp . nếu muốn sử dụng chúng hãy dùngeveryhoặcsome
2, Lặp qua tất cả các phần tử và thực hiện một hành động
Using for
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">print</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>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Jack"</span><span class="token punctuation">,</span> <span class="token string">"Jecci"</span><span class="token punctuation">,</span> <span class="token string">"Ram"</span><span class="token punctuation">,</span> <span class="token string">"Tom"</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> totalNames <span class="token operator">=</span> names<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator"><</span> totalNames <span class="token punctuation">;</span> i<span class="token operator">=</span> i <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">print</span><span class="token punctuation">(</span>names<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Using forEach
1 2 3 | <span class="token keyword">var</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Jack"</span><span class="token punctuation">,</span> <span class="token string">"Jecci"</span><span class="token punctuation">,</span> <span class="token string">"Ram"</span><span class="token punctuation">,</span> <span class="token string">"Tom"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> names<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>name<span class="token operator">=></span> <span class="token function">print</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
3, Lọc các phần tử của mảng
Tôi tin rằng trong quá trình bạn code bạn đã gặp tình huống phải lọc 1 số item ra khỏi mảng ban đầu .
Ví dụ: bài toán lọc các phần tử chăn trong mảng dưới đây
để làm được điều đó chúng ta phải xử lí khá rắc rối , nhưng với filter thì bạn có thể sử dụng nó 1 cách dễ dàng.
Using for
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">function</span> <span class="token function">isOdd</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> n <span class="token operator">%</span><span class="token number">2</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> numbers <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">var</span> odd <span class="token operator">=</span> <span class="token punctuation">[</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> total <span class="token operator">=</span> numbers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator"><</span> total <span class="token punctuation">;</span> i<span class="token operator">=</span> i <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> number <span class="token operator">=</span> numbers<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token function">isOdd</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> odd<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Using filter
1 2 3 | <span class="token keyword">var</span> numbers <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 number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span> <span class="token keyword">var</span> odd <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>n <span class="token operator">=></span> n<span class="token operator">%</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// single line</span> |
Bạn thấy đấy ngắn hơn raart nhiều phải không .
4, Tính toán các giá trị thành một giá trị duy nhất
Ví dụ, với một dãy số bạn có thể dễ dàng tính được tổng của tất cả các giá trị.
Using for
1 2 3 4 5 6 | <span class="token keyword">var</span> numbers <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 keyword">var</span> result <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> total <span class="token operator">=</span> numbers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator"><</span> total <span class="token punctuation">;</span> i<span class="token operator">=</span> i <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> result <span class="token operator">=</span> result <span class="token operator">+</span> numbers<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Using reduce
1 2 3 4 5 6 7 | <span class="token keyword">var</span> numbers <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 number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span>accumulator<span class="token punctuation">,</span> currentValue<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> accumulator <span class="token operator">+</span> currentValue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> initialVal <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">var</span> result <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>sum<span class="token punctuation">,</span> initialVal<span class="token punctuation">)</span><span class="token punctuation">;</span> |
5, Kiểm tra xem một mảng có chứa giá trị nào đó không
Đôi khi bạn muốn kiểm tra 1 phần tử nào đó có tồn tại trong 1 array cho trước hay không. hãy nghĩ đến some
Using for
1 2 3 4 5 6 7 8 | <span class="token keyword">var</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"ram"</span><span class="token punctuation">,</span> <span class="token string">"raj"</span><span class="token punctuation">,</span> <span class="token string">"rahul"</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> totalNames <span class="token operator">=</span> names<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator"><</span> totalNames <span class="token punctuation">;</span> i<span class="token operator">=</span> i <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>names<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"rahul"</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">"%c found rahul"</span><span class="token punctuation">,</span> <span class="token string">"color:red"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Using some
1 2 3 4 5 6 | <span class="token keyword">var</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"ram"</span><span class="token punctuation">,</span> <span class="token string">"raj"</span><span class="token punctuation">,</span> <span class="token string">"rahul"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> isRahulPresent <span class="token operator">=</span> names<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>name <span class="token operator">=></span> name<span class="token operator">===</span><span class="token string">"rahul"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>isRahulPresent<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">"%c found rahul"</span><span class="token punctuation">,</span> <span class="token string">"color:red"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
6, kiểm tra xem mọi phần tử trong một mảng có đáp ứng điều kiện không
Using for
1 2 3 4 5 6 7 | <span class="token keyword">var</span> num <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 number">0</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> total <span class="token operator">=</span> numbers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator"><</span> total <span class="token punctuation">;</span> i<span class="token operator">=</span> i <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>num <span class="token operator"><=</span> <span class="token number">0</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">"0 present in array"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Using some
1 2 3 4 5 6 | <span class="token keyword">var</span> num <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 number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> isZeroFree <span class="token operator">=</span> num<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>e <span class="token operator">=></span> e <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>isZeroFree<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">"0 present in array"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Kết luận
Hy vọng qua bài viết này các bạn có thể tham khảo để refactor ứng dụng của mình 1 cách thông mình hơn. giúp cho code dễ đọc dễ hiểu và dễ maintain, debug hơn.
Thanks for reading. I hope you upvote this.