reduce用于遍历数组迭代数组_reduce数组迭代项目中用的到吗-CSDN博客

本文链接：https://blog.csdn.net/qq_44917015/article/details/111565526

本文总结了JavaScript中数组的常用方法，包括map、filter、reduce等，并通过实例代码展示了如何使用这些方法来处理数组数据，特别关注reduce方法在数组求和等操作中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr=[10,3,4,7,3,5,8,9];

        // 数组中 大于5的返回一个新数组
        // var arr1 = arr.map( function(item,index,arr){
        //     return item > 5
        // } )

        // 返回一个新数组
        // 筛选数组中 满足条件的结果
        // var arr1 = arr.filter( (item,index,arr)=>{
        //     return item > 5
        // } )
        // console.log(arr1)
        // 数据驱动显示

        // reduce
        /* 
        从数组的第一位开始遍历 第零位没有遍历 
        从下标1开始
        刚开始value是数组的第0项 后面每次value都是un
        如果在函数中使用return 就会将返回值在下次数组
        的遍历中赋予value
        */
    //    arr.reduce( function(value,item,index,arr){
    //     console.log(value)
    //     // 循环的次数是数组的个数-1
    //     // value就是上次遍历return的值 
    //     return value + item
    //    } )

    /* 累计相加数组元素求和
    reduce 返回的是一个值 
    就是遍历到最后一次return出来的值 */

    // var sum = arr.reduce( (value,item)=>{
    //     return value + item
    // } )
    // console.log(sum)

    // 累计相加 数组元素求和 在基数为100的前提下
    // var sum = arr.reduce( (val,item)=>{
    //     console.log(val)
    //     return val+item
    // },100 )
    // console.log(sum)

    /* 
    数组.reduce(回调函数（累积值，元素，下标，数组）{}，初始值)
    如果reduce没有设置初始值 累计值是数组的第0位元素 遍历从下标1开始
    如果reduce设置了初始值 累计值就是从这个初始值开始 遍历从下标0开始
    */
    var goodsList = [
            {selected:true, id: 1001, iconImg: ["a_icon_0.jpg"], img: ["a_0.jpg"], price: 2299, title: "Redmi K30 5G双模 120Hz流速屏 骁龙765G 30W快充 6GB+128GB 深海微光 游戏", config: [], appraisersNum: "3500+", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: false, new: false, gift: false }, outOfStock: [true] },
            {selected:false, id: 1002, iconImg: ["b_icon_0.jpg", "b_icon_1.jpg", "b_icon_2.jpg"], img: ["b_0.jpg", "b_1.jpg", "b_2.jpg"], price: 1049, title: "小米CC9e 索尼4800万旗舰相机 3200万美颜自拍 4030mAh 屏幕指纹 深蓝星球 6GB+64GB 游戏智能拍照手机", config: ["6GB", "4000mAh-4249mAh"], appraisersNum: "29万+", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: true, new: false, gift: false }, outOfStock: [false, true, true] },
            {selected:false, id: 1003, iconImg: ["c_icon_0.jpg", "c_icon_1.jpg", "c_icon_2.jpg", "c_icon_3.jpg"], img: ["c_0.jpg", "c_1.jpg", "c_2.jpg", "c_3.jpg"], price: 1399, title: "Redmi Note8Pro 6400万全场景四摄 液冷", config: ["6GB", "4500mAh-5000mAh"], appraisersNum: "36万+", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: true, new: false, gift: false }, outOfStock: [false, false, false, false] },
            {selected:true, id: 1004, iconImg: ["d_icon_0.jpg", "d_icon_1.jpg", "d_icon_2.jpg", "d_icon_3.jpg"], img: ["d_0.jpg", "d_1.jpg", "d_2.jpg", "d_3.jpg"], price: 1049, title: "Redmi Note8Pro 6400万全场景四摄 液冷游戏芯 4500mAh长续航 NFC 18W快充 红外遥控 6GB+128GB 暮光橙 游戏智能手机 小米 红米", config: ["8GB", "3000mAh-3400mAh"], appraisersNum: "47万+", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: false, new: false, gift: false }, outOfStock: [false, true, true, true] },
            {selected:true, id: 1005, iconImg: ["e_icon_0.jpg", "e_icon_1.jpg", "e_icon_2.jpg"], img: ["e_0.jpg", "e_1.jpg", "e_2.jpg"], price: 1699, title: "Redmi K30 120Hz流速屏 前置挖孔双摄 6GB+128GB 花影惊鸿 游戏智能手机 小米 红米", config: ["6.65-6.74英寸", "6GB"], appraisersNum: "64000", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: true, new: true, gift: true }, outOfStock: [false, true, true] }];

    // console.log(goodsList)
    var sum = goodsList.reduce( 
   function(value,item){
    if(item.selected){
        return value + item.price
    }else{
        return value
    }
   } ,0)
    console.log(sum)
    </script>
</body>
</html>