银行账户交易余额计算代码优化与方法合并咨询

现有代码存在的问题 #

• 重复逻辑冗余：两个方法都在执行「获取交易类型→遍历交易数组→更新余额」的流程，代码重复率高，后续维护成本大
• 数据来源不一致：updateBalanceAmount用实例属性this.balance作为初始值，totalBalance却从DOM元素.balance-amount读取，一旦DOM内容被意外修改，会导致数据不同步
• 支出逻辑错误：totalBalance处理「gasto（支出）」时，用balance += 交易金额，完全不符合业务逻辑——支出应该是从余额里扣除金额，而非增加
• 数值处理不严谨：混用Number()和parseFloat()转换金额，且未校验transactionAmount.amount本身是否为有效数值，容易出现NaN异常
• DOM操作效率低：多次重复调用document.getElementById和document.querySelector，未缓存DOM元素，增加不必要的性能开销

代码优化要点 #

1. 统一数据源：优先使用实例属性this.balance作为余额的唯一可信来源，避免从DOM读取
2. 修正支出逻辑：根据交易类型处理金额的加减（贷记加，支出减）
3. 缓存DOM元素：提前获取需要操作的DOM节点，避免重复查询
4. 统一数值转换：用Number()统一转换交易金额，同时校验数值有效性
5. 提取重复逻辑：把相同的遍历、金额计算逻辑抽离，减少冗余

合并为单一方法的实现 #

可以把两个方法的逻辑整合为一个updateBalance方法，根据交易类型自动处理余额更新：

// 建议在类的构造函数里提前缓存DOM元素
constructor() {
  this.transaction = []; // 假设这是交易数组
  this.balance = 0; // 初始余额
  this.selectMovimiento = document.getElementById("selectMovimiento");
  this.availableAmountEl = document.querySelector('.available-amount');
  this.balanceAmountEl = document.querySelector('.balance-amount');
}

updateBalance() {
  const transactionType = this.selectMovimiento.value;
  let updatedBalance = this.balance;

  // 遍历交易数组，根据类型计算余额
  for (const transaction of this.transaction) {
    const amount = Number(transaction.amount);
    // 跳过无效数值
    if (isNaN(amount)) continue;

    if (transactionType === 'credito') {
      updatedBalance += amount;
    } else if (transactionType === 'gasto') {
      updatedBalance -= amount; // 修正支出逻辑：扣除金额
    }
  }

  // 更新实例属性和DOM显示
  this.balance = updatedBalance;
  this.total = updatedBalance; // 保留原逻辑里的total属性
  this.availableAmountEl.textContent = updatedBalance;
  this.balanceAmountEl.textContent = updatedBalance;
}

额外优化说明 #

• 用for...of代替forEach，逻辑更清晰，也支持中途跳出（如果需要）
• 增加了对交易金额的有效性校验，跳过无效的NaN数值
• 所有DOM元素都在构造函数里缓存，避免每次调用方法都重复查询
• 统一了余额的更新逻辑，不管是贷记还是支出，都基于实例属性this.balance计算，保证数据一致性

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