作者: showVinc

前言

日常开发中常用的几种js遍历方式，运用得当可以省去很多的时间，这种类型的分享已经烂大街了，但是笔者算是记录生活吧。

最常见的for循环方式，使用频率高，性能/效率也是比较不错的

    //在这里v输出的是下标
    let arr = ['apple', 'orange']
    for(let v=0; v<arr.length; v++) {
        console.log(v, arr[v])
    }
    // 0, 'apple'
    // 1, 'orange'

for...of，笔者最常用的一种方式，语法简洁，直接获取输出内容，性能优于for...in

    //在这里v输出的是内容
    let arr = ['apple', 'orange']
    for(let v of arr) {
        console.log(v)
    }
    // 'apple'
    // 'orange'

for...in，笔者使用的较少，用于遍历Object多些，效率低于for, for...of，具体看个人操作习惯

    //在这里v输出的是下标
    let arr = ['apple', 'orange']
    for(let v in arr) {
        console.log(v, arr[v])
    }
    // 0, 'apple'
    // 1, 'orange'

for...of Object.keys 遍历Object对象的方法

   let objs = {
      name: "vinc",
      age: "18",
      work: "it"
    };
    
    for (let v of Object.keys(objs)) {
      console.log(v, objs[v]);
    }
    // 'name' 'vinc'
    // 'age' '18'
    // 'work' 'it'

map for of出来之前使用较多，语法比较简介，遍历小数组效率差异不大，遍历数据量较大的数组效率就相对较低。

    //在这里v输出的是下标
    let arr = ['apple', 'orange']
    let arrRes = arr.map(item => {
      console.log(item);
      return item
    });
    // 'apple'
    // 'orange'
    // 这里arrRes会返回一个新的数组， 数组中的元素为原始数组元素调用函数处理后的值

forEach 作为Array自带的遍历方法，必须是不错的，你说要元素给元素，要下标给下标，但是你想在遍历的时候中断遍历那么抱歉不行，所以使用的时候需要考虑场景是否适合使用。

    let arr = ['apple', 'orange']
    arr.forEach((item, index, arr) => {
      console.log('元素:' item);
      console.log('下标': index);
      console.log('数组': arr);
    }); 

补充

    在以上的循环中如果需要终止后续的程序或者终止当前的循环可以使用到以下的方法： return break continue
    let arr = ['apple', 'orange']
    for(let v of arr) {
        if(v == 'apple') {
            continue;//跳出当前的循环，并不会终止;
        }
        return false;//终止循环 如果for循环中嵌套了for循环也将会终止
        break;//用于跳出最近的一次循环，如果for循环中嵌套了for循环嵌套的循环将会继续执行
    }

结语

希望日常分享的文章能够帮助到各位同学，如果你喜欢这篇文章或者可以帮到你，不妨点个赞吧！有更有的方法也欢迎评论交流！