使用reduce方法对javascript循环内的所有值求和不起作用

Question

I have a shopping cart.html page where user selected items displays in a table. I want to show Grand Total of all totals in each row of the table. My code are as follows-

function showCart() {
        if (cart.length == 0) {
            $("#cart").css("visibility", "hidden");
            return;
        }

        $("#cart").css("visibility", "visible");
        $("#cartBody").empty();
        for (var i in cart) {
            var item = cart[i];
            var total = item.Qty * item.Price + item.Chrg;
            var row = "<tr><td>" + item.Product + "</td><td>" +
                         item.Price + "</td><td>" + item.Qty + "</td><td>"
                         + item.Chrg + "</td><td>"
                         + total + "</td><td>"
                         + "<button onclick='deleteItem(" + i + ")'>Delete</button></td></tr>";

            $("#cartBody").append(row);

        }
    }

HTML

            <table id="cart" border="1" style="visibility:hidden; width:100%">
                 <thead>
                      <tr>
                          <th>Product</th>
                          <th>Price</th>
                          <th>Qty</th>
                          <th>Del. Charge</th>
                          <th>Total</th>
                          <th></th>
                     </tr>
                 </thead>
                 <tbody id="cartBody">

                 </tbody>
            </table>

RESULT I get this -

+---------+------+-----+------------+-------+
| Product |Price | Qty | Del.Charge | Total |
+---------+------+-----+------------+-------+
| Chips   | 20   |  5  |  10        | 110   |
| Coke    | 50   |  3  |  10        | 160   |
| Corn    | 10   |  2  |  10        |  30   |
+---------+------+-----+------------+-------+

Now I want to show Grand Total at bottom of the table, like this:

+---------+------+-----+------------+-------+
| Product |Price | Qty | Del.Charge | Total |
+---------+------+-----+------------+-------+
| Chips   | 20   |  5  |  10        | 110   |
| Coke    | 50   |  3  |  10        | 160   |
| Corn    | 10   |  2  |  10        |  30   |
+---------+------+-----+------------+-------+
Grand Total: 200

So far I tried this

var gtotal = new Array; //placed above for loop

gtotal = total + ',';
console.log(gtotal); //shows 110,160,30,

var gtotal = [gtotal].reduce((a, b) => a + b, 0);
$("#gtotal").append(gtotal); //append result on div id gtotal on cart.html page

This displays - 0110,0160,030, //it is prefixing 0

Answer 1

gtotal = total + ',';
console.log(gtotal); //shows 110,160,30,

var gtotal = [gtotal].reduce((a, b) => a + b, 0);
$("#gtotal").append(gtotal); //append result on div id gtotal on cart.html page

This displays - 0110,0160,030, //it is prefixing 0

That is because you are doing a+b in your reducing function with 0 as accumulator. Since you are using [gtotal] as input array, there is only one reduce step: with 110,0160,030, . Then a+b is done. With your 0 as accumulator, adding 0 to a string just leads to that behavior because the + operator here is a concatenation operation.

I have used .split(',') to turn your comma separate string in an array of numeric elements as String (so gtotal.split(',') gives ["110", "160", "30", ""] ). Then I used .map to convert these string values to a Number type. At last, .reduce can be used to get your total value.

 var gtotal = '110,160,30,'; console.log(gtotal); //shows 110,160,30, var totalValue = gtotal.split(',').map(s => Number(s)).reduce((a, b) => a + b, 0); console.log(totalValue); 

PS: you can shorten .map(s => Number(s)) into .map(Number) if you want.