JavaScript计算器：数值显示与初始化问题解决指南

学习文章要努力，但是不要急！今天的这篇文章《JavaScript计算器开发：解决数值显示与初始化问题》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

本教程深入探讨了使用JavaScript构建计算器时常见的数值显示异常问题，特别是由于类属性未初始化导致的`Cannot read properties of undefined`错误。我们将详细分析问题根源，并通过在构造函数中调用初始化方法来解决该问题，同时优化显示逻辑，确保计算器功能稳定且界面显示准确。

引言：构建基础JavaScript计算器中的常见挑战

在Web开发中，使用HTML、CSS和JavaScript构建一个功能完备的计算器是一个经典的练习项目。然而，开发者在实现过程中常会遇到一些棘手的问题，例如点击按钮后数值无法正确显示，或者控制台报错Cannot read properties of undefined。这些问题通常源于对JavaScript类（Class）的初始化机制理解不足，以及显示逻辑处理上的疏忽。本教程将针对这些常见问题，提供一套系统的分析与解决方案，帮助您构建一个稳定可靠的计算器。

问题分析：数值未显示与undefined错误

在提供的JavaScript计算器代码中，核心功能由一个Calculator类封装。当用户尝试点击数字按钮时，期望看到相应的数字出现在显示区域。然而，实际情况是显示区域为空，并且控制台可能报告Cannot read properties of undefined (reading 'toString')之类的错误，尤其是在appendNumber函数内部。

让我们聚焦于appendNumber函数和Calculator类的构造函数：

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        // 缺少对 currentOperand 和 previousOperand 的初始化
    }

    appendNumber(number) {
        if (number === '.' && this.currentOperand.includes('.')) return
        // 问题发生在这里：如果 this.currentOperand 是 undefined，调用 toString() 会报错
        this.currentOperand = this.currentOperand.toString() + number.toString()
    }
    // ... 其他方法
}

问题根源：

1. this.currentOperand 未初始化： 在Calculator类的constructor方法中，虽然DOM元素被正确地赋值给了this.previousOperandTextElement和this.currentOperandTextElement，但用于存储当前和前一个操作数的内部变量this.currentOperand和this.previousOperand却未被初始化。
2. 首次调用 appendNumber： 当计算器实例创建后，用户首次点击数字按钮，appendNumber函数被调用。此时，this.currentOperand的值为undefined。尝试对undefined调用toString()方法会导致TypeError: Cannot read properties of undefined (reading 'toString')错误，从而阻止数值的正确追加和显示。

解决方案一：初始化类属性

解决undefined错误的关键在于确保所有在类方法中使用的核心属性在实例创建时得到初始化。Calculator类中已经有一个clear()方法，它的作用正是将currentOperand、previousOperand和operation重置为初始状态。我们可以巧妙地利用这个方法。

修复方法： 在Calculator类的constructor中调用this.clear()。

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear(); // 关键修复：在构造函数中初始化所有操作数和操作符
    }

    clear() {
        this.currentOperand = ''; // 初始化为空字符串
        this.previousOperand = ''; // 初始化为空字符串
        this.operation = undefined;
    }

    // ... 其他方法保持不变
}

通过这一改动，当Calculator实例被创建时，this.currentOperand和this.previousOperand会立即被初始化为空字符串，从而避免了在appendNumber等方法中对undefined调用toString()的错误。

解决方案二：优化显示逻辑

除了undefined错误，原始代码在显示更新方面也存在一个常见但容易被忽视的问题，可能导致数值未能按预期格式化显示。让我们检查updateDisplay方法：

    updateDisplay() {
        this.currentOperandTextElement.innerText = this.currentOperand // 直接赋值原始值
            this.getDisplayNumber(this.currentOperand) // 调用格式化函数，但其返回值未被使用
        if (this.operation != null) {
            this.previousOperandTextElement.innerText = this.previousOperand // 直接赋值原始值
                `${this.previousOperand} ${this.operation}` // 模板字符串未被使用
        }
        else {
            this.previousOperandTextElement.innerText = ''
        }
    }

问题根源：

updateDisplay方法在更新显示元素时，直接将原始的this.currentOperand和this.previousOperand赋值给了innerText。紧随其后的this.getDisplayNumber()调用虽然会返回格式化后的字符串，但其返回值被丢弃了，没有被赋值给任何DOM元素。这意味着，尽管有格式化逻辑，但显示屏上看到的仍然是未经格式化的原始数值。

