JS中的主流遍历方式

遍历数组中这几种方式较为常见: for、 for in、for of、 for Each、filter、 map

下面为大家区分一下他们的不同之处: `

    // for
    for(let i = 0;i < arr.length;i++) {
        console.log(i); // 0,1,2,3
    }
    for(let i = 0;i < obj.length;i++) {
        console.log(i); // 不运行
    }

    // for in 
    for (const i in arr) {
        console.log(i); // 0,1,2,3
    }
    for (const i in obj) {
       console.log(i); // name
    }

    // for of
    for (const i of arr) {
        console.log(i); // 小红,小明,小黄,giao哥
    }
    for (const i of obj) {
        console.log(i); // obj is not iterable 报错!
    }

    // for Each
    arr.forEach(i => {
        console.log(i); // 小红,小明,小黄,giao哥
    });
    obj.forEach(i => {
        console.log(i); //obj.forEach is not a function 报错
    });

    // filter 
    arr.filter(i=>{
        console.log(i); // 小红,小明,小黄,giao哥
    })
    obj.filter(i=>{
        console.log(i); // 报错
    })

    //filter 过滤用法
    const new_arr =  arr.filter(i=>{
            return i.indexOf('小')>=0
    })
    console.log(new_arr); // 小红,小明,小黄

    // map
    arr.map(i=>{
        console.log(i); // 小红,小明,小黄,giao哥
    })
    obj.map(i=>{
        console.log(i); // 报错
    })`

由此可见 这些遍历方式 都适合数组 但是适合对象的只有唯一的for in

下面来讲一下各个遍历所拥有的特性:

• for:

这是最传统的遍历数组的方式 应该也是工作中用的最多的遍历方式,不多赘述

• for in:

ES6的新语法 适合遍历对象和数组 遍历数组的时候 拿到的是数组下标 遍历对象的时候 拿到的是对象key值 通常拿来遍历对象

• for of:

ES6新语法:只适用于遍历数组 遍历出来的值为数组的值,并非下标

• for Each:

ES6新语法:适用于遍历数组,自带三个参数 第一个参数是数组的每一项,第二个参数是数组的索引(index),第三表示改元素所在数组的全部数据(整个数组数据)

• filter:

在遍历过程中 筛选过滤 return返回的是新数组 不影响就数组 第一个参数是数组的每一项,第二个参数是数组的索引(index),第三表示改元素所在数组的全部数据(整个数组数据)

• map: 与filter类似 return返回的是新数组 不影响就数组 第一个参数是数组的每一项,第二个参数是数组的索引(index),第三表示改元素所在数组的全部数据(整个数组数据)