掌握数组循环与高阶方法：forEach、some、every、reduce

小蜜蜂127

已于 2025-05-23 17:57:29 修改

阅读量268

点赞数

分类专栏：前端知识点归纳文章标签： javascript 前端 typescript

于 2022-01-09 17:53:09 首次发布

本文链接：https://blog.youkuaiyun.com/Java721/article/details/122396583

版权

前端知识点归纳专栏收录该内容

5 篇文章

订阅专栏

1、数组的循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const arr=['小红','小绿','小蓝']

        // forEach循环一旦开始,无法终止
        // arr.forEach((item,index)=>{
        //     console.log('ok')
        //     if(item==='小绿'){
        //         console.log(item+index)
        //     }
        // })

        // 
        arr.some((item,index)=>{
            console.log('ok')
            if(item==='小绿'){
                // 在找到对应项之后,可以通过return true固定语法,来终止some循环
                return true
            }
        })
    </script>
</body>
</html>

2、数组的every方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
          const  arr=[
        {id:1,name:'西瓜',state:true},
        {id:2,name:'草莓',state:true},
        {id:3,name:'木瓜',state:true},
    ]

    //需求:判断数组中,水果是否被全选了
    const res=arr.every(item=>item.state===true)//判断条件
    console.log(res)
    </script>
  
</body>
</html>

3、数组的reduce方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    const  arr=[
        {id:1,name:'西瓜',state:true,price:10,count:1},
        {id:2,name:'草莓',state:true,price:80,count:2},
        {id:3,name:'木瓜',state:false,price:20,count:3},
    ]

    // 把购物车数组中,已勾选的水果,总价累加起来
    // let amt=0;
    // arr.filter(item=>item.state).forEach(item=>{
    //     amt+=item.price*item.count
    // })
    // console.log(amt)

    // 先对数组进行过滤
    //arr.filter(item=>item.state).reduce((累加的结果,当前循环项)=>{},初始值)
    const res=arr.filter(item=>item.state).reduce((amt,item)=>{
        return amt+=item.price*item.count
    },0)
    console.log(res)

    // reduce简写
    const res=arr.filter(item=>item.state).reduce((amt,item)=>amt+=item.price*item.count,0)
    </script>
</body>
</html>