Detailed explanation of commonly used array methods in JavaScript

arr1Here an array is created

let arr1 = [7,4,1,8,5,2,0,9,6,3]

basic operation

Get the length of the array

arr1.length

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.legth)
// 返回结果为10

Get array member index

arr1.indexOf(val1,val2), val1for 要查找的数组成员_ val2_查询的开始位置(Number)

val20When it is empty, the default is to start searching from the subscript

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.indexOf(5))
// 返回结果为4,从下标0开始搜索,arr[4] = 5
console.log(arr1.indexOf(5,4))
// 返回结果为4,从下标4开始搜索,arr[4] = 5
console.log(arr1.indexOf(5,6))
// 返回结果为-1,因为起始搜索位置为6

Note: When the array member to be searched does not exist in the array, the return value is:-1

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.indexOf(10))
// 返回结果为-1 , 因为10不存在于arr1数组

Add operation

unshift()

arr1.unshift(val,...): Add one or more elements to the beginning of the array, and return the length of the new array

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.unshift(110,120))
// 返回结果为12 , 此时 arr1 = [110, 120, 7, 4, 1, 8, 5, 2, 0, 9, 6, 3]

push()

arr1.push(val,...): arr1.unshift()Same as the usage, the difference is arr1.push()that one or more elements are added at the end of the array, and the return value is also the new array length

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.unshift(110,120))
// 返回结果为12 , 此时 arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 110, 120]

concat()

arr1.concat(): Insert the given one or more elements, can add all the passed parameters to the end of the array in order, and return a new array instead of adding new elements on the original basis

let arr1 = [7,4,1,8,5,2,0,9,6,3]
let arr2 = arr1.concat('NueXini','JavaScript')
console.log(arr1)
// arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 110, 120]
console.log(arr2)
// arr2 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 'NueXini', 'JavaScript']

splice()

arr1.splice(start, deleteCount,val1,val2,...)

parameter	explain	value
start	insertion position	generally `0`or`arr1.length`
deleteCount	number to delete	`0`In order not to delete, generally fill in 0 when adding operations
val	Elements to add when adding operations	(optional) can be an element or an array

let arr1 = [7,4,1,8,5,2,0,9,6,3]
arr1.splice(0,0,'NueXini','JavaScript')
console.log(arr1)
// arr1 = ['NueXini', 'JavaScript', 7, 4, 1, 8, 5, 2, 0, 9, 6, 3]

let arr1 = [7,4,1,8,5,2,0,9,6,3]
arr1.splice(arr1.length,0,'NueXini','JavaScript')
console.log(arr1)
// arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 'NueXini', 'JavaScript']

// 替换功能
let arr1 = [7,4,1,8,5,2,0,9,6,3]
arr1.splice(0,2,'NueXini','JavaScript')
// 从下标为0开始,删除2个,在插入'NueXini','JavaScript'
console.log(arr1)
// arr1 = ['NueXini', 'JavaScript', 1, 8, 5, 2, 0, 9, 6, 3]

delete operation

shift()

arr1.shift(): Delete the first item of the array and return the value of the first element before deletion. If the array is empty before deletion, return undefined

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.shift())
// 返回结果为7 , 此时 arr1 = [4, 1, 8, 5, 2, 0, 9, 6, 3]
let arr2 = ['NueXini']
console.log(arr2.shift())
// 返回结果为NueXini , 此时 arr2 = []
let arr3 = []
console.log(arr3.shift())
// 返回结果为undefined

pop()

arr1.pop(): Delete the last item of the array and return the value of the last element before deletion. Returns if the array was empty before deletionundefined

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.pop())
// 返回结果为3 , 此时 arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6]
let arr2 = ['NueXini']
console.log(arr2.pop())
// 返回结果为NueXini , 此时 arr2 = []
let arr3 = []
console.log(arr3.pop())
// 返回结果为undefined

splice()

arr1.splice()(start, deleteCount): startStarting position (counting from 0), deleteCountthe number of removed array elements, if it is empty , delete from the starting position to the end, and return the deleted element

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.splice(0))
// 返回结果为[7, 4, 1, 8, 5, 2, 0, 9, 6, 3] , 此时 arr1 = []
let arr2 = ['NueXini','JavaScript']
console.log(arr2.splice(1,1))
// 返回结果为['JavaScript'] , 此时 arr2 = ['NueXini']

Sort operation

sort()

ascending order

arr1.sort( sortFunction ), sortFunctionoptional

let arr1 = [7,4,1,8,5,2,0,9,6,3]
arr1.sort()
// 这两条语句效果是一样的
// arr1.sort(function(x, y){return x-y})
console.log(arr)
// 得到结果arr1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

descending order

arr1.sort( compareFunction ), compareFunctionoptional

let arr1 = [7,4,1,8,5,2,0,9,6,3]
arr1.sort(function(x, y){
    
    return y-x})
console.log(arr)
// 得到结果arr1 = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]

reverse()

reverse

arr1.reverse()

let arr1 = [7,4,1,8,5,2,0,9,6,3]
arr1.reverse()
console.log(arr)
// 得到结果arr1 = [3, 6, 9, 0, 2, 5, 8, 1, 4, 7]

Sort instructions

compareFunctionIs a function for comparison and sorting. If the parameter is omitted , the elements will be arranged in ascending order of ASCII character order. compareFunctionThe internal sorting mechanism of the sort() method of the array is based on冒泡算法

filter operation

filter()

arr1.filter(function(currentValue,index,arr), thisValue)

let arr1 = [7,4,1,8,5,2,0,9,6,3]
function gt(num) {
    
    return num > 5}
console.log(arr1.filter(gt))
// 返回结果 [7, 8, 9, 6]
let arr2 = [7,4,1,8,5,2,0,9,6,3]
function gt2(num) {
    
    return num > 10}
console.log(arr2.filter(gt2))
// 返回结果 []

parameter	type	explain
function(currentValue, index,arr)	must	function, each element in the array will execute this function
currentValue	must	the value of the current element
index	optional	the index of the current element
arr	optional	the array object the current element belongs to
thisValue	optional	The object to be used as the execution callback, passed to the function, and used as the value of "this". If thisValue is omitted, the value of "this" is "undefined"

includes()

arr1.includes(searchElement, fromIndex)

let arr1 = [7,4,1,8,5,2,0,9,6,3]
console.log(arr1.includes(7)) // true
console.log(arr1.includes(10)) // false
console.log(arr1.includes(7,0)) // true
console.log(arr1.includes(7,1)) // false

parameter	type	explain
searchElement	must	element to find
fromIndex	optional	Start looking for searchElement at this index. If negative, the search starts at the index of array.length + fromIndex in ascending order. The default is 0.

Please refer to: https://www.runoob.com/jsref/jsref-obj-array.html

NueXini : Enjoy it ~