聊聊js里数组的那些方法~

104 阅读3分钟

「这是我参与2022首次更文挑战的第20天,活动详情查看:2022首次更文挑战」。

今天准备跟大家聊聊在js里,我们经常会用到的一些数组方法,利用这些方法我们可以更高效地开发业务代码,废话不多说,开搞!

ppx2.jpg

正文

首先梳理下我们经常会用到的方法

  • push
  • pop
  • shift
  • unshift
  • slice
  • map
  • filter
  • some
  • every
  • find
  • findIndex
  • flat
  • fill

接下来分别介绍它们的用法

inte.jpg

push

用于向数组末尾添加元素,可以添加一个或多个,返回添加过后的数组长度

    const arr = [0,1,2,3]
    arr.push(4) // 5
    arr.push(5,6) // 7

pop

删除末尾元素,返回被删除的元素

    const arr = [0,1,2,3]
    arr.pop() // 3
    console.log(arr) // [0,1,2]

shift

删除数组头部元素,返回被删除的元素

    const arr = [0,1,2,3]
    arr.shift() // 0
    console.log(arr) // [1,2,3]

unshift

向数组头部添加一个或多个元素,返回添加后的数组长度

    const arr = [0,1,2,3]
    arr.unshift(-1) 
    arr.unshift(-2)
    console.log(arr) // [-2,-1,0,1,2,3]

slice

用于切割数组,通过指定起始与结束坐标,来切分子数组,需要注意子数组 不包括 结束坐标

    const arr = [0,1,2,3]
    arr.slice(0,3) // [0,1,2]

map

用于遍历原数组,生成一个新数组,新数组长度与原数组一致

    const arr = [0,1,2,3]
    arr.map(item => item * 2) // [0,2,4,6]

filter

用于遍历原数组,生成一个新数组,新数组里的元素全都是满足自定义条件的,新数组长度不一定等于原数组

    const arr = [0,1,2,3]
    arr.filter(item => item >= 2) // [2,3]

some

遍历数组,如果某一个元素符合自定义条件,则返回true,否则返回false

    const arr = [0,1,2,3]
    arr.some(item => item > 5) // false
    arr.some(item => item >= 2) // true

every

遍历数组,如果所有元素符合自定义条件,则返回true,否则返回false

    const arr = [0,1,2,3]
    arr.every(item => item >= 2) // false
    arr.every(item => item >= 0) // true

find

用于查找符合条件的元素,如果找到,则返回第一个满足条件的元素,否则返回undefined

    const arr = [0,1,2,3]
    arr.find(item => item > 5) // undefined
    arr.find(item => item >= 0) // 0

findIndex

用于查找符合条件的元素,如果找到,则返回第一个满足条件的元素的下标,否则返回-1

    const arr = [0,1,2,3]
    arr.findIndex(item => item > 5) // -1
    arr.findIndex(item => item >= 0) // 0

flat

用于铺平多维数组,参数为需要被铺平的深度,Infinity为无限深度

    const arr = [0,1,2,3,[4],[5,[6,7]],[8,[9,[10]]]]
    arr.flat(Infinity) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    arr.flat(1) // [0, 1, 2, 3, 4, 5, Array(2), 8, Array(2)]

fill

用于填充数组

    const arr = [0,1,2,3]
    arr.fill('fill') // ['fill','fill','fill','fill']

666.jpg

需要注意的是,上述方法中 会改变 原数组的有

  • push
  • pop
  • shift
  • unshift
  • fill

结语

对于js的数组方法,我们一定要牢记心中,这样才能让它们在我们的日常开发中起到帮助作用,好啦,over!