数组常用的几种遍历方法

434 阅读2分钟

map

根据某种规则映射数组,得到映射之后的新数组

map语法特点

  • 回调执行次数 == 数组长度
  • 回调函数内部return
  • 方法自身的返回值: 映射后的新数组

image.png

filter

根据条件 筛选数组
应用场景: (1)筛选数组中的偶数 (2)商品价格筛选

filter语法特点

  • 回调执行次数 == 数组长度
  • 回调函数内部return
  • return true: 满足筛选条件 放入新数组中
  • return false: 不满足筛选条件 不放入新数组中
  • 方法自身的返回值: 筛选后的新数组 image.png

forEach

相当于 for循环另一种写法
应用场景: 遍历数组

forEach语法特点

  • 回调执行次数 == 数组长度
  • 回调函数内部return 无 没有return
  • 方法自身的返回值: 无

image.png

some

判断 数组中是否有满足条件的元素 (逻辑或 || 有任意一个满足即可)
应用场景: (1)判断数组中有没有奇数 (2)非空判断:判断表单数组中 有没有元素value为空

some语法特点

  • 回调执行次数 != 数组长度
  • 回调函数内部return return true 循环结束 找到满足条件的元素 some自身返回true
    return false 循环继续 没有找到满足条件的 如果所有的元素都是返回false 最终some默认返回false
  • 方法自身的返回值 true: 有满足条件的元素
    false: 没有满足条件的元素

image.png

every

判断 数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足)
应用场景 : (1)判断数组中是否所有元素都是 偶数 (2)开关思想 : 全选

every语法特点

  • 回调执行次数 != 数组长度
  • 回调函数内部return return true 循环继续 满足条件,如果所有元素都满足,最终every默认返回值true
    return false 循环结束 不满足条件,此时every返回值false
  • 方法自身的返回值 true: 所有满足都满足条件
    false: 有元素不满足条件

image.png

findIndex

找元素下标
应用场景: (1)如果数组中是值类型 找元素下标用: arr.indexOf(元素)
(2)如果数组中是引用类型 找元素下标: arr.findIndex()

findIndex语法特点

  • 回调执行次数 != 数组长度
  • 回调函数内部return return true 循环结束 找到元素 返回当前元素下标
    return false 循环继续 没找到 如果全部都是false 最终返回固定值-1
  • 方法自身的返回值 -1: 没有
    下标: 有

image.png

reduce

为每一个元素执行一次回调,返回最后一次回调的结果
reduce场景 : 求数组累加和

image.png

includes

方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。 image.png