讲解一下数组内置遍历方法和区别
一.什么是数组的遍历?
数组遍历就是将数组中的所有元素都取出来。
二.遍历方法有哪些
- forEach
- filter
- map
- some
- every
- reduce
三.正式认识一下
forEach方法:
用于调用数组的每个元素,并将元素传递给回调函数
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.forEach((item, index, arr) => {
console.log(item);
});
# 输出结果
# [1 2 3 4 5 6 7 8 9]
注意:
- forEach 循环对于空数组是不会执行回调函数的。
- forEach 循环接受三个参数,item:代码遍历的每一项,index:为数组的下标,arr:为你要遍历的数组本身。第二和第三参数都是可选的。
filter方法:是一个过滤遍历的方法,如果返回条件为true,则返回满足条件为true的新数组
let arrInfo = [4,16,6,8,45,7,87];
const resultArr = arrInfo.filter((item,index,arr)=>{
// 返回每项值大于9的数组
return item > 9;
});
console.log(resultArr)
# 输出结果
# [16, 45, 87]
map方法:主要对数组的复杂罗技处理时用的多,react遍历数据使用的就是map 注意:
- map 循环会针对每一项都进行循环,如果跳过则会返回 undefined。
- map 循环必须 return。
- map 循环接受三个参数,item:代码遍历的每一项,index:为数组的下标,arr:为你要遍历的数组本身。第二和第三参数都是可选的。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.map(item=>{
if(item > 3) {
return item;
}
})
console.log(res)
# 输出结果
# [undefined, undefined, undefined, 4, 5, 6, 7, 8, 9]
some方法:只要数组中至少存在一个满足条件的结果,返回值就为true,否则返回false
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.some((item,index,arr)=>{
return item > 3
})
console.log(res)
# 输出结果
# true
every方法:必须时数组中每一项都得满足条件时,才返回true,否则返回false
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.every((item,index,arr)=>{
return item > 3
})
console.log(res);
# 输出结果:
# false
reduce方法:接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.reduce((total,item,index,arr)=>{
return total + item;
}, 0)
console.log(res);
# 输出结果:
# 45
总结:
以上就是我常用的数组的遍历方法了