前端学习笔记:整理数组常用方法

136 阅读6分钟

日常工作中,数组和我们打交道的机会不可谓不多,然后因为自己老是会忘记一些数组方法,所以自己来整理一份自己常用的数组方法

1、常用增删改查

  • shift
  • unshift
  • pop
  • push
  • slice
  • splice
  • concat
  • slice
  • indexOf
  • lastIndexOf
  • includes

arr.shift()

用于直接删除第一个元素

返回:删除的元素

let arr = [1,2,3,4]
let delItem = arr.shift()
// arr = [2,3,4], delItem = 1

arr.unshift(item)

用于在数组最前面添加一个或多个元素

返回:添加元素后数组的长度

let arr = [1,2,3,4]
let addItem = arr.unshift(5,6) 
//arr = [5,6,1,2,3,4],addItem = 6

arr.pop()

用于删除数组最后一个元素

返回:删除的元素

let arr = [1,2,3,4]
let delItem = arr.shift 
//arr = [1,2,3], delItem = 4

arr.push(item)

用于在数组最后添加一个或多个元素

返回:添加元素后数组的长度

let arr = [1,2,3,4]
let addItem = arr.push(5,6) 
//arr = [1,2,3,4,5,6],addItem = 6

arr.splice(startIndex,delCount,...addItem)

三个参数分别表示开始删除的元素下标,删除元素的个数,添加的元素(如果不要这个参数,就变成只删除元素)

可用于对数组进行删除元素,添加元素,替换元素

返回:删除元素组成的数组,如果第二个参数为0,则返回空数组

let arr = [1,2,3,4]
let addArr = arr.splice(1,3,5,6,7)
//addArr = [2,3,4],arr = [1,5,6,7]

arr.concat()

用于拼接数组或在最后添加元素(不改变原数组)

返回:拼接后的数组

let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let newArr = arr1.concat('9',arr2)
//newArr = [1,2,3,4,9,5,6,7,8]

arr.slice(startIndex,endIndex)

参数为开始下标、结束下标(如果不要这个参数,则从开始下标一直截取到末尾),不包含结束下标

用于截取数组(不改变原数组)

返回:截取的数组

let arr = [1,2,3,4,5,6,7,8,9]
let newArr = arr.slice(1,6)
//newArr = [2,3,4,5,6]

arr.indexOf(searchVal,fromIndex)

参数为查找的元素、开始查找的下标(可选)

用于查找第一个出现值的下标,没有则返回-1

返回:查找出来的下标

let arr = [1,2,3,4,5,6,7,8,9]
let searchIndex = arr.indexOf(2,1)
//searchIndex = 1

arr.lastIndexOf(searchVal,formIndex)

参数为查找的元素、开始查找的下标(可选)

用于查找最后出现值的下标,没有则返回-1,查找方向为从右往左

返回:查找出来的下标

let arr = [1,2,3,4,5,6,7,8,9]
let searchIndex = arr.lastIndex(3,3)
//searchIndex = 2

arr.includes(searchVal,fromIndex)

参数为查找的元素、开始查找的下标(可选)

用于查找元素是否存在于数组

返回:存在则返回true,不存在则返回false

let arr = [1,2,3,4,5,6,7,8,9]
let searchIndex = arr.includes(3,3)
//searchIndex = true

2、排序方法

  • sort
  • reverse

arr.sort(callback)

用于对数组进行排序

返回:排序后的数组

let arr = [1,5,6,2,4,8]
let newArr.sort((val1,val2) => val1-val2)
//arr = [1,2,4,5,6,8],newArr = [1,2,4,5,6,8]

arr.reverse()

用于倒置数组

返回:倒置后的数组

let arr = [1,2,3,4,5,6]
let newArr = arr.reverse()
//arr = newArr = [6,5,4,3,2,1]

3、批处理方法

  • find
  • findLast
  • findIndex
  • findLastIndex
  • forEach
  • filter
  • map
  • some
  • every
  • reduce

arr.find(callback)

查找满足条件的元素

返回:满足条件的第一个元素

let arr = [
      { label: 'frt', value: 1 },
      { label: 'sec', value: 2 },
      { label: 'thr', value: 3 }
    ]
    let searchItem = arr.find((_ele) => (
      _ele.value == 2
    ))
//searchItem = {label:'sec',value:2}

arr.findLast(callback)

查找满足条件的元素

返回:满足条件的最后一个元素

let arr = [
      { label: 'frt', value: 1 },
      { label: 'sec', value: 2 },
      { label: 'thr', value: 3 }
    ]
    let searchItem = arr.findLast((_ele) => (
      _ele.value == 2
    ))
