Giới thiệu
Xin chào mọi người, buổi trước mình có viết bài về xử lý mảng trong ruby nhưng vấn đề là không phải lúc nào mình cũng làm việc đó ở bên back-end đúng không.
Thế nên hôm này mình sẽ bổ xung thêm cách xử lý mảng trong javascript cho nó có đôi có cặp, nói thế thôi chứ thực ra thì chúng giống na ná nhau đến 80% rồi nên cũng không có gì mới mẻ lắm đâu.
Lets’ go. Hãy tạo 1 mảng trước đã:
1 2 | <span class="token keyword">var</span> foods <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'tangerine'</span><span class="token punctuation">,</span> <span class="token string">'poultry_leg'</span><span class="token punctuation">,</span> <span class="token string">'pizza'</span><span class="token punctuation">,</span> <span class="token string">'hotdog'</span><span class="token punctuation">]</span> |
1. Length
Sẽ trả về tổng số phần tử của mảng.
1 2 | f<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// 5</span> |
Hầu hết mọi người thường làm rỗng một mảng bằng cách gán nó bằng một mảng rỗng, nhưng như thế có thật sự hiệu quả không?
1 2 3 4 5 6 7 8 9 | <span class="token keyword">let</span> foo <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> <span class="token keyword">let</span> bar <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> <span class="token keyword">let</span> foo2 <span class="token operator">=</span> foo<span class="token punctuation">;</span> <span class="token keyword">let</span> bar2 <span class="token operator">=</span> bar<span class="token punctuation">;</span> foo<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// so good</span> bar <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// not good</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">,</span> foo2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [] []</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bar<span class="token punctuation">,</span> bar2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [] [1, 2, 3]</span> |
Khi làm rỗng một mảng bằng cách gán nó bằngrỗng thì hiểu đơn giản là mảng đó sẽ quên đi địa chỉ ô nhớ lưu giá trị [1, 2, 3] và sẽ nhận địa chỉ ô nhớ lưu giá trị [] => dữ liệu cũ không bị xóa đi mà còn tạo thêm một mảng mới với giá trị rỗng.
Gán độ dài của mảng đó về không thì lại khác, việc này sẽ trực tiếp thao tác với địa chỉ ô nhớ lưu giá trị [1, 2, 3] và gán cho địa chỉ ô nhớ đó về rỗng.
Tip: Cách đơn giản cũng như hiệu quả nhất là sử dụng .length = 0 để làm rỗng một mảng
1 2 3 | foods<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine']</span> foods<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// []</span> |
2. Push
Thêm một phẩn tử vào vị trí cuối cùng của mảng.
1 2 3 | foods<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'grape'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'poultry_leg', 'pizza', 'hotdog', 'grapes']</span> |
Tip: Thêm nhiều phần tử trong mảng thông qua Spread syntax (...) – một tính năng tương đối hay của ES6 có thể thay thế cho hàm concat.
1 2 3 4 | <span class="token keyword">let</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 punctuation">;</span> <span class="token keyword">let</span> num2 <span class="token operator">=</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> numbers<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, 5, 6, 7, 8, 9]</span> |
3. Unshift
Thêm một phần tử vào đầu của mảng.
1 2 3 | foods<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token string">'grape'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> foods<span class="token punctuation">;</span> <span class="token comment">// [ 'grapes', 'apple', 'tangerine', 'poultry_leg', 'pizza', 'hotdog']</span> |
Tip: Thêm nhiều phần tử trong mảng thông qua Spread syntax (...)
1 2 3 4 | <span class="token keyword">let</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 punctuation">;</span> <span class="token keyword">let</span> num2 <span class="token operator">=</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> numbers<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token operator">...</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [7, 8, 9, 1, 2, 3, 4, 5, 6]</span> |
4. Pop
Xóa bỏ một phần tử cuối cùng của mảng và trả về phần tử vừa được xóa.
1 2 3 4 | foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'poultry_leg', 'pizza', 'hotdog']</span> foods<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "hotdog"</span> foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'poultry_leg', 'pizza']</span> |
5. Shift
Xóa bỏ một phần tử đầu tiên của mảng và cũng trả về phẩn tử vừa được xóa.
1 2 3 4 | foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'poultry_leg', 'pizza', 'hotdog']</span> foods<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "apple"</span> foods<span class="token punctuation">;</span> <span class="token comment">// ['tangerine', 'poultry_leg', 'pizza', 'hotdog']</span> |
6. Join
Nối các phần tử của một mảng lại với nhau thành một chuỗi.
1 2 3 4 5 | foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'poultry_leg', 'pizza', 'hotdog']</span> foods<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "apple,tangerine,poultry_leg,pizza,hotdog"</span> foods<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "appletangerinepoultry_legpizzahotdog" </span> foods<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "apple-tangerine-poultry_leg-pizza-hotdog"</span> |
7. Concat
Kết hợp các mảng lại với nhau:
1 2 3 4 | <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 punctuation">;</span> <span class="token keyword">let</span> newArray <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">concat</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">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 number">5</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 number">7</span><span class="token punctuation">]</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> undefined<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [0, 1, 2, 3, 4, [5, 6], 7, 8, 9, undefined, null]</span> |
Tip: Cũng có thể sử dụng Spread syntax - (...) thay có concat
1 2 3 4 5 6 | <span class="token keyword">let</span> languages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"JavaScript"</span><span class="token punctuation">,</span> <span class="token string">"Ruby"</span><span class="token punctuation">,</span> <span class="token string">"SQL"</span><span class="token punctuation">]</span> <span class="token keyword">let</span> frameworks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"React"</span><span class="token punctuation">,</span> <span class="token string">"Rails"</span><span class="token punctuation">]</span> <span class="token keyword">let</span> myStack <span class="token operator">=</span> languages<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>frameworks<span class="token punctuation">)</span> <span class="token keyword">let</span> myStack <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>languages<span class="token punctuation">,</span> <span class="token operator">...</span>frameworks<span class="token punctuation">]</span> <span class="token comment">// ["JavaScript", "Ruby", "SQL", "React", "Rails"]</span> |
8. Reverse
Đảo ngược vị trí của các phẩn tử trong một mảng.
1 2 3 4 | foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'poultry_leg', 'pizza', 'hotdog']</span> foods<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> foods<span class="token punctuation">;</span> <span class="token comment">// ['hotdog', 'pizza', 'poultry_leg', 'tangerine', 'apple']</span> |
Tip: Đảo ngược một chuỗi (convert sang mảng -> đảo ngược -> convert lại string)
1 2 3 | <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">"Athena"</span> <span class="token keyword">let</span> strReverse <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "anehtA"</span> |
9. indexOf và lastIndexOf
indexOf trả về chỉ mục của phẩn tử tìm thấy đầu tiên trong mảng đó, nếu không có sẽ trả về -1.
lastIndexOf trả về chỉ mục của phần tử tìm thấy cuối cùng trong mảng đó, nếu không có sẽ trả về -1.
1 2 | foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'beef', 'pizza', 'apple', 'hotdog']</span> |
| apple | tangerine | beef | pizza | apple | hotdog | egg | |
|---|---|---|---|---|---|---|---|
| Index | 0 | 1 | 2 | 3 | 4 | 5 | – |
| indexOf | 0 | 1 | 2 | 3 | 0 | 5 | -1 |
| lastIndexOf | 4 | 1 | 2 | 3 | 4 | 5 | -1 |
1 2 3 4 | foods<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'apple'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0</span> foods<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'apple'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span> foods<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'egg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-1</span> |
10. Some
Kiểm tra nếu như có bất kỳ một phần tử nào thỏa mãn điều kiện đề ra thì trả vềtrue.
1 2 3 4 | <span class="token keyword">let</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 punctuation">;</span> num<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item <span class="token operator">></span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> num<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item <span class="token operator">></span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span> |
Trên là cách viết rút gọn sử dụng arrow function trong ES6 còn cú pháp đầy đủ sẽ như sau:
1 2 | num<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> item <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> |
11. Every
Nghiêm ngặt hơn đó là every, chỉ trả về true khi tất cả các phần tử thỏa mãn điều kiện đề ra.
1 2 3 4 | <span class="token keyword">let</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 punctuation">;</span> num<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item <span class="token operator">></span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span> num<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> |
12. Sort
Sắp xếp các phần tử trong mảng, nếu không truyền vào điều kiện gì thì mặc định sẽ sắp xếp theo char code.
1 2 3 4 5 6 7 | <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["b", "c", "d", "e"]</span> <span class="token comment">//custom sort</span> <span class="token keyword">let</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">100</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">;</span> num<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token operator">-</span>b <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, 5, 12, 23, 100]</span> |
Note: Hãy cẩn thận khi sử dụng sort, nên nhớ rằng phương thức này sắp xếp dựa trên char code chứ không phải giá trị, ví dụ điển hình là 100 > 2 nhưng lại “100” < “2”.
1 2 3 | <span class="token keyword">let</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">100</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">;</span> num<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 100, 12, 2, 23, 3, 4, 5]</span> |
Tip: Xáo trộn một mảng bằng sort.
1 2 3 | <span class="token keyword">let</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">4</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> arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
13. Filter
Phương thức filter() tạo ra một mảng mới dự trên các điều kiện mà trả về kết quả true từ một mảng hiện có.
1 2 3 4 | foods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'poultry_leg', 'pizza', 'hotdog']</span> <span class="token keyword">let</span> vegFoods <span class="token operator">=</span> foods<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span> food <span class="token operator">=></span> <span class="token function">isVeg</span><span class="token punctuation">(</span>food<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> vegFoods<span class="token punctuation">;</span> <span class="token comment">// ['apple', 'tangerine', 'pizza']</span> |
14. Reduce
Phương thức reduce() thực thi các phương thức xử lý đối với từng phần tử trong mảng và cuối cùng tổng hợp kết quả về trả về cho chúng ta.
Hãy xem một ví dụ đơn giản:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">let</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">let</span> result <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// cách 1</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span> currentNum<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> res<span class="token operator">+</span> currentNum<span class="token punctuation">}</span><span class="token punctuation">;</span> numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>add<span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span> <span class="token comment">// cách 2: dùng arrow function</span> numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span> currenNum<span class="token punctuation">)</span> <span class="token operator">=></span> res <span class="token operator">+</span> currenNum<span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span> |
15. ReduceRight
Tương tự như reduce nhưng các phần tử truyền vào theo thứ tự từ phải qua trái (phần tử cuối cùng chạy trước, phần tử đầu tiên chạy sau cùng).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">let</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">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">let</span> result <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span>result<span class="token punctuation">,</span> num<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>num<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> result <span class="token operator">+</span> num<span class="token punctuation">;</span> <span class="token punctuation">}</span> array<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>sum<span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// từ trái qua phải i.e., 1,2,3,4,5</span> array<span class="token punctuation">.</span><span class="token function">reduceRight</span><span class="token punctuation">(</span>sum<span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// từ phải qua trái i.r., 5,4,3,2,1</span> array<span class="token punctuation">.</span><span class="token function">reduceRight</span><span class="token punctuation">(</span> <span class="token punctuation">(</span>res<span class="token punctuation">,</span> num<span class="token punctuation">)</span> <span class="token operator">=></span> res<span class="token operator">+</span>num<span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// with arrow function</span> |
16. Map
Bạn muốn biến đổi dữ liệu của từng phần tử trong một mảng, hoặc bạn muốn lấy ra những thuộc tính của đối tượng trong mảng thì lúc đó hãy sử dụng map.
Map cho phép bạn tùy biến dữ liệu trên từng phần tử (cộng trừ nhân chia, thêm bớt các kiểu) để rồi ta được một mảng mới đã có dữ liệu từ mảng ban đầu nhưng đã qua xử lý.
1 2 3 4 5 6 7 8 | <span class="token keyword">let</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 comment">// cách 1: Viết đầy đủ</span> <span class="token keyword">function</span> <span class="token function">double</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> num<span class="token operator">*</span>num<span class="token punctuation">}</span><span class="token punctuation">;</span> numbers<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>double<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 4, 9, 16, 25]</span> <span class="token comment">// cách 2: Dùng arrow function</span> numbers<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>num <span class="token operator">=></span> num<span class="token operator">*</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span> |
17. Splice
Phương thức splice(ịndex, n, m) sẽ xóa bỏ n phần tử tính từ index trở đi và cũng thêm vào những phần tử mong muốn – m.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">let</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">2</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> array<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</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">// tại vị trí index = 2: xóa đi 0 phần tử rồi sau đó chèn vào 3</span> array<span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, 5]</span> array<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</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">95</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// tại vị trí index = 2: xóa đi 1 phần tử rồi sau đó chèn vào 30, 95</span> array<span class="token punctuation">;</span> <span class="token comment">// [1, 2, 30, 95, 4, 5]</span> array<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</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 comment">// tại vị trí index = 2: xóa đi 0 phần tử phía sau đó</span> array<span class="token punctuation">;</span> <span class="token comment">// [1, 2, 30, 95, 4, 5]</span> array<span class="token punctuation">.</span><span class="token function">split</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">// tại vị trí index = 2: xóa đi tất cả các phần tử phía sau đó</span> array<span class="token punctuation">;</span> <span class="token comment">// [1, 2]</span> |
18. Slice
Phương thức slice(start, end) trả về một bản sao từ mảng ban đầu, trong đó:
start: vị trí bắt đầu trính xuất
end: vị trí kêt thúc, kết quả sẽ không bao gồm phần tử end.
1 2 3 4 | <span class="token keyword">let</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> numbers<span class="token punctuation">.</span><span class="token function">slice</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 comment">// [2, 3, 4, 5]</span> numbers<span class="token punctuation">.</span><span class="token function">slice</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 punctuation">;</span> <span class="token comment">// [2, 3]</span> |
Tip: Lấy ra n phần tử cuối cùng một mảng
1 2 3 4 5 6 7 | <span class="token comment">// get last n elements</span> array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</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> numbers<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 comment">// 5</span> numbers<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 comment">// [3, 4, 5]</span> |
19. forEach
Thực thi một callback function với từng phần tử trong mảng. Chúng ta không thể sử dung break và continue trong forEach:
1 2 3 | <span class="token keyword">let</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> numbers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> e <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Bonus
1. Loại bỏ phần tử trùng lặp
1 2 3 4 | <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> uniqueArray<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [1, 2, 3, 5]</span> |
2. Lấy ra những phần tử cuối cùng trong một mảng
Đó là một mẹo trong khi sử dụng slice mình có nêu ở bên trên.
1 2 3 4 5 | let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.slice(-1); // Result: [9] array.slice(-2); // Result: [8, 9] array.slice(-3); // Result: [7, 8, 9] |
3. Duỗi thẳng một mảng
Trong ES2019 có đưa thêm một hàm đó là flat()
Hàm này nhận duỗi thẳng một mảng tùy theo số ta truyền vào.
1 2 3 4 5 | let array = [0, 1, 2, [3, [[4, 5], [6], 7], 8, 9], 10 , [11]]; array.flat(1); // [0, 1, 2, 3, [[4, 5], [6], 7], 8, 9, 10, 11] array.flat(2); // [0, 1, 2, 3, [4, 5], [6], 7, 8, 9, 10, 11] array.flat(3); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] |
Tham khảo
https://medium.com/better-programming/20-methods-to-get-to-know-javascript-array-operations-6935e757729b
https://medium.com/@PurpleGreenLemon/simplify-your-javascript-with-these-6-array-methods-db4c278f08c9