JavaScript中数组迭代方法 （ map，filter，forEach，some，every， findIndex，reduce）

目录

一. map

 map是什么

实例

二. filter

filter是什么？

map方法的结构

   语法

 参数说明

 实例

三.forEach

    forEach是什么？

 语法

实例  

四.some

   some是什么？

语法

实例 

五.every

 every是什么？

语法

实例 

六.findIndex

    findIndex是什么？

语法

实例

七.reduce

  reduce是什么？

语法

参数

 实例

---

一. map

 map是什么

   map是操作js数组的方法，也可以说是一个函数，作用是遍历整个数组，对里面的每个值做处理再返回一个新的值。

注意：1.除非使用map数组里面存在嵌套复杂的对象、数组结构，否则map是不会修改原数组的

           2.回调函数中要return，返回的是当前遍历的元素值

             （如果不return，新数组中的每一个元素变成了undefinde）

           3. map函数返回的新数组长度 == 原数组长度

实例

   map的入参需要传递一个函数进去，因为说它是可以遍历数组的，所以传入的这个函数调用的次数由数组的长度决定，长度是3就是3次，是4就是4次。

        let arr = [92, 19, 0]


       let arr1 =  arr.map(function(value, index){
         // 这个数组长度是5所以函数调用3次
         //value 指的遍历到的对应的数组值 函数调用的三次中 第一次是92 ，然后是19、0
         //index 是数组的索引，三次分别是0，1，2
            return   value  
        })
        
          console.log(arr1) //输出:[92,19,0]

  我们也可采用es6中的箭头函数 会更加便利，

let arr = [92, 19, 0, 2, -4]

let arr2 = arr.map((value, index) => {
          //把原本的数组乘 2
            return value * 2
        })

  console.log(arr2) //  [184 38 0 4 -8]

用箭头函数有什么好处呢，如果里面不用进行复杂的判断，我们可以将右边的{}改成表达式直接返回，省略return：

let b=[1,2,3].map((item,index)=> item*2 )
console.log(b)//[2,4,6]

因为在我们这里例子里面index索引值没用到所以我们可以不传，当入参只有一个时，前面的括号（）都可以省略。

let b=[1,2,3].map( item => item*2 )
console.log(b)//[2,4,6]

二. filter

filter是什么？

     map是操作js数组的方法，也可以说是一个函数，作用是 用于对数组进行过滤。
   它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

  常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，数组去重等等。

    注意：1.回调函数执行次数 == 数组长度

               2.filter函数返回的新数组长度  ！=   原数组长度

map方法的结构

   语法

数组.filter(function(currentValue,index,arr){
               return 筛选条件
           })

 参数说明

 实例

     1.返回数组中所有大于10的元素；

 let arr = [3, 31, 60, -44, 66, 34]

        // 需求：求数组中大于10的所有元素

        let nArr = arr.filter(function(value) {
            //筛选条件
            return value > 10
        })

        console.log(nArr); // [31 60 66 34]

      2.返回数组中的偶数

let arr = [3, 31, 60, -44, 66, 34]

        // 找出数组中的偶数

        let even = arr.filter(function(value) {
            //能被2整除没有余数的 就是偶数
            return value % 2 == 0

        })
        console.log(even); // [60 44 66 34]

三.forEach

    forEach是什么？

    foreach方法主要是针对数组而言的，对数组中的每个元素可以执行一次方法

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

     注意： 1. forEach函数没有返回值，不需要return（就算手动return，也不会结束循环）

                 2.回调函数执行次数 == 数组长度（数组中右多少元素，回调函数就会执行几次）

            

 语法

数组.forEach(function(value,inder,arr){
            //value ：每次遍历到的数组元素
            //inder: 每次遍历到的数组索引
            //arr：数组
        })


 let arr = [3, 31, 60]
        
        arr.forEach((value, index) => {
            console.log(`索引${index}的元素是${value}`)
            // 索引0的元素是3
            // 索引1的元素是31
            // 索引2的元素是60
        })

实例  

      对数组进行累加

let arr = [3, 31, 60, -44, 66, 34]
        
         //对数组进行累加

        let sum = 0;
        arr.forEach(function(value) {
            sum += value
        })

        console.log(sum);  //150

四.some

   some是什么？

      数组中some方法，主要是用于测试数组中是不是至少有一个元素通过了被提供的函数测试。

       some的作用（使用场景）：判断数组中至少存在一个元素满足指定条件。

      注意：1.回调函数执行次数   !=  数组长度

                 2.some函数返回一个布尔值

                3.回调函数返回布尔类型值用于结束遍历

                    return  true； 遍历结束，且some函数返回值为true。

                    return   false;  遍历结束，且some函数返回值为 false。

语法

数组.forEach(function(item,index,arr){
          item：数组中正在处理的元素。
          index：数组中正在处理的元素的索引值。
          arr：some()被调用的数组。
        })

实例 

        判断数组中有没有负数

 let arr = [92, 19, 0, 2, -4, 66, 43, 108]

        let arr1 = arr.some((item, index) => {
            return item < 0
        })
        console.log(arr1);  // true

    判断数组中的数是否有三的倍数，如果有则打印：以上数有三的倍数，没有则反之。

       // 随便创建一个数组
        let arr = [46, 33, 3, 6]；
         
        let result = arr.some(item => {
           //判断是否能被三整除   能被三整除就返回 true 不能就返回 false
            return item % 3 === 0
        })
          
        if (result) {
            console.log(`以上数有三的倍数`)
        } else {
            console.log(`以上数没有三的倍数`)

        }

五.every

 every是什么？

   every 方法会对数组的每一项都进行一次回调函数，如果所有的元素都通过测试，就返回true 否则返回 false。

    every应用场景：用于判断数组中是否所有元素都满足条件。

   注意：1.every函数返回一个布尔值

              2.返回值：如果回调函数的每一次执行结果都是truthy 值，返回true 否则返回 false

语法

数组.every(function(currentValue, index, arr), {
          currentValue：数组中正在处理的元素。
          index：数组中正在处理的元素的索引值。
          arr：被调用的数组。
})

实例 

     

       //判断数组中有没负数
        let arr = [92, 19, 0, 2, -4, 66, 43, 108];

        let arr2 = arr.every((value) => {
            //判断是否都大于0有一个小于0就是false  反正true
            return value > 0;
        })
        console.log(arr2); // false


        //判断数组是否全为负数
        let arr1 = [-1, -55, -7];

        let arr3 = arr1.every((value) => {
            //判断是否是小于0有一个大于0就是false  反正true
            return value < 0;
        })
        console.log(arr3); // true

六.findIndex

    findIndex是什么？

   findIndex是数组中的方法，返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

应用场景： 适用于数组中元素对象类型，比传统for循环要高效。

 注意：
       1. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
       2.如果没有符合条件的元素返回 -1

      3.IE 11 及更早版本不支持 findIndex() 方法。

语法

数组.indIndex(function(value, index, arr), {
         value：当前的数组元素
         index：当前索引值
         arr：被查找的数组。
})

实例

       //查找第一个未成年在什么位置

        let arr = [
            {name:'张三',age:20},
            {name:'李四',age:8},
            {name:'王五',age:55},
            {name:'赵六',age:18},
        ]

        let res = arr.findIndex((value,index) =>{
            //获取第一个满足大于18的索引
            return value.age < 18;
        })
        console.log(res);// 1

   //查找第一个c的索引
   
   let arr = ['a','b','c','d','c'];

   var flag = arr.findIndex(value => {
       //寻找c的索引 只会返回第一个查找到第一个c的索引
        return value === 'c';
    })
    console.log(flag) // 得到： 2


     let arr1 = ['a','b','d'];

      var flag1 = arr1.findIndex(value => {
        return value === 'c';
    })
    console.log(flag1) // 得到： -1

七.reduce

  reduce是什么？

  reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

作用：遍历数组元素，为每个数组执行一次回调函数

应用场景：数组求和 / 平均值 / 最大值 / 最小值

注意： 最好给一个初始值，避免空数组报错

语法

数组.reduce(function(total, currentValue, currentIndex, arr), {
})

参数

 实例

      求数组之和

        
        //数组求和
        let arr = [92, 19, 0, 2, -4, 66, 43, 108];

        //sum:初始值，默认为数组第一个元素。
        // value: 数组的每一个元素，默认为数组第二个元素。

        let res = arr.reduce((sum, value) => {
            //这里必须要return，相当于把本次计算的结果值给下一次的 sum： sum + value
            return sum + value;
        })
        console.log(res); // 326
        //下面这种写法与上面等价，ES6箭头函数如果只有一行代码则可以省略大括号，且省略return
        console.log(arr.reduce((sum, value) => sum + value));  //326

    求数组最大值

      //求数组最大值
        let arr = [92, 19, 0, 2, -4, 66, 43, 108];

        let res = arr.reduce((sum, value) => {
            //当 value 大于 sum 时 value 就赋值给 sum
            if (sum < value) {
                sum = value;
            }
            return sum
        })
        console.log(res); //108