Array is an integral part of JavaScript projects, so today I would like to introduce some common array methods.
1. forEach
forEach
method implements a callback function every time it iterates over array elements.
The following example logs out all array elements:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> characters <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 string">'d'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> characters <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> index <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> element <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* 0: a 1: b 2: c 3: d */</span> |
2. map
map
method creates a new array by executing a callback function every time it iterates over the array elements.
map
method does not change the original array
The following example creates a new array with each element added to 10 from the array numbers
:
1 2 3 4 5 6 | <span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">6</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">const</span> mappedNumbers <span class="token operator">=</span> numbers <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> element <span class="token operator">+</span> <span class="token number">10</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> mappedNumbers <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* [13, 16, 14, 15] */</span> |
3. filter
filter
method creates a new array with the elements passed the condition of the callback function every time it iterates over the array elements.
filter
method does not change the original array
The following example creates a new array of users named ‘Harry’:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Harry"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Jim"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Harry"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Kean"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> filteredUsers <span class="token operator">=</span> users <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> element <span class="token punctuation">.</span> name <span class="token operator">===</span> <span class="token string">'Harry'</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> filteredUsers <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* 0: { id: 1, name: "Harry" } 1: { id: 3, name: "Harry" } */</span> |
4. find
find
method iterates over the array elements and returns the first element that passed the condition of the callback function, if no found element satisfies undefined
.
find
method does not change the original array
The following example finds the first user named ‘Harry’ in the users array:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Harry"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Jim"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Harry"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Kean"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> harry <span class="token operator">=</span> users <span class="token punctuation">.</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> element <span class="token punctuation">.</span> name <span class="token operator">===</span> <span class="token string">'Harry'</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> harry <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* { id: 1, name: "Harry" } */</span> |
5. findIndex
findIndex
method iterates over the array elements and returns the index of the first element that passed the condition of the callback function, if no found element satisfies -1
.
findIndex
method does not change the original array
The following example finds the index of the first user named ‘Harry’ in the users array:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Harry"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Jim"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Harry"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">"Kean"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> harryIndex <span class="token operator">=</span> users <span class="token punctuation">.</span> <span class="token function">findIndex</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> element <span class="token punctuation">.</span> name <span class="token operator">===</span> <span class="token string">'Harry'</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> harryIndex <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* 0 */</span> |
6. some
some
methods are used to test true
if at least one element satisfies the condition of the callback function, otherwise false
if no element satisfies the condition.
some
methods do not change the original array
The following example checks to see if the characters array contains the letter ‘c’:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> characters <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 string">'d'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> checked <span class="token operator">=</span> characters <span class="token punctuation">.</span> <span class="token function">some</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> element <span class="token operator">===</span> <span class="token string">'c'</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> checked <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* true */</span> |
7. every
every
method is used to test to return true
if all elements meet the condition of the callback function, otherwise false
if at least one element does not meet the condition.
every
method does not change the original array
The following example checks to see if the characters array does not contain the letter ‘e’:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> characters <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 string">'d'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> checked <span class="token operator">=</span> characters <span class="token punctuation">.</span> <span class="token function">every</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> element <span class="token operator">!==</span> <span class="token string">'e'</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> checked <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* true */</span> |
8. sort
sort
method implements elements in ascending order, we can pass a compare callback function to customize sort order.
sort
method will change the original array
Example sort:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> numbers <span class="token punctuation">.</span> <span class="token function">sort</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> numbers <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* [3, 4, 5, 6] */</span> numbers <span class="token punctuation">.</span> <span class="token function">sort</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> a <span class="token punctuation">,</span> b <span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> numbers <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* [3, 4, 5, 6] */</span> numbers <span class="token punctuation">.</span> <span class="token function">sort</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> a <span class="token punctuation">,</span> b <span class="token punctuation">)</span> <span class="token operator">=></span> b <span class="token operator">-</span> a <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> numbers <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* [6, 5, 4, 3] */</span> |
9. reverse
reverse
method reverses the order of the array elements.
reverse
method will change the original array
Reverse example:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> characters <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 string">'d'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> characters <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> characters <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* ["d", "c", "b", "a"] */</span> |
10. concat
concat
method returns a new array by merging all the elements of the arrays together.
concat
method does not change the original array
Reverse example:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> numbers1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> numbers2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> numbers3 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> numbers <span class="token operator">=</span> numbers1 <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> numbers2 <span class="token punctuation">,</span> numbers3 <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> numbers <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">/* [1, 2, 3, 4, 5, 6, 7, 8, 9] */</span> |
Conclude
Above are the commonly used array methods, I hope to help newbies to understand and use arrays effectively in javascript. Thanks for reading the article.