数组内置遍历方法

134 阅读2分钟

讲解一下数组内置遍历方法和区别

一.什么是数组的遍历?

数组遍历就是将数组中的所有元素都取出来。

二.遍历方法有哪些

  • 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

总结:

以上就是我常用的数组的遍历方法了