数组的遍历方法可以说是很常用了,接下来一起来盘点一下都有哪些方法可以实现遍历吧。
首先是大家都很熟悉的for循环
啦。
1、for循环
let arr = [1,2,3,4]
// item:当前每一项
for (let i = 0; item<=arr.length; item++ ) {
console.log(item)
}
2、forEach()
forEach()
方法接收一个回调函数(这里我用的是箭头函数的方法),参数有三个,分别是每一项,当前项的索引、以及原数组。forEach()函数
没有返回值。
let arr = [1,2,3,4]
// item:当前项,index:当前索引,arr:原数组
arr.forEach((item, index, arr)=> {
console.log(item, index, arr);
})
3、map()
map()
不改变原数组,可以在函数内部做一些操作,返回处理后的数组。
let arr = [1,2,3,4]
// item:当前项,index:当前索引,arr:原数组
const result = arr.map((item, index, arr)=> {
if(item >2) {
return item
}
})
console.log(result);
需要注意的是:调用map()
一定要把结果 return
出来。如果没有 return
, 则返回undefined
。
4、some()
some()
用于判断数组有没有满足条件,如果有其中一项满足,就返回true
。只有全部都不满足,才会返回false
。 它不会改变原数组。
let arr = [1,2,3,4]
// item:当前项,index:当前索引,arr:原数组
const result = arr.some((item, index, arr) => {
return item <3
})
console.log(result); // true
5、 every()
every
方法,也是用于判断是否符合条件,他只有全部都满足,才会返回**true
**, 一旦其中某一项不符合条件,就中断循环,直接返回 false
。它也不会改变原数组。
let arr = [1,2,3,4]
// item:当前项,index:当前索引,arr:原数组
const result = arr.every((item, index, arr) => {
return item > 0
})
console.log(result);// true
some()
和 every
的区别:
相同点:
都是在遍历的过程中,判断数组中是否有符合条件的,满足返回true
, 不会再对后面的元素进行判断。
不同点:
some()
方法是只要其中一项满足就返回true
every
方法:全部都满足条件,才返回true
6、find()
find()
方法,用于查找数组中是否有满足条件的元素,当找到第一个满足条件的元素时,则直接返回该元素。如果都不满足条件,则返回 undefined
。不会改变原数组。
let arr = [1,2,3,4]
// item:当前项,index:当前索引,arr:原数组
const result = arr.find((item, index, arr) => {
return item <3
})
console.log(result); //1
7、filter()
filter()
方法:用于过滤的方法,但是也可以遍历数组,它返回符合条件的新数组,不会影响原数组。
let arr = [1,2,3,4]
// item:当前项,index:当前索引,arr:原数组
const result = arr.filter((item, index, arr) => {
return item <3
})
console.log(result); // [1, 2]
8、reduce()
reduce()
方法,一般用于求和,它是一个比较特殊的方法,一共有四个参数。
reduce()
方法最重要的作用就是累加的操作,将数组的每个元素从左往右依次执行累加器,返回最终的处理结果。不会影响原数组。
let arr = [1,2,3,4]
// sum:上一次的值,item:当前值,index:当前索引,arr:原数组
const result = arr.reduce((sum, item, index, arr) => {
return sum += item
}, 0)
// 这里的0,是一个初始值,意思是从0开始计算
// 因为我这里做的是加法运算,所以返回的是累加的和
console.log(result); // 10
9、 findIndx()
findIndx()
:与find
类似,只不过findIndx()
查找的是索引,找到符合条件的返回当前项的下标,没找到返回 -1
。
let arr = [1,2,3,4]
// item:当前项,index:当前索引,arr:原数组
const result = arr.findIndex((item, index, arr) => {
return item>3
})
console.log(result); //3
好了,看到这里已经很不容易啦。恭喜你又进步了。继续加油吧!!