阅读 358

不可不知的知识---js中常用的数组遍历

这是我参与新手入门的第3篇文章

背景

在前端开发中,最重要的一环就是对数据的处理,而数组又是各种数据类型中最容易遇到的,由此可知对数组的处理是何其的重要,知道了下面这些遍历数组的方法,你将所向披靡

filter()遍历数组

  • filter遍历数组会返回一个新的数组
  • 循环次数就是数组的长度
let arr = [1,2,3,4,5]
let newArr = arr.filter((item,index) => {
	return item>3
})
consolo.log(newArr)
//结果:[4,5]
复制代码

some()遍历数组

  • 符合条件时返回true,否则返回false
  • 循环次数小于等于数组长度
  • 当条件满足时就会终止循环,并返回ture,如果没有满足判断条件的项,会遍历整个数组,并且最后返回false
let arr = [1,2,3,4,5]
let newArr = arr.some((item,index) => {
	return item>3
})
console.log(newArr)
//结果:[true]

复制代码

map()遍历数组

  • 会遍历整个数组的循环
  • 会得到一个新的数组,返回数组的项是什么取决于map函数中的调用方法
let arr=[1,2,3,4,56]
let newArr = arr.map((item,index) => {
	return item === 1
})
console.log(newArr)
//结果:[2,3,4,5,6,7]
复制代码

forEach()遍历数组

  • 类似正常的for循环,可改变原来数组中的内容
  • 在forEach中return会失效,因为forEach内部封装的有callback
let a = [1,2,3]
a.forEach((item,index) => {
	a[index] = item + 1
})
console.long(a)
//结果:[2,3,4]
复制代码

find()

  • 用于对象,有返回值,会返回符合条件的那一项,否则返回undefined
  • 循环次数小于或等于数组长度
b=[{a:1},{b:2},{c:3}]
b.find((item,index) => {return item.b===2})
//结果:{b:2}
复制代码

findIndex()

  • 返回符合条件的那个项的索引值,否者返回-1
  • 循环次数小于或等于数组长度
b=[{a:1},{b:2},{c:3}]
b.findIndex((item,index) => {return item.b===2})
//结果:1
复制代码

every()

  • 用于检测所有项是不是都符合某个条件,如果符合返回true,只要遇到不符合都就返回false,并终止遍历
  • 循环次数小于或等于数组长度
a=[2,2,2,2,3]
a.every((item,index) => {
	return item===2
})
//结果:false
复制代码

结语:如有什么不对或者大家想要补充的欢迎评论指出,大家一起进步,加油!!!

文章分类
前端
文章标签