js 数组遍历方法总结

1. for

    说明：最简单的一种，有优化的空间

for (i = 0; i < arr.length; i++) {
     // -- 执行代码
}

    说明：优化版，使用临时变量存储长度，避免重复获取，数组数据量大的时候会特别明显

for (i = 0, len = arr.length; i < len; j++) {
    // -- 执行代码
}

2. forEach

    说明：遍历数组每一项，没有返回值，对原数组没有任何影响

arr.forEach((v, i, array) => {
    // -- 执行代码
    // -- v 遍历的当前项，i 当前索引，array 原数组 
})

3. for of

    说明：可以遍历字符串、数组、对象，可以使用与 forEach() 不同的是，它可以正确响应 break、continue和return 语句

for (v of arr) {
  // -- 执行代码
  console.log(v);
}

4. map

    说明：可以使用 return 对遍历的每一项做处理，最终会返回一个处理过数组，不会改变原数组

let res = arr.map((v,i)=> v + 1);
console.log(res);

5. some

    说明：在回调函数里进行条件判断，返回 true 或 false 。当有一个元素满足条件时就会停止遍历并返回 true，当全部的元素都不满足要求时，返回 false

let res = arr.some((v, i) => v > 3)
console.log(res);

6. every

    说明：和 some 的区别在于：当有一个条件不满足条件是就会停止遍历并返回 false，当全部条件满足时返回 true

let res = arr.every((v, i) => v > 3)
console.log(res);

7. filter

    说明：遍历数组，在回调函数里进行条件判断，当结果为 true 时，将该元素返回，组成一个新数组，不会改变原数组

const arr = [1, 2, 3, 4, 5];
let res = arr.filter((v, i) => v > 3)
console.log(res); // -- [4,5]

 

8. find

    说明：返回第一个满足过滤方法的元素，一个都没有满足的返回 undefined，遇到一个满足的元素后就会停止遍历，不支持 IE

const arr = [1, 2, 3, 4, 5];
let res = arr.find((v, i) => v > 3)
console.log(res); // -- 4

9. findIndex

    说明：在回调函数里进行条件判断，返回满足条件第一个元素的索引，如果都不符合则返回 -1。

const arr = [1, 2, 3, 4, 5];
let res = arr.findIndex((v, i) => v > 3)
console.log(res); // -- 3