Popular array handling methods (Array) in JavaScript (Part 2)

Wednesday, 20/05/2020

Tram Ho

Hi guys, in the previous article I have introduced you to 10 useful methods when working with arrays, today we will continue to elaborate on the great methods of it, let’s begin.

11. push ()

push() helps us add one or more elements at the end of the array

push() YES changes the original array
push() returns the NEW LENGTH of the array (arr.lenght) after adding the element

<span class="token keyword">var</span> animals <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'pigs'</span> <span class="token punctuation">,</span> <span class="token string">'goats'</span> <span class="token punctuation">,</span> <span class="token string">'sheep'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> count <span class="token operator">=</span> animals <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token string">'chickens'</span> <span class="token punctuation">,</span> <span class="token string">'cats'</span> <span class="token punctuation">,</span> <span class="token string">'dogs'</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> count <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> animals <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token operator">&gt;</span> <span class="token number">6</span>
<span class="token operator">&gt;</span> Array <span class="token punctuation">[</span> <span class="token string">"pigs"</span> <span class="token punctuation">,</span> <span class="token string">"goats"</span> <span class="token punctuation">,</span> <span class="token string">"sheep"</span> <span class="token punctuation">,</span> <span class="token string">"chickens"</span> <span class="token punctuation">,</span> <span class="token string">"cats"</span> <span class="token punctuation">,</span> <span class="token string">"dogs"</span> <span class="token punctuation">]</span>

var animals = [ 'pigs' , 'goats' , 'sheep' ] ;

var count = animals . push ( 'chickens' , 'cats' , 'dogs' ) ;

console . log ( count ) ;

console . log ( animals ) ;

> 6

> Array [ "pigs" , "goats" , "sheep" , "chickens" , "cats" , "dogs" ]

Syntax

arr <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> element1 <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> elementN <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span>

<span class="token comment">// elementN: Các phần tử sẽ thêm vào cuối mảng</span>

arr . push ( element1 [ , ... [ , elementN ] ] )

// elementN: Các phần tử sẽ thêm vào cuối mảng

12. unshift ()

This method is the opposite of push()

unshift() helps us add one or more elements to the beginning of the array

unshift() YES changes the original array
unshift() returns the new LENGTH of the array (arr.lenght) after adding the element