修复方法： 确保getDisplayNumber的返回值被正确地用于更新显示元素。

    updateDisplay() {
        // 使用 getDisplayNumber 的返回值来更新当前操作数显示
        this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
        if (this.operation != null) {
            // 使用 getDisplayNumber 的返回值来更新前一个操作数显示，并拼接操作符
            this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
        } else {
            this.previousOperandTextElement.innerText = '';
        }
    }

通过此优化，计算器将能够正确地显示格式化后的数值，例如大数字的千位分隔符，以及精确的小数部分。

完整且修正后的JavaScript代码示例

结合上述两项修复，以下是完整的script.js代码，它解决了数值显示问题和undefined错误，并优化了显示逻辑。

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear(); // 关键修复：在构造函数中初始化所有操作数和操作符
    }

    clear() {
        this.currentOperand = '';
        this.previousOperand = '';
        this.operation = undefined;
    }

    delete() {
        this.currentOperand = this.currentOperand.toString().slice(0, -1);
    }

    appendNumber(number) {
        if (number === '.' && this.currentOperand.includes('.')) return;
        this.currentOperand = this.currentOperand.toString() + number.toString();
    }

    chooseOperation(operation) {
        if (this.currentOperand === '') return;
        if (this.previousOperand !== '') {
            this.compute();
        }
        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = '';
    }

    compute() {
        let computation;
        const prev = parseFloat(this.previousOperand);
        const current = parseFloat(this.currentOperand);
        if (isNaN(prev) || isNaN(current)) return;
        switch (this.operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current; // 修正：原代码为 prev + current
                break;
            case '*':
                computation = prev * current; // 修正：原代码为 prev + current
                break;
            case '÷':
                computation = prev / current; // 修正：原代码为 prev + current
                break;
            default:
                return;
        }
        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = '';
    }

    getDisplayNumber(number) {
        const stringNumber = number.toString();
        const integerDigits = parseFloat(stringNumber.split('.')[0]);
        const decimalDigits = stringNumber.split('.')[1];
        let integerDisplay;
        if (isNaN(integerDigits)) {
            integerDisplay = '';
        } else {
            integerDisplay = integerDigits.toLocaleString('en', {
                maximumFractionDigits: 0
            });
        }
        if (decimalDigits != null) {
            return `${integerDisplay}.${decimalDigits}`;
        } else {
            return integerDisplay;
        }
    }

    updateDisplay() {
        // 优化：使用 getDisplayNumber 的返回值来更新当前操作数显示
        this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
        if (this.operation != null) {
            // 优化：使用 getDisplayNumber 的返回值来更新前一个操作数显示，并拼接操作符
            this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
        } else {
            this.previousOperandTextElement.innerText = '';
        }
    }
}

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.appendNumber(button.innerText);
        calculator.updateDisplay();
    });
});

operationButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.chooseOperation(button.innerText);
        calculator.updateDisplay();
    });
});

equalsButton.addEventListener('click', button => {
    calculator.compute();
    calculator.updateDisplay();
});

allClearButton.addEventListener('click', button => {
    calculator.clear();
    calculator.updateDisplay();
});

deleteButton.addEventListener('click', button => {
    calculator.delete();
    calculator.updateDisplay();
});

额外修正说明： 在审查compute()方法时，发现加减乘除的case中，除了加法，其余运算（减、乘、除）也错误地使用了prev + current。上述完整代码已将这些逻辑错误一并修正。

注意事项与最佳实践

1. 类属性的初始化： 始终确保在类的constructor中初始化所有关键属性，特别是那些在其他方法中会被读取或修改的属性。这可以有效避免undefined相关的运行时错误。
2. 显示逻辑的严谨性： 当涉及到数值格式化时，务必确认格式化函数的返回值被正确地应用到DOM元素上。避免调用了格式化函数但其结果却被丢弃的情况。
3. 错误处理： 对于计算器这类应用，还需要考虑更完善的错误处理，例如：
   • 除以零： 在compute方法中添加对除以零的检查。
   • 无效输入： 尽管parseFloat可以处理部分非数字输入，但更严格的输入验证可以提升健壮性。
4. 代码可读性： 保持代码结构清晰，方法职责单一，有助于后期维护和功能扩展。

总结

通过本教程，我们深入分析并解决了JavaScript计算器中常见的数值显示异常和Cannot read properties of undefined错误。核心在于理解并正确实施类属性的初始化，并通过在constructor中调用clear()方法来实现。同时，我们优化了updateDisplay方法，确保getDisplayNumber的格式化结果能够正确呈现在用户界面上。遵循这些最佳实践，将有助于您开发出更健壮、用户体验更佳的Web应用程序。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~