解析javascript中的reduce函数

最新推荐文章于 2024-08-26 20:25:07 发布

SSS4362

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量281

点赞数 2

分类专栏： javascript基础知识文章标签： javascript 开发语言 reduce函数累加

本文链接：https://blog.csdn.net/SSS4362/article/details/126816438

版权

javascript基础知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中数组的reduce方法，包括其基本语法、使用场景和一个具体的商品总价计算的实例。在有初始值的情况下，reduce函数会从第一个元素开始累加，而在无初始值时，则从第二个元素开始，将前一次的累加结果作为当前的初始值。通过这两个示例，读者可以清晰地了解reduce函数的工作原理。

摘要由CSDN通过智能技术生成

解析javascript中的reduce函数

1 语法

arr.reduce(function(perviousValue, currentValue,[currentIndex],[arr]){
				//业务逻辑
				return undefined;
},[initialValue])
//其中arr为数组引用
//[currentIndex],[arr]、[initialValue]都是可选的,其余的参数都是必选的
//当有了initialValue,时,第一次时,previousValue=initialValue,currentValue=arr[0]
//若没有initialValue时,第一次时,previousValue=arr[0],currentValue=arr[1]
//函数的每次返回值都会赋值给perviousValue,让其开启下一次旅程

2 使用场景

用于对象数组中的累加操作

3 典型题目

3.1 题目内容

//~~删除线格式~~ 题目内容:统计一下json数据的商品总价
var goods = [{name:'牙膏',price:12.5},{name:'巧克力',price:20.8},
            {name:'剃须刀',price:99.9},{name:'毛巾',price:18.8},
            {name:'苹果13',price:6999.8},{name:'麻辣王子',price:3.5},
            {name:'怡宝',price:2.3},{name:'芙蓉王',price:23.0},
            {name:'棒棒糖',price:0.5},{name:'口罩',price:1.2}];

3.2 题目解答

3.2.1 附上初始值(initialValue)

a 示例html代码

<!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>测试reduce函数的用法</title>
</head>
<body>
    <script>
        var goods = [{name:'牙膏',price:12.5},{name:'巧克力',price:20.8},
                    {name:'剃须刀',price:99.9},{name:'毛巾',price:18.8},
                    {name:'苹果13',price:6999.8},{name:'麻辣王子',price:3.5},
                    {name:'怡宝',price:2.3},{name:'芙蓉王',price:23.0},
                    {name:'棒棒糖',price:0.5},{name:'口罩',price:1.2}];
        var totalPrice=goods.reduce(function(sum,ele){
            sum+=ele.price;
            return sum;
        },0)
        console.log("商品总价为: "+totalPrice);
    </script>
   
</body>
</html>

b 示例代码运行截图

在这里插入图片描述

3.2.2 不附上初始值

a 示例html代码

<!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>测试reduce函数的用法</title>
</head>
<body>
    <script>
        var goods = [{name:'牙膏',price:12.5},{name:'巧克力',price:20.8},
                    {name:'剃须刀',price:99.9},{name:'毛巾',price:18.8},
                    {name:'苹果13',price:6999.8},{name:'麻辣王子',price:3.5},
                    {name:'怡宝',price:2.3},{name:'芙蓉王',price:23.0},
                    {name:'棒棒糖',price:0.5},{name:'口罩',price:1.2}];
        var totalPrice=goods.reduce(function(sum,ele){
            //比较的是内容
            if(sum==goods[0]){
               return sum.price+ele.price;
            }
            sum+=ele.price;
            return sum;
        })
        console.log("不附初始值时的求解方法");
        console.log("商品总价为: "+totalPrice);
    </script>
   
</body>
</html>