JavaScript常用数组方法详解

2022/7/11 1:22:40

本文主要是介绍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 插入位置 一般是0arr1.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 ~



这篇关于JavaScript常用数组方法详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程