JS计算器开发异常：运算按钮触发后数组添加冗余元素

核心问题：冗余元素的来源 #

你的funcs.execute方法里的switch语句所有case都未添加break语句，导致代码会贯穿执行所有后续case。比如点击+（对应case 'add'）时，代码会依次执行add、sub、mul、div四个分支，每个分支都会向stats.numbers推送一次数据，原本只应添加1条数据，结果多出来3条冗余元素。

修复步骤 #

1. 给switch的每个case添加break #

修改funcs.execute里的switch逻辑，每个case执行完后加上break，避免代码贯穿：

execute: (o) => {
    switch (o) {
        case 'add':
            if (!stats.operationing) {
                stats.operationing = true;
            }
            stats.currentOperation = 'add';
            stats.numbers.push([Number(document.getElementById('display').innerText), 'add']);
            document.getElementById('display').innerText = '0';
            break; // 添加break
        case 'sub':
            if (!stats.operationing) {
                stats.operationing = true;
            }
            stats.currentOperation = 'sub';
            stats.numbers.push([Number(document.getElementById('display').innerText), 'sub']);
            document.getElementById('display').innerText = '0';
            break; // 添加break
        case 'mul':
            if (!stats.operationing) {
                stats.operationing = true;
            }
            stats.currentOperation = 'mul';
            stats.numbers.push([Number(document.getElementById('display').innerText), 'mul']);
            document.getElementById('display').innerText = '0';
            break; // 添加break
        case 'div':
            if (!stats.operationing) {
                stats.operationing = true;
            }
            stats.currentOperation = 'div';
            stats.numbers.push([Number(document.getElementById('display').innerText), 'div']);
            document.getElementById('display').innerText = '0';
            break; // 添加break
        case 'eq':
            let result = stats.numbers[0][0]; // 初始化result为第一个数，避免从0开始计算错误
            stats.numbers.slice(1).forEach((i) => { // 从第二个元素开始遍历
                switch (i[1]) {
                    case 'add':
                        result += i[0];
                        break; // 添加break
                    case 'sub':
                        result -= i[0];
                        break; // 添加break
                    case 'mul':
                        result *= i[0];
                        break; // 添加break
                    case 'div':
                        if (i[0] === 0) {
                            result = 'Err';
                            break;
                        }
                        result /= i[0];
                        break; // 添加break
                }
            });
            stats.operationing = false;
            stats.numbers = []; // 计算后清空数组，避免重复计算
            document.getElementById('display').innerText = result;
            break; // 添加break
        default:
            const display = document.getElementById('display');
            if (display.innerText === '0' || display.innerText === '' || display.innerText === 'Err') {
                display.innerText = `${o}`;
            } else {
                display.innerText += `${o}`;
            }
            break; // 添加break
    }
},

2. 修复其他潜在bug #

• 重定义的del函数：你定义了两个del函数，第二个会覆盖第一个，导致C按钮功能失效。重命名AC对应的函数为delAll：

function del() {
    const display = document.getElementById('display');
    display.innerText = display.innerText.slice(0, -1) || '0'; // 删完后显示0
}

function delAll() {
    document.getElementById('display').innerText = '0';
    stats.numbers = [];
    stats.currentOperation = '';
    stats.operationing = false;
}

HTML中AC按钮的onclick已调用delAll()，此处只需对应修复JS函数名即可。

• 计算逻辑错误：原eq分支里result初始化为0，会导致第一个数被错误叠加，修复后初始化result为数组第一个元素的值，再从第二个元素开始遍历计算。

验证修复效果 #

修复后，点击运算按钮只会向stats.numbers添加对应的数据，不会出现冗余元素，同时计算器的基础计算功能也能正常工作。

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