Array handling methods are common in JavaScript

Wednesday, 20/05/2020

Tram Ho

Hello everyone, many tips on CSS and today we have changed a bit with JavaScript. The topic today I want to share is “Array handling methods (Array) popular in JavaScript”. These methods are sure you will use a lot when working with JavaScript and its frameworks.

This sharing part helps new students to master their knowledge, partly also to revise their knowledge (mainly for me to have a source to search for when the code is cool. we begin

1. concat ()

concat() used to concatenate 2 or more arrays

concat() NOT change the original array
concat() returns a new array after joining

<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">&gt;</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">&gt;</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">&gt;</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>

var array1 = [ 'a' , 'b' , 'c' ] ;

var array2 = [ 'd' , 'e' , 'f' ] ;

var array3 = array1 . concat ( array2 ) ;

console . log ( array3 ) ;

console . log ( array1 ) ;

console . log ( array2 ) ;

> Array [ "a" , "b" , "c" , "d" , "e" , "f" ]

> Array [ "d" , "e" , "f" ]

Syntax

<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>

var newArray = oldArray . concat ( value1 [ , value2 [ , ... [ , valueN ] ] ] )

// valueN: Các giá trị hay mảng dùng để nối lại với nhau trong mảng mới

2. filter ()

filter() used to filter out elements in the array that meet certain conditions

filter() NOT change the original array
filter() returns a new array after filtering
filter() returns an array THAT if no element meets the condition

<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">&gt;</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">&gt;</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">&gt;</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>

var words = [ 'spray' , 'limit' , 'elite' , 'exuberant' , 'destruction' , 'present' ] ;

var result = words . filter ( function ( word ) {

return word . length > 6 ;

} ) ;

console . log ( result ) ;

console . log ( words ) ;

> Array [ "exuberant" , "destruction" , "present" ]

> Array [ "spray" , "limit" , "elite" , "exuberant" , "destruction" , "present" ]

Syntax

<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>

var newArray = arr . filter ( callback ( element [ , index [ , array ] ] ) [ , thisArg ] )

/* 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ố: */

// element: Phần tử đang được xử lý trong mảng

// index (không bắt buộc): Chỉ mục (index) của phần tử đang được xử lý

// array (không bắt buộc): Mảng nguồn mà hàm filter() đang xử lý

/* thisArg (không bắt buộc): Giá trị của this bên trong hàm callback */

3. find ()

find() also used to filter elements in the array, but it will return the FIRST value found in the array or may return undefined if not found.

find() NOT change the original array

<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">&gt;</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">&gt;</span> <span class="token number">12</span>
<span class="token operator">&gt;</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>

var array = [ 5 , 12 , 8 , 130 , 44 ] ;

var found = array . find ( function ( element ) {

return element > 10 ;

} ) ;

console . log ( found ) ;

> 12

> Array [ 5 , 12 , 8 , 130 , 44 ]

Syntax

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>

arr . find ( callback ( element [ , index [ , array ] ] ) [ , thisArg ] )

/* callback: Hàm thực thi với mỗi giá trị trong mảng,

có 3 tham số truyền vào: */

// element: Phần tử hiện tại đang được xử lý trong mảng

// 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

// array (không bắt buộc): Mảng nguồn mà hàm find() đang xử lý

/* 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 */

4. forEach ()

forEach() used to browse each element of the array

forEach() returns undefined

<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">&gt;</span> <span class="token string">"a"</span>
<span class="token operator">&gt;</span> <span class="token string">"b"</span>
<span class="token operator">&gt;</span> <span class="token string">"c"</span>
<span class="token operator">&gt;</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>

var array = [ 'a' , 'b' , 'c' ] ;

array . forEach ( function ( element ) {

console . log ( element ) ;

} ) ;

> "a"

> "b"

> "c"

Syntax

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>

arr . forEach ( function callback ( currentValue [ , index [ , array ] ] ) {

// your iterator

} [ , thisArg ] ) ;

/* 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ố: */

// currentValue (không bắt buộc): Giá trị của phần tử đang được duyệt

// index (không bắt buộc): Chỉ mục của phần tử đang được duyệt

// array (không bắt buộc): Mảng mà hàm forEach() đang duyệt

/* 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. */

5. includes ()

This is a new method in ES6

includes() checks whether the specified element exists in the array

includes() NOT change the original array
includes() returns Boolean type: true if found or false if not found

<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">&gt;</span> <span class="token boolean">true</span>
<span class="token operator">&gt;</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>

var array = [ 1 , 2 , 3 ] ;

console . log ( array . includes ( 2 ) ) ;

> true

> Array [ 1 , 2 , 3 ]

Syntax

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>

arr . includes ( valueToFind [ , fromIndex ] )

// valueToFind: Giá trị muốn kiểm tra.

// fromIndex (không bắt buộc): Vị trí trong mảng để bắt đầu tìm kiếm valueToFind

6. indexOf ()

indexOf() used to search for the position of an element in an array

indexOf() NOT change the original array
indexOf() returns the FIRST index value of the array if the element exists in the array
indexOf() returns -1 if the element does not exist in the array

<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">&gt;</span> <span class="token number">1</span>
<span class="token operator">&gt;</span> <span class="token number">4</span>
<span class="token operator">&gt;</span> <span class="token operator">-</span> <span class="token number">1</span>
<span class="token operator">&gt;</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>

var beasts = [ 'ant' , 'bison' , 'camel' , 'duck' , 'bison' ] ;

console . log ( beasts . indexOf ( 'bison' ) ) ;

console . log ( beasts . indexOf ( 'bison' , 2 ) ) ;

console . log ( beasts . indexOf ( 'giraffe' ) ) ;

> 1

> 4

> - 1

> Array [ "ant" , "bison" , "camel" , "duck" , "bison" ]

Syntax

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>

arr . indexOf ( searchElement [ , fromIndex ] )

// searchElement: Phần tử cần tìm trong mảng.

// fromIndex (không bắt buộc): Vị trí index nơi bắt đầu tìm kiếm

7. join ()

join() used to create a new string by concatenating all array elements, by default separating them with a comma or a specified string of characters .

join() NOT change the original array
join() returns the element itself if the array has only one element
join() returns an "" empty string "" if arr.length === 0

<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">&gt;</span> <span class="token string">"Fire,Air,Water"</span>
<span class="token operator">&gt;</span> <span class="token string">"FireAirWater"</span>
<span class="token operator">&gt;</span> <span class="token string">"Fire-Air-Water"</span>
<span class="token operator">&gt;</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>

var elements = [ 'Fire' , 'Air' , 'Water' ] ;

console . log ( elements . join ( ) ) ;

console . log ( elements . join ( '' ) ) ;

console . log ( elements . join ( '-' ) ) ;

> "Fire,Air,Water"

> "FireAirWater"

> "Fire-Air-Water"

> Array [ "Fire" , "Air" , "Water" ]

Syntax

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>

arr . join ( [ separator ] )

/* 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 */

8. map ()

map() helps to create a new array with elements resulting from executing a function on each element.

map() NOT change the original array

<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">&gt;</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">&gt;</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>

var array = [ 1 , 4 , 9 , 16 ] ;

var map = array . map ( function ( item ) {

return item * item ;

} ) ;

console . log ( map ) ;

> Array [ 1 , 16 , 81 , 256 ]

> Array [ 1 , 4 , 9 , 16 ]

Syntax

<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>

var new_array = arr . map ( function callback ( currentValue [ , index [ , array ] ] ) {

// return element for new_array

/* callback: Hàm để tạo ra phần tử cho mảng mới,

nhận vào 3 tham số: */

// currentValue: Giá trị của phần tử trong mảng đang được xử lý

// index (không bắt buộc): Index của phần tử trong mảng đang được xử lý

// array (không bắt buộc): Mảng đang được gọi với map

/* thisArg (không bắt buộc): Giá trị gán cho từ khóa this bên trong callback */

9. pop ()

pop() used to remove the last element from the array

pop() YES changes the original array
pop() returns the element that was removed from the array
pop() returns undefined if the array is empty

<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">&gt;</span> <span class="token string">"tomato"</span>
<span class="token operator">&gt;</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>

const plants = [ 'broccoli' , 'cauliflower' , 'cabbage' , 'kale' , 'tomato' ] ;

console . log ( plants . pop ( ) ) ;

> "tomato"

> Array [ "broccoli" , "cauliflower" , "cabbage" , "kale" ]

Syntax

arr <span class="token punctuation">.</span> <span class="token function">pop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>

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 ()

In contrast to pop() is shift()

shift() used to delete the first element from the array

shift() YES changes the original array
shift() returns the deleted element from the array
shift() returns undefined if the array is empty

<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">&gt;</span> <span class="token string">"broccoli"</span>
<span class="token operator">&gt;</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>

console . log ( plants . shift ( ) ) ;

> "broccoli"

> Array [ "cauliflower" , "cabbage" , "kale" , "tomato" ]

Syntax

arr <span class="token punctuation">.</span> <span class="token function">shift</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>

1 2	arr <span class="token punctuation">.</span> <span class="token function">shift</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>

Conclusion

The article seems to be long enough, I would like to pause here to avoid feeling bored when the surrounding is all text

Well, there is a small note that why does each method indicate what method is returning? Does it change the original array? You should pay close attention, because later when working with data will be very important to these issues, when you control the data well, the output of the method will know exactly when to use which method to request. sometimes not as clammy as me

If you find a good article, give me +1 upvote. If you like me, click the follow button for more cool stuff. Good luck !

See you in part 2!

Share the news now

Source : Viblo

Array handling methods are common in JavaScript

1. concat ()

2. filter ()

3. find ()

4. forEach ()

5. includes ()

6. indexOf ()

7. join ()

8. map ()

9. pop ()

10. shift ()

Conclusion

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers