数组迭代方法简述

一、filter

 1.filter应用场景:

     用于筛选数组中满足条件的元素，返回筛选后的新数组// 例:找出数组中的偶数;求数组中大于10的所有元素。

 2.语法:

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

 3.注意点:

         a.回调函数执行次数 == 数组长度

         b.filter函数返回的新数组长度 != 原数组长度

 <script>
        let arr =  [22,12,13,14,15]
        let arr1 = arr.filter(function(value){
           return value%2 == 0
        })
        console.log(arr1);
    </script>

二、findIndex

        1.数组findIndex方法:

        a.作用:获取符合条件的第一个元素位置(下标)。

         b.语法: arr.findIndex((item,index) => {return true/false} 返回值:符合则返回元素下标,不符合则返回-1。

        c.应用场景:适合于数组中元素为对象·类型,比传统for循环要高效。

<script>
        let arr = [
            {name:'张祥俊',age:17},
            {name:'李四',age:20},
            {name:'金先生',age:21},
            {name:'毛豆',age:4}
        ]
        let res =arr.findIndex((item,index) =>{
            return item.age < 18
        })
        console.log(res);//0
    </script>

三、forEach

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

         2.语法:数组.forEach( function(value,index,arr){ // 算法 })

        /3.forEach必须提供一个参数     a.value:每次遍历到的数组元素     b.index:每次遍历到的数组的下标   c.arr:数组      d.forEach

<script>
        let arr = [12,15,46,68]
        // 原来的写法
        // let sum = 0;
        // for (let i = 0; i < arr.length; i++) {
           
        //     sum += arr[i]
        // }
        // console.log(sum);//141
        // 现在的写法
        let sum =0 ;
        arr.forEach((value) => {
            sum+=value
        })
        console.log(sum);//141
    </script>

         3.注意点:
        a.回调函数执行次数 == 数组长度(数组中有多少元素，回调函数就会执行几次)// b.forEach函数没有返回值
         c.回调函数不需要return(就算手动ruturn,也不会结束循环)
        4.filter方法和forEach方法的参数完全相同。
         filter主要是根据条件进行筛选,满足条件的值会被return返回,需要一个变量接收

四、map

        1. map应用场景:利用某种规则映射得到一个新数组:遍历每一个元素，并对每一个元素做响应的处理，返回一个新数组

        例如:将数组中的每一个元素+1

        例如:将数组中的每一个元素*2

          2. 注意点:

         a.回调函数执行次数 == 数组长度(数组中有几个元素，回调函数就会执行几次)// b.map函数返回的新数组长度 == 原数组长度

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

        (如果不return,新数组中的每一个元素都变成了undefined)

         3.语法:(元素,下标) => {return 新元素}

    <script>

         let arr = [23,31,60,88,108,206];
        let arr1 = arr.map((value,index) => {
           return value + 1;
        })
           console.log(arr1);
    </script>

五、reduce

         1.数组reduce方法:

         a.作用:遍历数组元素,为每个数组执行一次回调函数。

         b.语法: arr.reduce((sum,value) =>{ return sum + value })返回值:最终sum值

         c.应用场景:数组求和/平均数/最大值/最小值

         d.注意点:最好给一个初始值,避免空数组报错

    <script>
        let arr = [12,20,35,45,8]

        // sum:初始值,默认为数组第一个元素。
        // value: 数组的每一个元素,默认为数组第二个元素。
        let arr1 = arr.reduce((sum,value)=>{
            // 这里必须要return,相当于把本次计算的结果赋值给下一次的sum: sum= sum + value 
            return sum + value
        })
        console.log(arr1);//120
        // 下面这种写法与上面等价,ES6箭头函数如果只有一行代码则可以省略大括号,且省略return。 
        console.log(arr1.reduce((sum,value) => sum + value)); //120
    </script>

六、some

         1.some应用场景:用于判断数组中是否存在满足条件的元素

         2.注意点:

         a.回调函数执行次数 != 数组长度// b.some函数返回一个布尔类型值

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

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

        1 return false; 遍历继续，且some函数返回值为true。

        (1)需求:判断数组中有没有负数

    <script>
        let arr =[0,34,657,78,33,68]
        //> 0
        let arr1 = arr.some((item)=>{
            return item > 0
        })
        console.log(arr1);//true
    </script>

七、every

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

         2.注意点

         a.every函数返回一个布尔类型值

         需求:判断数组中没有负数

 <script>

        let arr =[0,34,-7,78,33,68]
        //> 0
        let arr1 = arr.every((item)=>{
            return item > 0
        })
        console.log(arr1);//false
    </script>