Preamble
Hello everyone today I’m going to introduce to you some of the methods
in the array that I find quite interesting. Normally, when it comes to methods
in array, you will think of commonly used methods such as:
- push
- pop
- shift
- unshift
right. So today I’m going to introduce some other methods
that I find to be equally useful. What are you waiting to find out?
Map
So what is my Map
on google translate, then translated into map is mapping (yaominh) sounds confusing huh. Actually just need to understand simply transform one into another. So array.map
means converting one array into another with a constant number of elements, through a certain function.
For example, here I have an array of numbers, and there is a function to add 2 to the elements of the array, we will get a new array. This is my code
1 2 3 4 5 6 7 8 | <span class="token keyword">var</span> <span class="token keyword">array</span> <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">6</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> newArray <span class="token operator">=</span> <span class="token keyword">array</span> <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> item <span class="token operator">+</span> <span class="token operator">=</span> <span class="token number">2</span> <span class="token punctuation">;</span> <span class="token keyword">return</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> newArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
And this is the result
Pretty simple, isn’t it. come on
Filter
The name says it all: v filter
means filter so map.filter
means to filter the elements of the array that meet certain conditions. Unlike array.map
, the number of elements of the new array after passing array.filter
may not be equal to the number of the old array. For example, here I also have an array of different positive and negative numbers. and have a function to filter
out positive numbers.
1 2 3 4 5 6 7 | <span class="token keyword">var</span> <span class="token keyword">array</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token operator">-</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token operator">-</span> <span class="token number">23</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> newArray <span class="token operator">=</span> <span class="token keyword">array</span> <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> item <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> item <span class="token operator">></span> <span class="token number">0</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> newArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The results are
Find
array.find
is almost the same as array.filter
only difference is that instead of returning all the elements that meet certain conditions, it only returns the first element that satisfies the condition.
For example, I will follow the above example of filter
only replace filter
methods with find
methods and this is my code
1 2 3 4 5 6 7 | <span class="token keyword">var</span> <span class="token keyword">array</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token operator">-</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token operator">-</span> <span class="token number">23</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> newArray <span class="token operator">=</span> <span class="token keyword">array</span> <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> item <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> item <span class="token operator">></span> <span class="token number">0</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> newArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
And this is the result
we can see that the result only returns the first element that satisfies conditions greater than zero that is the element with a value of 4.
Reduce
reduce
yourself to google translate it means reduced. This means that the array.reduce
function will receive the input of 2 elements of the array to handle returning an element and then the function will continue to receive 2 elements in which an element has been calculated previously and an element. The next, so on, returns a single element. A little confusing, isn’t it? Let’s go into the example. Let’s see the example. It will be easier to understand.
For example, here I also have an array of numbers and I use array.reduce
to calculate the total value of the elements of this array. This is the code
1 2 3 4 5 6 7 | <span class="token keyword">var</span> <span class="token keyword">array</span> <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">6</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> newArray <span class="token operator">=</span> <span class="token keyword">array</span> <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> a <span class="token punctuation">,</span> b <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">+</span> b <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> newArray <span class="token punctuation">)</span> |
Result
Note : array.reduce
different from array.filter
and array.find
always returns an element, array.filter
returns many or one or không
elements. array.find
returns one or no element.
Conclude
So I have introduced you to some of the methods that I find quite useful when using with arrays. The article is based on the opinion of the individual so there is no missing place, I hope you can comment so that I can improve the article better or have an unclear place, then comment down so I can say more clearly. Finally, thanks to everyone who read, if you find the article useful, please give me 1 up vote
, Click Follow
to be able to view more articles from me.