//searchItem = {label:'sec',value:2}

arr.findIndex(callback)

查找满足条件的元素所在的位置

返回:满足条件的第一个元素的下标

let arr = [
      { label: 'frt', value: 1 },
      { label: 'sec', value: 2 },
      { label: 'thr', value: 3 }
    ]
    let searchItem = arr.findIndex((_ele) => (
      _ele.value == 2
    ))
//searchItem = 1

arr.findLastIndex(callback)

查找满足条件的元素所在位置

返回:满足条件的最后一个元素的下标

let arr = [
      { label: 'frt', value: 1 },
      { label: 'sec', value: 2 },
      { label: 'thr', value: 3 }
    ]
    let searchItem = arr.findLastIndex((_ele) => (
      _ele.value == 2
    ))
//searchItem = 1

arr.forEach(callback)

对数组进行遍历,类似于for循环

返回:无

arr.forEach((_ele,_indx,arr) => {})

arr.filter(callback)

遍历数组,过滤出满足条件的元素

返回:满足条件元素组成的数组

let arr = [
      { label: 'frt', value: 1 },
      { label: 'sec', value: 2 },
      { label: 'thr', value: 3 }
    ]
let retArr = arr.filter((_ele,_indx,arr) => (
    _ele.value == 2
))
//retArr = [{label:'sec',value:2}]

arr.map(callback)

遍历数组,类似于forEach,只是有返回(不改变原数组)

返回:处理后的和原数组相同长度的数组

let arr = [1,2,3,4,5]
let newArr = arr.map((_ele,_indx,arr) => (
    _ele*2
))
//newArr = [2,4,6,8,10]

arr.some(callback)

遍历数组,判断是否有满足条件的元素

返回:如果有一个满足条件,就返回true,没有则返回false

let arr = [
      { label: 'frt', value: 1 },
      { label: 'sec', value: 2 },
      { label: 'thr', value: 3 }
    ]
let isSome= arr.some((_ele,_indx,arr) => (
    _ele.value == 2
))
//isSome = true

arr.every(callback)

遍历数组,判断是否所有元素都满足条件

返回:如果所有元素都满足条件,则返回true,反之则返回false

let arr = [
      { label: 'frt', value: 1 },
      { label: 'sec', value: 2 },
      { label: 'thr', value: 3 }
    ]
let isEvery= arr.every((_ele,_indx,arr) => (
    _ele.value == 2
))
//isEvery= false

arr.reduce(callback,initVal)

参数分别为运算的方法、第一个参数的初始值

遍历数组,对元素进行累加

返回:最终计算结果

let arr = [1,2,3,4,5,6]
let sum = arr.reduce((total,item,index,arr) => (
    total+=item
),0)
//sum = 21

3、其他

  • join
  • toString
  • flat
  • flatMap
  • coypWithin
  • fill

arr.join()

将数组以括号里的参数为分隔符转换成字符串(不改变原数组)

返回:拼接以后的字符串

let arr = [1,2,3,4,5]
let newItem = arr.join('-')
//newItem = '1-2-3-4-5'

arr.toString()

将数组转换成字符串,并且每个元素通过‘,’隔开(不改变原数组)

返回:生成的字符串

let arr = [1,2,3,4,5]
let newItem = arr.toString()
//newItem = '1,2,3,4,5'

arr.flat(depth)

参数为需要进行扁平化的深度,默认为1

将多维数组进行扁平化(不改变原数组)

返回:进行扁平化以后的数组

let arr = [[1,2,3],4,[5,6,7]]
let newArr = arr.flat(1)
//newArr = [1,2,3,4,5,6,7]

arr.flatMap(callback)

将数组进行遍历后在扁平化处理,类似与先执行map方法再执行flat,但只能扁平化一层(不改变原数组)

返回:遍历并扁平化后生成的数组

let arr = [1,3,5]
let newArr = arr.flatMap(_ele => [_ele,_ele+1])
//newArr = [1,2,3,4,5,6]

arr.copyWithin(index,startIndex,endIndex)

参数分别为目标位置的开始小标,选择元素的开始下标,选择元素的结束下标(不包含)

将数组指定位置元素复制到指定的位置,数组长度不改变

返回:移动后的数组

let arr = [1,2,3,4,5,6]
let res = arr.copyWithin(2,0,3)
//res = arr = [1,2,1,2,3,6]

arr.fill(val,startIndex,endIndex)

参数分别为填充的值,开始填充的下标,结束填充的下标(不包含)

将目标值填充到数组指定位置

返回:改变后的数组

let arr = [11,12,13,14,15]
let res = arr.fill(5,0,2)
//res = arr = [5,5,13,14,15]