Common methods for arrays - (Regret series aside, what novices need to know)

Keywords: Javascript node.js ECMAScript Vue.js html

Common methods of arrays

Array.length

length is an instance property of Array that returns the number of elements in the array and is always greater than the subscript of the last item in the array

let arr = [1, 2, 3, 4]
console.log(arr.length) // 4

indexOf

indexOf('ele',fromIndex)
Parameter 1: Elements of the query
Parameter 2 (optional): Start from where the subscript is, default is 0, 0 is to query the entire array

indexOf('')
let arr1 = ['a', 'b', 'c']
let b  = arr1.indexOf('a')
console.log(b); //  The returned subscript (index) is 0 
console.log(arr1[0]) //  'a'

Array.isArray

Determines if the Array type returns a Boolean value of true/false

let arr = [5, 14, 47]
console.log(Array.isArray(arr)) // true
console.log(Array.isArray({ a: 10 })) // false

Push (master)

This method adds one or more elements to the end of the array and returns the new length of the array

let arr = ['red', 'blue', 'green']
arr.push('yellow')
console.log(arr) // [ 'red', 'blue', 'green', 'yellow' ]

Every (master)

Define a condition that loops through each item in the array and returns true if the defined condition is met, otherwise false

let arr = [22, 12, 19, 21, 36]
// Obviously, each item in the array is less than 40, returning false
let a = arr.every(item => item > 40)
console.log(a) // false

Filter (master)

Loops to determine if each element in an array meets the defined criteria and returns a new array in which the elements are those that meet the criteria

let arr = [1, 3, 5, 7, 6]
// Query and return elements greater than 5 in the array
let a = arr.filter(item => item > 5)
console.log(a) // [ 7, 6 ]

FindIndex

Returns the subscript of the first qualifying element in the array

let arr = [11, 24, 26, 31, 15]
// Query array for elements greater than 25
let a = arr.findIndex(item => item > 25)
console.log(a) // 2

find

find and findIndex should not be confused. find is the return of the element (value) that satisfies the condition

let arr = [1, 12, 44]
let a = arr.find(item => item > 15)
console.log(a) // 44

ForEach

Loop through each element in the array and provide a function for each element

let arr = [3, 5, 9]
let a = arr.forEach(item => console.log(item))
// Output: 359

// 
let arr = [3, 5, 9]
let sum = 0
let sumFn = function (a, b) {
    return a + b
}
arr.forEach( item => {
    sum = sumFn(sum, item)
})
console.log(sum) // 17 

Reduce (master)

Loop the array so that each item in the array is calculated once, returning the calculated sum

let arr = [1, 2, 3, 4]
let a = arr.reduce((temp, item) => temp + item, 0)
console.log(a) // 10 
 // The fourth parameter is defined as 0, that is, the initial values are added from 0
 // When temp is first added: temp = 0 + 1
 // Second time: temp = 1 + 2
 // Third time: temp = 3 + 3
 // Fourth time: temp = 6 + 4 
 // The final output is:10 
 // If we set the initial value to 2, or any number
 // For example, set it to 2 and add it from 2  
 // First time: temp = 2 + 1 
 // Second time: temp = 3 + 2 and so on
// The fourth parameter is generally set to zero, but it can also be left untouched, as reduce is calculated like this
// First time: temp = 1 + 2
// Second time: temp = 3 + 3
// Third time: temp = 6 + 4 final output or 10 does not affect the result

pop

Deletes the last element of the array and returns the element to be element, which changes the length of the original array

let arr = ['Monday', 'Tuesday', 'Wednesday']
console.log(arr.pop()) // Wednesday
console.log(arr) // ['Monday','Tuesday']

Join (master)

Converts an array to a string so that it splits elements in the array with the specified delimiter string, which is separated by a comma by default

let arr = ['red', 'blue', 'green']
let a = arr.join('-')
console.log(a) // red-blue-green

Splice (master)

This method alters the contents of an array by deleting and replacing existing elements or adding new elements
splice only removes elements from the array if the third parameter is not written

let arr = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
// The first parameter is to start with the number of subscripts in the array
// The second parameter is to delete a few later 
arr.splice(0, 1) 
console.log(arr) // ['Tuesday','Wednesday','Thursday','Friday']


// Element to add for the third parameter
// splice only removes elements from the array if the third parameter is not written
let arr = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
arr.splice(0, 1, 'Saturday')
console.log(arr) // ['Saturday','Tuesday','Wednesday','Thursday','Friday']

slice

This method returns a shallow copy of an array part to a new array object without modifying the original array

let arr = ['red', 'blue', 'green', 'yellow', 'skyblue']
// First parameter: Copy from the subscript item, copy the current subscript and all subsequent elements
let arr1 = arr.slice(1)
// The second parameter is the cutoff position
let arr2 = arr.slice(1,3)
console.log(arr1) // [ 'blue', 'green', 'yellow', 'skyblue' ]
console.log(arr2) // [ 'blue', 'green', 'yellow']

unshift

The party adds one or more elements to the beginning of the array and returns the length of the new array

let arr = [3, 4, 5, 6]
// Add 1 and 2 from the front of the array
arr.unshift(1, 2)
console.log(arr) // [ 1, 2, 3, 4, 5, 6 ]

Above are the most commonly used array methods that I have summarized, there are insufficient or better ways to welcome to add!!

Posted by xionfoo on Wed, 29 Sep 2021 09:58:02 -0700