Xin chào các bạn, tips về CSS nhiều rồi hôm nay ta đổi gió một chút với JavaScript. Chủ đề hôm nay mình muốn chia sẻ đó là “Các phương thức xử lý mảng (Array) phổ biến trong JavaScript”. Những method này chắc chắn bạn sẽ sử dụng rất nhiều khi làm việc với JavaScript và các framework của nó.
Bài chia sẻ này một phần giúp các bạn mới học nắm chắc kiến thức hơn, một phần cũng là để mình ôn lại kiến thức (chủ yếu để mình có nguồn tìm kiếm mỗi khi code ngáo ta bắt đầu thôi
1. concat()
concat() dùng để nối 2 hay nhiều mảng với nhau
concat()KHÔNG làm thay đổi mảng ban đầuconcat()trả về 1 mảng mới sau khi nối
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</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 punctuation">;</span> <span class="token keyword">var</span> array2 <span class="token operator">=</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 string">'f'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> array3 <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>array2<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>array3<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>array1<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>array2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"a"</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 string">"f"</span><span class="token punctuation">]</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"a"</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 operator">></span> Array <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 string">"f"</span><span class="token punctuation">]</span> |
Cú pháp
1 2 3 4 | <span class="token keyword">var</span> newArray <span class="token operator">=</span> oldArray<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>value1<span class="token punctuation">[</span><span class="token punctuation">,</span> value2<span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">[</span><span class="token punctuation">,</span> valueN<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// valueN: Các giá trị hay mảng dùng để nối lại với nhau trong mảng mới</span> |
2. filter()
filter() dùng để lọc ra các phần tử trong mảng thoả mãn một điều kiện nào đó
filter()KHÔNG làm thay đổi mảng ban đầufilter()trả về 1 mảng mới sau khi lọcfilter()trả về một mảng RỖNG nếu không có phần tử nào thỏa mãn điều kiện
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">var</span> words <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'spray'</span><span class="token punctuation">,</span> <span class="token string">'limit'</span><span class="token punctuation">,</span> <span class="token string">'elite'</span><span class="token punctuation">,</span> <span class="token string">'exuberant'</span><span class="token punctuation">,</span> <span class="token string">'destruction'</span><span class="token punctuation">,</span> <span class="token string">'present'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> result <span class="token operator">=</span> words<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>word<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> word<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">6</span><span class="token punctuation">;</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>result<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>words<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"exuberant"</span><span class="token punctuation">,</span> <span class="token string">"destruction"</span><span class="token punctuation">,</span> <span class="token string">"present"</span><span class="token punctuation">]</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"spray"</span><span class="token punctuation">,</span> <span class="token string">"limit"</span><span class="token punctuation">,</span> <span class="token string">"elite"</span><span class="token punctuation">,</span> <span class="token string">"exuberant"</span><span class="token punctuation">,</span> <span class="token string">"destruction"</span><span class="token punctuation">,</span> <span class="token string">"present"</span><span class="token punctuation">]</span> |
Cú pháp
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> newArray <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span>element<span class="token punctuation">[</span><span class="token punctuation">,</span> index<span class="token punctuation">[</span><span class="token punctuation">,</span> array<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">,</span> thisArg<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">/* callback: Là hàm test, dùng để kiểm tra từng phần tử của mảng. Trả về true để giữ lại phần tử, hoặc false để loại phần tử ra. Nó được gọi với 3 tham số: */</span> <span class="token comment">// element: Phần tử đang được xử lý trong mảng</span> <span class="token comment">// index (không bắt buộc): Chỉ mục (index) của phần tử đang được xử lý</span> <span class="token comment">// array (không bắt buộc): Mảng nguồn mà hàm filter() đang xử lý</span> <span class="token comment">/* thisArg (không bắt buộc): Giá trị của this bên trong hàm callback */</span> |
3. find()
find() cũng dùng để lọc phần tử trong mảng, tuy nhiên nó sẽ trả về giá trị ĐẦU TIÊN tìm thấy ở trong mảng hoặc có thể trả về undefined nếu không tìm thấy
find()KHÔNG làm thay đổi mảng ban đầu
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">var</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> found <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> element <span class="token operator">></span> <span class="token number">10</span><span class="token punctuation">;</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>found<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 punctuation">;</span> <span class="token operator">></span> <span class="token number">12</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span> |
Cú pháp
1 2 3 4 5 6 7 8 9 10 11 12 | arr<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span>element<span class="token punctuation">[</span><span class="token punctuation">,</span> index<span class="token punctuation">[</span><span class="token punctuation">,</span> array<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">,</span> thisArg<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">/* callback: Hàm thực thi với mỗi giá trị trong mảng, có 3 tham số truyền vào: */</span> <span class="token comment">// element: Phần tử hiện tại đang được xử lý trong mảng</span> <span class="token comment">// index (không bắt buộc): Thứ tự của phần tử hiện tại đang được xử lý trong mảng</span> <span class="token comment">// array (không bắt buộc): Mảng nguồn mà hàm find() đang xử lý</span> <span class="token comment">/* thisArg (không bắt buộc): Đối tượng tùy chọn để sử dụng như thế nào khi thực hiện callback */</span> |
4. forEach()
forEach() dùng để duyệt qua từng phần tử của mảng
forEach()trả vềundefined
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">var</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</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 punctuation">;</span> array<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>element<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>element<span class="token punctuation">)</span><span class="token punctuation">;</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>array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> <span class="token string">"a"</span> <span class="token operator">></span> <span class="token string">"b"</span> <span class="token operator">></span> <span class="token string">"c"</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"a"</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> |
Cú pháp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">callback</span><span class="token punctuation">(</span>currentValue<span class="token punctuation">[</span><span class="token punctuation">,</span> index<span class="token punctuation">[</span><span class="token punctuation">,</span> array<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// your iterator</span> <span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">,</span> thisArg<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* callback: Hàm sẽ thực thi lên từng phần tử của mảng được gọi hàm này nhận 3 tham số: */</span> <span class="token comment">// currentValue (không bắt buộc): Giá trị của phần tử đang được duyệt</span> <span class="token comment">// index (không bắt buộc): Chỉ mục của phần tử đang được duyệt</span> <span class="token comment">// array (không bắt buộc): Mảng mà hàm forEach() đang duyệt</span> <span class="token comment">/* thisArg (không bắt buộc): Giá trị được gán cho từ khóa this bên trong hàm callback khi được thực thi. */</span> |
5. includes()
Đây là method mới trong ES6
includes() kiểm tra xem phần tử đã cho có tồn tại trong mảng hay không
includes()KHÔNG làm thay đổi mảng ban đầuincludes()trả về kiểu Boolean:truenếu tìm thấy hoặcfalsenếu không tìm thấy
1 2 3 4 5 6 7 8 | <span class="token keyword">var</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 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">includes</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>array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> <span class="token boolean">true</span> <span class="token operator">></span> Array <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> |
Cú pháp
1 2 3 4 5 | arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>valueToFind<span class="token punctuation">[</span><span class="token punctuation">,</span> fromIndex<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// valueToFind: Giá trị muốn kiểm tra.</span> <span class="token comment">// fromIndex (không bắt buộc): Vị trí trong mảng để bắt đầu tìm kiếm valueToFind</span> |
6. indexOf()
indexOf() dùng để tìm kiếm vị trí của phần tử trong mảng
indexOf()KHÔNG làm thay đổi mảng ban đầuindexOf()trả về giá trị index ĐẦU TIÊN của mảng nếu phần tử tồn tại trong mảngindexOf()trả về-1nếu phần tử không tồn tại trong mảng
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> beasts <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'ant'</span><span class="token punctuation">,</span> <span class="token string">'bison'</span><span class="token punctuation">,</span> <span class="token string">'camel'</span><span class="token punctuation">,</span> <span class="token string">'duck'</span><span class="token punctuation">,</span> <span class="token string">'bison'</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>beasts<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'bison'</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>beasts<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'bison'</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>beasts<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'giraffe'</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>beasts<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">></span> <span class="token number">4</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"ant"</span><span class="token punctuation">,</span> <span class="token string">"bison"</span><span class="token punctuation">,</span> <span class="token string">"camel"</span><span class="token punctuation">,</span> <span class="token string">"duck"</span><span class="token punctuation">,</span> <span class="token string">"bison"</span><span class="token punctuation">]</span> |
Cú pháp
1 2 3 4 5 | arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>searchElement<span class="token punctuation">[</span><span class="token punctuation">,</span> fromIndex<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// searchElement: Phần tử cần tìm trong mảng.</span> <span class="token comment">// fromIndex (không bắt buộc): Vị trí index nơi bắt đầu tìm kiếm</span> |
7. join()
join() dùng để tạo ra một chuỗi mới bằng cách nối tất cả các phần tử của mảng, mặc định ngăn cách chúng bởi dấu phẩy hoặc một chuỗi ký tự xác định.
join()KHÔNG làm thay đổi mảng ban đầujoin()trả về chính phần tử nếu mảng chỉ có một phần tửjoin()trả về một chuỗi rỗng""nếuarr.length === 0
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> elements <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Fire'</span><span class="token punctuation">,</span> <span class="token string">'Air'</span><span class="token punctuation">,</span> <span class="token string">'Water'</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>elements<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 punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>elements<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 punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>elements<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 punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>elements<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> <span class="token string">"Fire,Air,Water"</span> <span class="token operator">></span> <span class="token string">"FireAirWater"</span> <span class="token operator">></span> <span class="token string">"Fire-Air-Water"</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"Fire"</span><span class="token punctuation">,</span> <span class="token string">"Air"</span><span class="token punctuation">,</span> <span class="token string">"Water"</span><span class="token punctuation">]</span> |
Cú pháp
1 2 3 4 5 | arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">[</span>separator<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">/* separator (không bắt buộc): Là một chuỗi xác định dùng để ngăn cách các phần tử liền kề của mảng */</span> |
8. map()
map() giúp tạo ra một mảng mới với các phần tử là kết quả từ việc thực thi một hàm lên TỪNG PHẦN TỬ của mảng ban đầu
map()KHÔNG làm thay đổi mảng ban đầu
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</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">4</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> map <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">map</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> item<span class="token punctuation">;</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>map<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 punctuation">;</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">81</span><span class="token punctuation">,</span> <span class="token number">256</span><span class="token punctuation">]</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">]</span> |
Cú pháp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">var</span> new_array <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">callback</span><span class="token punctuation">(</span>currentValue<span class="token punctuation">[</span><span class="token punctuation">,</span> index<span class="token punctuation">[</span><span class="token punctuation">,</span> array<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// return element for new_array</span> <span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">,</span> thisArg<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">/* callback: Hàm để tạo ra phần tử cho mảng mới, nhận vào 3 tham số: */</span> <span class="token comment">// currentValue: Giá trị của phần tử trong mảng đang được xử lý</span> <span class="token comment">// index (không bắt buộc): Index của phần tử trong mảng đang được xử lý</span> <span class="token comment">// array (không bắt buộc): Mảng đang được gọi với map</span> <span class="token comment">/* thisArg (không bắt buộc): Giá trị gán cho từ khóa this bên trong callback */</span> |
9. pop()
pop() dùng để xoá phần tử cuối cùng ra khỏi mảng
pop()CÓ làm thay đổi mảng ban đầupop()trả về phần tử đã bị xoá ra khỏi mảngpop()trả vềundefinednếu mảng rỗng
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> plants <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'broccoli'</span><span class="token punctuation">,</span> <span class="token string">'cauliflower'</span><span class="token punctuation">,</span> <span class="token string">'cabbage'</span><span class="token punctuation">,</span> <span class="token string">'kale'</span><span class="token punctuation">,</span> <span class="token string">'tomato'</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>plants<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 punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>plants<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> <span class="token string">"tomato"</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"broccoli"</span><span class="token punctuation">,</span> <span class="token string">"cauliflower"</span><span class="token punctuation">,</span> <span class="token string">"cabbage"</span><span class="token punctuation">,</span> <span class="token string">"kale"</span><span class="token punctuation">]</span> |
Cú pháp
1 2 | arr<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
10. shift()
Trái ngược với pop() là shift()
shift() dùng để xoá phần tử đầu tiên ra khỏi mảng
shift()CÓ làm thay đổi mảng ban đầushift()trả về phần tử đã bị xoá ra khỏi mảngshift()trả vềundefinednếu mảng rỗng
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> plants <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'broccoli'</span><span class="token punctuation">,</span> <span class="token string">'cauliflower'</span><span class="token punctuation">,</span> <span class="token string">'cabbage'</span><span class="token punctuation">,</span> <span class="token string">'kale'</span><span class="token punctuation">,</span> <span class="token string">'tomato'</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>plants<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 punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>plants<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">></span> <span class="token string">"broccoli"</span> <span class="token operator">></span> Array <span class="token punctuation">[</span><span class="token string">"cauliflower"</span><span class="token punctuation">,</span> <span class="token string">"cabbage"</span><span class="token punctuation">,</span> <span class="token string">"kale"</span><span class="token punctuation">,</span> <span class="token string">"tomato"</span><span class="token punctuation">]</span> |
Cú pháp
1 2 | arr<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
Tạm kết
Bài viết có vẻ đã đủ dài, mình xin tạm dừng ở đây để tránh cảm giác chán nản khi xung quanh toàn là chữ
À có một note nhỏ đó là lại sao mỗi method mình đều chỉ ra phương thức là trả về cái gì ? nó có làm thay đổi array gốc không ? Các bạn hãy thật chú ý nhé, vì sau này khi làm việc với dữ liệu sẽ rất quan trọng các vấn đề này, khi bạn kiểm soát tốt dữ liệu, output của method bạn sẽ biết chính xác khi nào cần dùng method nào để thỉnh thoảng không bị ngáo như mình
Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !
Hẹn gặp lại ở part 2 nhé !