Summary of Several Common Methods of JavaScript Array

Catalog 1, Preface 2, filter () 3, map () 4, sort () 5, reduce () 6, forEach () 7, Method List 8, referenced in this article

1. Preface

There are too many array methods. This article records 1 some array methods that I easily remember wrong, which are used to consolidate and review.
Later, other array methods will be added slowly.
Making good use of array method can make data processing elegant and simple.

So let's get started:

2. filter ()

Description:

filter() Method to create a new array and add all eligible elements to the created new array.

Syntax:

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

Parameters:

callback And thisValue :

​	参数	是否可选	描述
参数1	callback	必选	用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接收3个参数。
参数2	thisValue	可选	执行 callback 时，用于 this 的值。 对象作为该执行回调时使用，传递给函数。 如果省略了 thisValue ，"this" 的值为 "undefined"

Parameter list for callback:

​	参数	是否可选	描述
参数1	element	必选	当前元素
参数2	index	可选	当前元素的索引值
参数3	array	可选	调用了 filter 的数组本身

Parameters of thisValue:

Execute callback Used for this The value of.

Return value:

Is a file created by filter() A new array consisting of the return values of the parameter 1 function

Example:

let users = [
  {id: 11, name: " Monkey King "},
  {id: 21, name: " Pig 8 Precept "},
  {id: 31, name: " Sand monk "}
];

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

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

3. map ()

Description:

map() Method creates a new array, each element of which is the return value of a given function called once.

Syntax:

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

Parameters:

callback And thisValue

​	参数	是否可选	描述
参数1	callback	必选	数组中的每个元素都要运行的回调函数。它接收3个参数。
参数2	thisValue	可选	执行 callback 时，用于 this 的值。 对象作为该执行回调时使用，传递给函数。 如果省略了 thisValue ，"this" 的值为 "undefined"

Parameter list for callback:

​	参数	是否可选	描述
参数1	element	必选	当前元素
参数2	index	可选	当前元素的索引值
参数3	array	可选	调用了 filter 的数组本身

Parameters of thisValue:

Execute callback Used for this The value of.

Return value:

Is a new array consisting of the results of callback functions performed by each element of the original array.

Example:

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

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

4. sort ()

Description:

map() Method to make modifications on the original array to change the order of elements

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

Syntax:

Array.sort( compareFunction )

Parameters:

compareFunction

​	参数	是否可选	描述
参数1	compareFunction	可选	规定排列顺序的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。

Parameter list for compareFunction:

​	参数	是否可选	描述
参数1	firstEl	必选	第1个用于比较的元素。
参数2	secondEl	必选	第2个用于比较的元素。

compareFunction return value

Returns a number indicating the order of these 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 equals b, 0 is returned. If a is greater than b, a value greater than 0 is returned.

Return value:

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

Example:

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

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

5. reduce ()

Description:
reduce() Method executes (ascending) a callback function for every 1 element in the array, excluding elements in the array that have been deleted or never assigned a value. Calculates the result to 1 value.

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

Syntax:

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

Parameters:

callback And initialValue

​	参数	是否可选	描述
参数1	callback	必选	执行数组中每个数组元素的函数 (如果没有initialValue初始值那么第1个值不会执行改函数)它接收4个参数。
参数2	initialValue	可选	callback函数的初始值

Parameter list for callback:

​	参数	是否可选	描述
参数1	accumulator	必选	累计器累计回调的返回值; 它是上1次调用回调时返回的累积值，或initialValue。
参数2	currentValue	必选	当前元素
参数3	index	可选	当前元素的索引值
参数4	array	可选	调用了 reduce() 的数组本身

Parameters of initialValue:

As the first call callback Gets or sets the value of the first parameter when the. If no initial value is provided, the first element in the array is used as the initial value. Called on an empty array with no initial value reduce An error will be reported.

Return value:

Function accumulates the result after processing
Perform all callback Functional accumulator Parameter

Note: The return value of our reducer function is assigned to the accumulator, which is remembered in each iteration of the array and eventually 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 ()

Description:

The reduce () method executes (ascending) a callback function for every 1 element in the array, excluding elements in the array that have been deleted or never assigned a value. Calculates the result to 1 value.

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

Syntax:

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

Parameters:

callback And thisValue

​	参数	是否可选	描述
参数1	callback	必选	执行数组中每个数组元素的函数，它接收3个参数。
参数2	thisValue	可选	执行 callback 时，用于 this 的值。 对象作为该执行回调时使用，传递给函数。 如果省略了 thisValue ，"this" 的值为 "undefined"

Parameter list for callback:

​	参数	是否可选	描述
参数1	currentValue	必选	当前元素
参数2	index	可选	当前元素的索引值
参数3	array	可选	调用了 forEach() 的数组本身

Parameters of thisValue:

Execute callback Used for this The value of.

Return value:

The method does not return a value.

Example:

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

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

7. Method list

Method properties:

​	参数	是否可选	描述
参数1	element	必选	当前元素
参数2	index	可选	当前元素的索引值
参数3	array	可选	调用了 filter 的数组本身

0

8. Reference in this article

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