JavaScript常用数组方法详解

目录

• JavaScript常用数组方法详解
  • 基本操作
    • 获取数组长度
    • 获取数组成员索引
  • 增加操作
    • unshift()
    • push()
    • concat()
    • splice()
  • 删除操作
    • shift()
    • pop()
    • splice()
  • 排序操作
    • sort()
    • reverse()
  • 筛选操作
    • filter()
    • includes()
  • 更多

JavaScript常用数组方法详解

---

这里创建了一个arr1数组

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

基本操作

---

获取数组长度

arr1.length

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

---

获取数组成员索引

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

val2为空时,默认从下标为0开始搜索

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

注: 当 要查找的数组成员 不存在数组时,返回值为:-1

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

---

增加操作

---

unshift()

• arr1.unshift(val,...) : 向数组的开头添加一个或者多个元素 , 并且返回新的数组的长度

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()用法相同 , 区别在于 arr1.push()是在数组的末尾添加一个或多个元素 , 同样返回值为新的数组长度

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() : 插入给定的一个或多个元素，能够把传递的所有参数按顺序添加到数组的尾部 , 返回一个新数组，而不是在原来的基础上添加新元素

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,...)

参数	解释	值
start	插入位置	一般是0或arr1.length
deleteCount	要删除的个数	0为不删除 , 增加操作的时候一般填0
val	当增加操作的时候添加的元素	(可选)可以是元素,也可以是数组

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]

---

删除操作

---

shift()

• arr1.shift() : 删除数组的第一项，并返回删除前第一个元素的值。若该数组删除前为空，则返回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() : 删除数组的最后一项，并返回删除前最后一个元素的值。若该数组删除前为空，则返回undefined

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) : start起始位置(从0开始计数) , deleteCount移除数组元素的个数 , 为空时则从起始位置删除到最后 , 返回被删除的元素

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()

• 升序

arr1.sort( sortFunction ),sortFunction可选

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]

---

• 降序

arr1.sort( compareFunction ),compareFunction可选

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()

• 反转

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]

---

• 排序说明

compareFunction是一个用于比较排序的函数,如果省略compareFunction参数，元素将按ASCII字符顺序的升序进行排列。而数组的sort()方法的内部排序机制是基于冒泡算法

---

筛选操作

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))
// 返回结果 []

参数	类型	解释
function(currentValue, index,arr)	必须	函数，数组中的每个元素都会执行这个函数
currentValue	必须	当前元素的值
index	可选	当前元素的索引值
arr	可选	当前元素属于的数组对象
thisValue	可选	对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "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

参数	类型	解释
searchElement	必须	需要查找的元素
fromIndex	可选	从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

---

更多

请参考: https://www.runoob.com/jsref/jsref-obj-array.html

---

NueXini : Enjoy it ~