javascript - AngularJS 计算总订单金额

Question

我需要创建一个函数来计算所有对象的价格和数量并返回摘要。我的代码:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.menu = {
        burgers: [
            {name: "Classic", price: 10, qty: 1},
            {name: "Mexican", price: 12, qty: 1}
        ],
        drinks: [
            {name: "Water", price: 5, qty: 1},
            {name: "Beer", price: 5, qty: 2}
        ]
    }
    $scope.calcTotal = function() {
        var total = 0;
        // return price*qty of all objects in both arrays 
        // inside menu object and sum them together
        return total;
    }
}

在模板中，我想做这样的事情:

<div>{{ calcTotal() }}</div>

我应该如何编写这个 calcTotal() 函数来实现这一点？
在这种情况下，它应该返回 37。
提前致谢!
还有一个 fiddle .

Answer 1

为什么不利用 reduce() 函数？

只要 $scope.menu 只包含数组，这段代码就会无误地执行

$scope.calcTotal = function() {
    var sum  = 0;
    for (var array in $scope.menu) {
        sum += $scope.menu[array].reduce(function(acc, el) { 
                   return acc + el.price * el.qty 
               }, 0);
    }
    return sum;
}

JavaScript 中的每个数组都实现了 map() 和 reduce() 原语，这些允许您将一些代码应用于数组中的每个元素(在map) 或对每个元素应用相同的代码并将其传递给下一个元素，这样您就可以求和或累加值。 (reduce 中名为 acc 的参数)

我建议阅读这些(非常有用的)函数，它们是函数式编程语言的基础，对于 JS reduce，您可以查看 MDN doc page

最后一点，JavaScript 的 for-in 迭代 $scope.menu 中包含的每个属性 name，所以 array 在这种情况下将是对象中的名称，例如 'burgers' 和 'drinks'。