「这是我参与2022首次更文挑战的第20天,活动详情查看:2022首次更文挑战」。
今天准备跟大家聊聊在js里,我们经常会用到的一些数组方法,利用这些方法我们可以更高效地开发业务代码,废话不多说,开搞!
正文
首先梳理下我们经常会用到的方法
- push
- pop
- shift
- unshift
- slice
- map
- filter
- some
- every
- find
- findIndex
- flat
- fill
接下来分别介绍它们的用法
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']
需要注意的是,上述方法中 会改变 原数组的有
- push
- pop
- shift
- unshift
- fill
结语
对于js的数组方法,我们一定要牢记心中,这样才能让它们在我们的日常开发中起到帮助作用,好啦,over!