数组遍历的常用方法(详解版)

124 阅读4分钟

数组遍历的常用方法

        遍历:想办法拿到数组的每一位成员

        面试题:数组常用的遍历方法中,有一个forEach 和一个map,这两个方法有什么区别?
        1. forEach 的作用是用来遍历数组,而 map 的作用是用来映射数组
        2. forEach 没有返回值,而 map 是可以有返回值的


    ** 1. forEach 
        语法:数组.forEach(function (item, index, origin) {})
                * item:数组的每一项的值
                * index:数组的每一项对应的下标
                * origin:原始数组 (了解,一般没人用)
        作用:遍历数组
        返回值:该方法永远没有返回值(undefined)

        var arr = [100, 200, 300, 400, 500, 600]
        arr. forEach(function(item, index, origin){
                console.log(item, index,origin)
        })


    ** 2. map  
        语法: 数组.map(function (item, index, origin) {})   三个参数的意义与forEach相同
        作用: 映射数组
        返回值: 返回一个和原数组长度相同的数组,但是内部数据可以经过我们的映射加工
            映射加工:就是在函数内以 return 的形式书写

        var arr = [100, 200, 300, 400, 500, 600]
        var num = arr. map(function (item, index, origin) {     // item, index, origin 用哪个写哪个
                return item *2
        })
        console.log('映射数组',num)         // [200, 400, 600, 800, 1000, 1200]-----放大2倍后的值


    * 3. filter
        语法: 数组.filter(function (item, index, origin) {})   三个参数的意义与forEach相同
        作用:过滤数组
        返回值:返回一个新数组,内部存储的是原始数组过滤出来的部分内容
        过滤条件:过滤条件以 return 的形式书写

         var arr = [100, 200, 300, 400, 500, 600]
        var newArr = arr.filter(function(item, index, origin){          
                return item >350        
        })
        console.log('返回值',newArr)             // [400, 500, 600]-----过滤数组的内容,只留下item 大于350的成员


    * 4. find
        语法: 数组.find(function (item, index, origin) {})    三个参数的意义与forEach相同
        作用:在数组内查找满足条件的第一项
        返回值: 找到的数据,如果没找到返回undefined
        查找条件: 以 return 的形式书写

        var arr = [100, 200, 300, 400, 500, 600]
        var newArr = arr.find(function(item, index, origin){          
                return item > 350      
        })
        console.log(newArr)            // 400-----在数组中查找第一个符合条件的成员,只留下符合条件的第一个成员


    * 5. findIndex
        语法: 数组.findIndex(function (item, index, origin) {})    三个参数的意义与forEach相同
        作用:在数组内查找满足条件的第一项的下标
        返回值: 找到的数据 的下标,如果没找到返回 -1
        查找条件: 以 return 的形式书写

        var arr = [100, 200, 300, 400, 500, 600]
        var newArr = arr.findIndex(function(item, index, origin){          
                return item > 350        
        })
        console.log(newArr)              // 3-----在数组中查找第一个符合条件的成员的下标,只留下符合条件的第一个成员的下标

    * 6. some
        语法: 数组.some(function (item, index, origin) {})    三个参数的意义与forEach
        作用:判断数组内是否有一个满足条件的
        返回值: 布尔值 true/false
        判断条件: 以 return 的形式书写

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        var bo1 = arr.some(function (item, index, origin) {
                return item % 2 ===0        
        })
        console.log(bo1)        // true-----判断数组内是否有一个满足条件的  


    * 7. every
        语法: 数组.every(function (item, index, origin) {})    三个参数的意义与forEach
        作用:判断数组内是否全部都满足条件
        返回值: 布尔值 true/false
        判断条件: 以 return 的形式书写

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        var bo2 = arr.every(function (item, index, origin) {
                return item % 2 ===0          
    })
    console.log(bo2)            // false-----判断数组内是否全都满足条件   


    *** 8. reduce(常用)
        语法: 数组.reduce(function (prev,item, index, origin) {}, init)    三个参数的意义与forEach
            * prev: 表示初始值或者上一次的运算结果
            * item: 数组的每一项的值
            * index: 数组的每一项对应的下标
            * origin: 原始数组 (了解,一般没人用)
        作用:用来实现叠加效果
        返回值: 最终叠加的结果
        注意:
            + 叠加条件以 return 的形式书写
            + prev 第一次的值,如果你传递了init,就是init的值,如果没有传递init,那么就是数组[0]的信
            + 如果传递了 init,循环执行数组.Length次, 如果没有传递init,循环执行数组.Length-1var arr = [1, 2, 3, 4]

        // 8.1 init给默认值
        var str1 = arr.reduce(function(prev,item, index, origin) {
                return prev + item         
        }, 0)                    // 默认init 的值给 0, prev第一次的值就等于0 ,item从下标 1 开始
        console.log(str1)       // 10


        // 8.2 init不给值
        var str2 = arr.reduce(function(prev,item, index, origin) {
                return prev + item          
        },)                   // init不给值的时候,prev第一次的值就等于下标0的值,item从下标 1 开始 
        console.log(str2)     // 10