Carl的博客空间

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

正文

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

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

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

push

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

1
2
3

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

pop

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

1
2
3

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

shift

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

1
2
3

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

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

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

map

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

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

filter

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

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

some

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

1
2
3

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

every

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

1
2
3

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

find

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

1
2
3

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

findIndex

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

1
2
3

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

flat

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

1
2
3

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

用于填充数组

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

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

push
pop
shift
unshift
fill

结语

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

正文