Summary of several common methods of JavaScript arrays

1. Introduction

There are too many array methods. This article records some array methods that I tend to remember incorrectly for consolidation and review.
Other array methods will be added gradually in the future.
Making good use of array methods can make data processing elegant and simple.

So let’s get started:

2. filter()

describe:

filter() method creates a new array and adds all the elements that meet the condition to the created new array.

grammar:

Array.filter(callback(element, index, array) { // function body}, thisValue)

parameter:

callback and thisValue :

The callback parameter list:

Parameters of thisValue:

The value to use for this when callback is executed.

Return value:

Is a new array consisting of the return value of filter() function parameter

Example:

let users = [
  {id: 11, name: "Sun Wukong"},
  {id: 21, name: "Zhu Bajie"},
  {id: 31, name: "Sha Monk"}
];

// Returns an array of the first two users let filterUsers = users.filter(item => item.id < 31);

console.log(filterUsers.length); // 2

3. map()

describe:

map() method creates a new array where each element is the return value of calling the given function once.

grammar:

Array.map(callback(currentValue, index, array) { // function body}, thisValue)

parameter:

callback and thisValue

The callback parameter list:

Parameters of thisValue:

The value to use for this when callback is executed.

Return value:

It is a new array consisting of the results of executing the callback function on each element of the original array.

Example:

let number = [1, 2, 3].map(item => item + 1);

console.log(lengths); // 2, 3, 4

4. sort()

describe:

map() method modifies the original array to change the order of elements

Note: The default sort order is when converting elements to strings and then comparing their UTF-16 code unit value sequences.

grammar:

Array.sort( compareFunction )

parameter:

compareFunction

Parameter list of compareFunction:

compareFunction Return Value

Returns a number indicating the order of the two values

• If a is less than b, a should appear before b in the sorted array, and a value less than 0 is returned.
• If a is equal to b, return 0.
• If a is greater than b, returns a value greater than 0.
  

Return value:

The return value is a sorted array, but the return value is usually ignored because the original array is modified.

Example:

let number = [1, 2, 3].map(item => item + 1);

console.log(lengths); // 2, 3, 4

5. reduce()

describe:
The reduce() method executes the callback function for each element in the array in sequence (in ascending order), excluding elements in the array that have been deleted or have never been assigned a value. Evaluates its result into a value.

Note: reduce() can be used as a higher-order function for function compose.

grammar:

Array.reduce(callback(accumulator, currentValue, index, array), initialValue)

parameter:

callback and initialValue

The callback parameter list:

Parameters of initialValue:

The value to be used as the first argument when callback function is first called. If no initial value is provided, the first element in the array will be used as the initial value. Calling reduce on an empty array with no initial value will result in an error.

Return value:

The result of the function accumulation processing is executed after all callback functions are accumulator .

Note: The return value of our reducer function is assigned to the accumulator, which is remembered on each iteration of the array and becomes the final single result value.

Example:

let number = [1, 2, 3, 4];

let result = number.reduce((sum, current) => sum + current, 0);

console.log(result); // 10

6. forEach()

describe:

The reduce() method executes the callback function for each element in the array in sequence (in ascending order), excluding elements in the array that have been deleted or have never been assigned a value. Evaluates its result into a value.

Note: reduce() can be used as a higher-order function for function compose.

grammar:

Array.forEach(callback(currentValue , index , array), thisValue)

parameter:

callback and thisValue

The callback parameter list:

Parameters of thisValue:

The value to use for this when callback is executed.

Return value:

This method has no return value.

Example:

let number = [1, 2, 3, 4];

number.forEach((item, index ,array) => {
 console.log(item); // 1/2/3/4
});

7. Method List

Method attributes:

This is the end of this article summarizing several common methods of JavaScript arrays. For more relevant content on several common methods of JavaScript arrays, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

8. References

MDN Chinese official website https://developer.mozilla.org/zh-CN/
W3School Simplified Chinese version https://www.w3school.com.cn/