<span class="token keyword">var</span> animals <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'pigs'</span> <span class="token punctuation">,</span> <span class="token string">'goats'</span> <span class="token punctuation">,</span> <span class="token string">'sheep'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> count <span class="token operator">=</span> animals <span class="token punctuation">.</span> <span class="token function">unshift</span> <span class="token punctuation">(</span> <span class="token string">'chickens'</span> <span class="token punctuation">,</span> <span class="token string">'cats'</span> <span class="token punctuation">,</span> <span class="token string">'dogs'</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> count <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> animals <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token operator">&gt;</span> <span class="token number">6</span>
<span class="token operator">&gt;</span> Array <span class="token punctuation">[</span> <span class="token string">"chickens"</span> <span class="token punctuation">,</span> <span class="token string">"cats"</span> <span class="token punctuation">,</span> <span class="token string">"dogs"</span> <span class="token punctuation">,</span> <span class="token string">"pigs"</span> <span class="token punctuation">,</span> <span class="token string">"goats"</span> <span class="token punctuation">,</span> <span class="token string">"sheep"</span> <span class="token punctuation">]</span>

var count = animals . unshift ( 'chickens' , 'cats' , 'dogs' ) ;

> 6

> Array [ "chickens" , "cats" , "dogs" , "pigs" , "goats" , "sheep" ]

Syntax

arr <span class="token punctuation">.</span> <span class="token function">unshift</span> <span class="token punctuation">(</span> element1 <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> elementN <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span>

<span class="token comment">// elementN: Các phần tử được thêm vào đầu mảng</span>

arr . unshift ( element1 [ , ... [ , elementN ] ] )

// elementN: Các phần tử được thêm vào đầu mảng

13. reduce ()

This is a method that some newbie just learned anything twisted

reduce() used to execute a function on each element of the array (from left to right) with a cumulative variable to get a unique value.

reduce() NOT change the original array
reduce() returns the value after minification

<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 number">4</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> array <span class="token punctuation">.</span> <span class="token function">reduce</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> accumulator <span class="token punctuation">,</span> currentValue <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> accumulator <span class="token operator">+</span> currentValue
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token comment">//=&gt; 1 + 2 + 3 + 4</span>

<span class="token keyword">var</span> b <span class="token operator">=</span> array <span class="token punctuation">.</span> <span class="token function">reduce</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> accumulator <span class="token punctuation">,</span> currentValue <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> accumulator <span class="token operator">+</span> currentValue
<span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token comment">//=&gt; 5 + 1 + 2 + 3 + 4</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> a <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> b <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">10</span>
<span class="token operator">&gt;</span> <span class="token number">15</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> <span class="token number">4</span> <span class="token punctuation">]</span>

var array = [ 1 , 2 , 3 , 4 ] ;

var a = array . reduce ( function ( accumulator , currentValue ) {

return accumulator + currentValue

} ) ;

//=> 1 + 2 + 3 + 4

var b = array . reduce ( function ( accumulator , currentValue ) {

return accumulator + currentValue

} , 5 ) ;

//=> 5 + 1 + 2 + 3 + 4

console . log ( a ) ;

console . log ( b ) ;

console . log ( array ) ;

> 10

> 15

> Array [ 1 , 2 , 3 , 4 ]

Syntax

arr <span class="token punctuation">.</span> <span class="token function">reduce</span> <span class="token punctuation">(</span> <span class="token function">callback</span> <span class="token punctuation">(</span> accumulator <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 punctuation">,</span> initialValue <span class="token punctuation">]</span> <span class="token punctuation">)</span>

<span class="token comment">// callback: Hàm dùng để thực thi với từng phần tử của mảng,</span>
<span class="token comment">// hàm này nhận vào 4 tham số:</span>

  <span class="token comment">/* accumulator: Biến tích lũy, truyền giá trị trả về của mỗi lần gọi callback,
  nó là giá trị tích lũy được trả về trong lần gọi callback trước,
  hoặc giá trị của tham số initialValue, nếu được cung cấp */</span>
  
  <span class="token comment">/* currentValue: Phần tử trong mảng hiện tại đang được xử lý */</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ý
  Bắt đầu tại 0 nếu giá trị initialValue được cung cấp,
  Bắt đầu tại 1 nếu không có initialValue */</span>
  
  <span class="token comment">/* array (không bắt buộc): Mảng đang được gọi với reduce() */</span>
  
  <span class="token comment">/* initialValue (không bắt buộc nhưng NÊN khai báo nó):
  Giá trị cho tham số thứ nhất (accumulator) của hàm callback trong LẦN GỌI ĐẦU TIÊN. 
  Nếu giá trị ban đầu này không được cung cấp, phần tử đầu tiên của mảng sẽ được dùng.
  Do đó, gọi reduce() trên một mảng rỗng và không có giá trị ban đầu sẽ gây ra lỗi */</span>

arr . reduce ( callback ( accumulator , currentValue [ , index [ , array ] ] ) [ , initialValue ] )

// callback: Hàm dùng để thực thi với từng phần tử của mảng,

// hàm này nhận vào 4 tham số:

/* accumulator: Biến tích lũy, truyền giá trị trả về của mỗi lần gọi callback,

nó là giá trị tích lũy được trả về trong lần gọi callback trước,

hoặc giá trị của tham số initialValue, nếu được cung cấp */

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

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

Bắt đầu tại 0 nếu giá trị initialValue được cung cấp,

Bắt đầu tại 1 nếu không có initialValue */

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

/* initialValue (không bắt buộc nhưng NÊN khai báo nó):

Giá trị cho tham số thứ nhất (accumulator) của hàm callback trong LẦN GỌI ĐẦU TIÊN.

Nếu giá trị ban đầu này không được cung cấp, phần tử đầu tiên của mảng sẽ được dùng.

Do đó, gọi reduce() trên một mảng rỗng và không có giá trị ban đầu sẽ gây ra lỗi */

14. reverse ()

reverse() used to reverse the array, the first element to the last and vice versa

reverse() YES changes the original array
reverse() returns the array after inversion

<span class="token keyword">var</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'one'</span> <span class="token punctuation">,</span> <span class="token string">'two'</span> <span class="token punctuation">,</span> <span class="token string">'three'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> reversed <span class="token operator">=</span> array <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>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> reversed <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 string">"three"</span> <span class="token punctuation">,</span> <span class="token string">"two"</span> <span class="token punctuation">,</span> <span class="token string">"one"</span> <span class="token punctuation">]</span>
<span class="token operator">&gt;</span> Array <span class="token punctuation">[</span> <span class="token string">"three"</span> <span class="token punctuation">,</span> <span class="token string">"two"</span> <span class="token punctuation">,</span> <span class="token string">"one"</span> <span class="token punctuation">]</span>

var array = [ 'one' , 'two' , 'three' ] ;

var reversed = array . reverse ( ) ;

console . log ( reversed ) ;

> Array [ "three" , "two" , "one" ]

Syntax

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

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

15. some ()

some() checks to see if at least one element of the array satisfies the condition of the passed function

some() DO NOT change the original array
some() returns the Boolean type: true if there is at least one element satisfying and false if not satisfied
some() will return false if the array is empty

<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 number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> even <span class="token operator">=</span> array <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> 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">2</span> <span class="token operator">===</span> <span class="token number">0</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> even <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> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span>

var even = array . some ( function ( element ) {

return element % 2 === 0

} ) ;

console . log ( even ) ;

> true

Syntax

arr <span class="token punctuation">.</span> <span class="token function">some</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 dùng để kiểm tra từng phần tử,
  hàm này nhận vào 3 tham số: */</span>
  
 <span class="token comment">// element: Phần tử đang được kiểm tra</span>
 <span class="token comment">// index (không bắt buộc): Chỉ mục của phần tử đang được kiểm tra</span>
 <span class="token comment">// array (không bắt buộc): Mảng đang được gọi với some()</span>

<span class="token comment">/* thisArg (không bắt buộc): Được sử dụng làm giá trị this
  khi thực thi hàm callback */</span>

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

/* callback: Hàm dùng để kiểm tra từng phần tử,

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

// element: Phần tử đang được kiểm tra

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

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

/* thisArg (không bắt buộc): Được sử dụng làm giá trị this

khi thực thi hàm callback */

15. sort ()

sort() will sort the elements in an array, the elements can be sorted alphabetically or numerically in ascending or descending order.

By default the elements will be sorted alphabetically in ascending order. This makes sort() will sort the string very accurately, but when sorting the numbers will not be correct (for example 20 and 100, 20 will be greater than 100 because 2> 1) we can fix this. by passing a parameter is a comparison array

sort() YES changed the original array
sort() returns the array after it has been sorted

<span class="token keyword">var</span> months <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'March'</span> <span class="token punctuation">,</span> <span class="token string">'Jan'</span> <span class="token punctuation">,</span> <span class="token string">'Feb'</span> <span class="token punctuation">,</span> <span class="token string">'Dec'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<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">30</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">21</span> <span class="token punctuation">,</span> <span class="token number">100000</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
months <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>
array <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>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> months <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 string">"Dec"</span> <span class="token punctuation">,</span> <span class="token string">"Feb"</span> <span class="token punctuation">,</span> <span class="token string">"Jan"</span> <span class="token punctuation">,</span> <span class="token string">"March"</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">100000</span> <span class="token punctuation">,</span> <span class="token number">21</span> <span class="token punctuation">,</span> <span class="token number">30</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">]</span>

var months = [ 'March' , 'Jan' , 'Feb' , 'Dec' ] ;

var array = [ 1 , 30 , 4 , 21 , 100000 ] ;

months . sort ( ) ;

array . sort ( ) ;

console . log ( months ) ;

> Array [ "Dec" , "Feb" , "Jan" , "March" ]

> Array [ 1 , 100000 , 21 , 30 , 4 ]

Syntax

arr <span class="token punctuation">.</span> <span class="token function">sort</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> compareFunction <span class="token punctuation">]</span> <span class="token punctuation">)</span>

<span class="token comment">/* compareFunction (không bắt buộc): Hàm dùng để xác định thứ tự sắp xếp.
  Nếu bỏ qua, mảng sẽ được sắp xếp dựa vào giá trị Unicode code point
  của từng ký tự của chuỗi được chuyển đổi từ giá trị của phần tử. */</span>

arr . sort ( [ compareFunction ] )

/* compareFunction (không bắt buộc): Hàm dùng để xác định thứ tự sắp xếp.

Nếu bỏ qua, mảng sẽ được sắp xếp dựa vào giá trị Unicode code point

của từng ký tự của chuỗi được chuyển đổi từ giá trị của phần tử. */

Conclusion

It’s quite a long time, I paused part 2 here.

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

Share the news now

Source : Viblo

Popular array handling methods (Array) in JavaScript (Part 2)

11. push ()

12. unshift ()

13. reduce ()

14. reverse ()

15. some ()

15. sort ()

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