前端开发-数组的遍历方法

最新推荐文章于 2023-06-16 17:09:13 发布

薛定谔的量子猫.

最新推荐文章于 2023-06-16 17:09:13 发布

阅读量469

点赞数

文章标签：算法前端

本文链接：https://blog.csdn.net/Wsnbb007/article/details/128123709

版权

数组的常用遍历方法有七种:map, filter, forEach, some, every, findindex, reduce。

map遍历:

map应用场景：利用某种规则映射得到一个新数组
换句话说就是：遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组

注意点：
a. 回调函数执行次数 == 数组长度
* 数组中有多少个元素，回调函数就会执行几次
b. map函数返回的新数组长度 == 原数组长度
c. 回调函数中一定要return，返回的是当前遍历的元素值
* 如果不return，新数组中每一个元素都变成了undefined

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
       
        let arr = [23, 31, 60, 88, 90, 108, 260];

        //(1)需求：数组中每一个元素+1
        
        let arr1 = arr.map((value, index) => {
            return value + 1;//让每一个元素的值+1
        });

        console.log(arr1);

        //(2)需求：数组中每一个元素*2
        let arr2 = arr.map((value, index) => {
            return value * 2;//让每一个元素的值 * 2
        });

        console.log(arr2);

        //(3)需求3： 超过100的商品打八折
        let arr3 = arr.map((value, index) => {
            if(value > 100){
                return value*0.8;
            }else{
                return value;
            }
        });

        console.log(arr3);

    </script>
</body>

</html>

filter遍历:

应用场景：用于筛选数组中满足条件的元素，返回筛选后的新数组

注意点：
a. 回调函数执行次数 == 数组长度
* 数组中有多少个元素，回调函数就会执行几次
b. filter函数返回的新数组长度 != 原数组长度
c. 回调函数一定要return, 返回一个布尔类型值
结果为true: 当前遍历元素就会添加到新数组中
结果为false：当前遍历元素不会添加到新数组中

<script>

        let arr = [23, 31, 60, 88, 90, 108, 260];
        //(1)需求：找出数组中的偶数
       
        let arr1 = arr.filter((item) => {
            return item %2 == 0;
        });

        console.log(arr1);//[60, 88, 90, 108, 260]]

    </script>

forEach遍历:

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

注意点：
a. 回调函数执行次数 == 数组长度
* 数组中有多少个元素，回调函数就会执行几次
b. forEach函数没有返回值
c. 回调函数不需要return
* 就算手动return，也不会结束循环

 <script>

        let arr = [23, 31, 60, 88, 90, 108, 260];
        
        arr.forEach((item,index) => {
            console.log(`下标为${index}的元素是${item}`);
            
        });

    </script>

some遍历:

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

注意点：
a. 回调函数执行次数 != 数组长度
* some函数在遍历的时候可以中途结束
b. some函数返回一个布尔类型值
c. 回调函数返回布尔类型值用于结束遍历
return true; //遍历结束，且some函数返回值为true
(默认) return false; //遍历继续，且some函数返回值为false

<script>

        //需求：判断数组中没有负数
        let arr = [23, 31, 60, 88,-50, 90, 108, 260];
       
        let arr1 = arr.some((item,index) => {
            console.log(`下标为${index}的元素是${item}`);
            // if(item < 0){
            //     return true;//循环结束
            // };
            //简写成
            return item<0;
        });
        console.log(arr1);
        

    </script>

every遍历:

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

注意点：
a. 回调函数执行次数 != 数组长度
b. every函数返回一个布尔类型值
c. 回调函数返回布尔类型值用于结束遍历
return true; //遍历继续，且every函数返回值为true
(默认)return false; //遍历结束，且every函数返回值为false

 <script>

        //需求：判断数组中没有负数
        let arr = [23, 31, 60, 88,-50, 90, 108, 260];
       
        let arr1 = arr.every((item,index) => {
            console.log(`下标为${index}的元素是${item}`);
            // if(item > 0){
            //     return true;//如果是正数，循环继续
            // }
            //简写成
            return item>0;
            
        });
        console.log(arr1);
        

    </script>

findindex方法:

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

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

 <script>

        let arr1 = [
            { name: '张三', age: 20 },
            { name: '李四', age: 30 },
            { name: '王五', age: 25 },
            { name: '赵六', age: 33 },
            { name: '小七', age: 10 },
        ];
        
        //1.数组findIndex方法 : 获取符合条件的第一个元素位置(下标)
        //示例：查找arr1中第一个未成年在什么位置
        let res1 = arr1.findIndex((item,index)=>{
            /* 回调函数
            return true : 循环中断，findIndex方法返回值为当前index值
            return false： 循环继续，如果数组全部遍历完还是没有返回true，则finedIndex方法最终返回-1
             */
            // if(item.age<18){
            //     return true;
            // }else{
            //     return false;
            // };
            return item.age < 18;
        });
        console.log(res1);
    </script>

reduce方法:

应用场景：为每一个元素执行一次回调，并得到回调最终的结果

<script>

        let arr = [5, 10, 20, 35, 40, 15]
        // 无条件求元素和
        let res = arr.reduce((sum, item, index) => sum + item, 0)
        console.log(res)

        //需求：有条件求元素和（求数组中奇数的和）
        // 核心： 满足条件就与sum累加，不满足条件sum值不变
        let res1 = arr.reduce((sum, item, index) => {
            if (item % 2 === 1) {
                return sum + item//满足条件累加
            } else {
                //如果没有这个return, 下一次sum就会变成undefined
                return sum//不满足条件 sum值不变
            }
        }, 0)
        console.log(res1)

        let res2 = arr.reduce((sum, item, index) => item % 2 ? item + sum : sum, 0)
        console.log(res2)

        // let sum = 0
        // for(let i = 0;i<arr.length;i++){
        //     //判断是不是奇数
        //     if( arr[i] % 2 === 1 ){
        //         sum = sum + arr[i]
        //     }
        // }
        // console.log(sum)//100

    </script>