JavaScript计算多维数组商品总价返回NaN问题求助

问题根源 #

• total变量仅声明未初始化，默认值为undefined，undefined和数值执行加法运算时结果直接为NaN，这是你遇到问题的核心原因
• 现有累加逻辑仅累加了商品单价，未乘以对应商品的购买数量，计算结果不符合实际业务需求
• 未对用户输入的价格、数量做合法性校验，若用户输入非数字内容，parseInt转换后会得到NaN，也会导致最终结果异常

修正方案 #

首先在使用total前给它初始值0，其次调整累加逻辑为 单价*数量，同时增加输入合法性校验，修正后的JS代码如下：

let carrito = [];
let continuar;
let figura;
let precio;
let cantidad;
// 初始化total为0
let total = 0;
do{
    figura = prompt("Figura de acción:");
    precio =  prompt("Precio:");
    cantidad = prompt("Cantidad:");
    // 简单校验输入合法性，不是数字就要求重新输入
    while(isNaN(parseInt(precio)) || isNaN(parseInt(cantidad))){
        alert("价格和数量必须为数字，请重新输入");
        precio =  prompt("Precio:");
        cantidad = prompt("Cantidad:");
    }
    carrito.push([figura, parseInt(cantidad), parseInt(precio)]);
    continuar = prompt("¿Continuar?");
}while(continuar != "n");
console.log(carrito)
crearTabla()
function crearTabla(){
    let tabla = "<thead><tr><th>Producto</th><th>Cantidad</th><th>Precio</th></tr></thead>"
    for (var i = 0; i < carrito.length; i++) {
        tabla += `<tr><td>${carrito[i][0]}</td><td>${carrito[i][1]}</td><td>${carrito[i][2]}</td></tr>`;
        // 累加逻辑改为 单价*数量
        total += carrito[i][2] * carrito[i][1];
        console.log(carrito[i][2]);
    }
    tabla += `<tr><td>---</td><td>Subtotal:</td><td>${total}</td></tr>`;
    document.getElementById("factura").innerHTML = tabla;
}

额外说明：你现有HTML代码中按钮绑定的calcular()函数未定义，如果需要点击按钮再触发输入和计算逻辑，把上述代码中do while循环和crearTabla()调用的逻辑放到calcular函数内即可。

内容的提问来源于stack exchange，提问作者Serk