JavaScript summary of 18 commonly used array methods

As we all know, requesting data from the backend and processing data are essential skills for front-end engineers. The data requested from the backend is often returned to the frontend in the form of an array, so the importance of array processing methods can be imagined; array processing methods There are a lot of MDN documents. Many friends often fail to grasp the key points when learning, resulting in half the result with twice the result. But don't worry, I have summarized 18 commonly used array processing methods at work.

forEach()

will not change the original array

method

is a function. The first formal parameter of the internally passed function is the value of each item in the item array, and the second is the index number index. Its return value is undefined;
The running example is as follows:

Console output

filter() method

The filter() method is a method for filtering arrays. The parameters passed in are the same as the forEach method, but the return value is an array. The actual application is to filter out the arrays that meet the conditions in the acquired data;
The running example is as follows:

The console output is as follows:

map() method

The parameters passed in by the map() method are also the same as above, and its return value is also a new array; the map() method can perform the same processing on each item of the array. The running example is as follows:

Console output:

findIndex() method

The findIndex() method, as its name suggests, returns the index number of the first item in the array that meets the conditions. If it cannot be found, it returns -1. The parameters passed in are the same as above, and the running example is as follows:

let arr = [1, 3, 3, 4, 5, 6, 7]
//findIndex method, returns the index number of the first item that meets the conditions, if not found, returns -1
const res = arr.findIndex((item) => item > 5)
console.log(res)

console output results:

find() method The

find() method returns the first item found that meets the conditions. The parameters passed in are the same as above. The running example is as follows:

let arr = [1, 3, 3, 4, 5, 6, 7]
//find() searches for item and returns the first item that meets the conditions. If found, it returns undefined.
const res2 = arr.find((item) => {
  return item > 5
})

console.log(res2)

console operation are as follows:

some() method

The parameters passed in by some() method are the same as above, and the return value is a Boolean value. As long as an item is found that meets the conditions, it will return true; the example is as follows:

let arr = [1, 3, 3, 4, 5, 6, 7]
//some method returns Boolean value const bl = arr.some((item) => {
  return item > 5
})
console.log(bl)

every() method

The parameters passed in by every() method are the same as above, and the return value is a Boolean value, but each item must meet the conditions to return true; the example is as follows:

let arr = [1, 3, 3, 4, 5, 6, 7]
//every() returns a Boolean value that must pass the filtering conditions before it returns true
const bl2 = arr.every((currentValue) => {
  return currentValue < 10
})
console.log(bl2)

reduce() induction function

The first parameter in the reduce() function is the function, the second parameter is the type of the temporary variable sum, the first parameter function has four parameters, but the commonly used first parameter is Accumulate temporary variables (return is this value), the second parameter item. The third is the index, and the fourth is the array itself; the code example is as follows:

let arr = [1, 3, 3, 4, 5, 6, 7]
//reduce() induction function const previousValue = 0
const arrSum = arr.reduce((previousValue, currentValue) => {
  return previousValue + currentValue
}, 0)
The console.log(arrSum)

console output results are as follows:

concat() Array splicing

concat() splices two arrays and returns the spliced ​​new array. Multi-dimensional arrays (arrays within arrays) cannot be spliced;
The code example is as follows:

let arr = [1, 3, 3, 4, 5, 6, 7]
 //concat concatenates two arrays and returns a new array
 const newArr3 = [2, 5, 5, 6, 6, 8]
 const concatArr = arr.concat(newArr3)
 console.log(concatArr)

Methods to change the original array

push()/unshift()

push()/unshift() method is to add an element at the end and front of the array respectively, and the return value is the length of the new array;

//The array processing method will change. Original array const Arr = [1, 3, 5, 6, 7, 8, 9]
Arr.push(1)
console.log(Arr)
console.log(Arr)
const a = Arr.unshift(1)
console.log(a)

console output results are as follows:

pop()/shift()

These two methods pop() deletes the last value of the array, and shift() deletes the value of the first item of the array; the return value is the deleted item;

arr.pop(1)
console.log(arr)
arr.shift(1)
The console.log(arr)

console output results are as follows:

sort()/reverse()

The sort() method is sorting. The internal parameter is a function, function(a, b){ return a - b }. Through this function, you can control the sorting order in descending order. The function is in ascending order. If the parameter internal return a - b is descending order, return a + b is ascending order;
reverse() is an array flip, that is, arranging the elements of the array in reverse order; the code example is as follows:

let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort((a, b) => {
  return a - b})console.log(arr)arr.reverse()console.log(arr)

splice()

The splice() method modifies the original array and returns a new array with deleted elements. The negative number is the index number from back to front; the first parameter passed in is the index number of the deleted starting element, and the second parameter is The number of deleted elements;

let arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)

Other

flat()

flat() is used to flatten multi-dimensional arrays. The parameter passed in is the depth of the array, which can also be infiniy, which means that the depth of the array is infinite. The code example is as follows:

const Arr2 = [
  [1, 2],
  [twenty three],
  [4, 5],
  [5, 6],]console.log(Arr2.flat(Infinity))

console output results:

fill()

can fill an array: Writing method: Array.fill(1, 2, 4) fills the array with 1, starting from the element with index value 2, starting with the index number of the element starting from 4, excluding the index value is 4 element; the filled element will overwrite the original element corresponding to the index number;
The code example is as follows:

const Arr2 = [
  [1, 2],
  [twenty three],
  [4, 5],
  [5, 6],]console.log(Arr2.fill(1, 0, 4))

console output results: