如何优化JS计算器重复代码？这类项目能否写入前端实习生简历？

原代码的重复逻辑集中在运算符处理与计算环节，可通过函数封装和对象映射大幅简化：

1. 提取重复逻辑为独立函数 #

把运算符点击时的重复步骤（数字转换、累计结果、重置输入）封装成函数：

function handleOperator(action) {
  currentAction = action;
  screen.innerHTML = action;
  if (number) {
    currentScore += parseInt(number);
    number = '';
  }
}

2. 用对象映射替代冗余判断 #

创建计算逻辑映射表，将运算符与对应计算函数绑定；同时用对象统一管理各类按钮的行为：

const calculateMap = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => b !== 0 ? a / b : 'Error' // 新增除以0的边界处理
};

const actionMap = {
  '=': () => {
    if (currentAction && number) {
      const result = calculateMap[currentAction](currentScore, parseInt(number));
      screen.innerHTML = result;
      currentScore = typeof result === 'number' ? result : 0;
      number = '';
      currentAction = '';
    }
  },
  'C': () => {
    screen.innerHTML = '0';
    currentScore = 0;
    currentAction = '';
    number = '';
  },
  '+': () => handleOperator('+'),
  '-': () => handleOperator('-'),
  '*': () => handleOperator('*'),
  '/': () => handleOperator('/')
};

3. 简化点击事件逻辑 #

修改事件绑定逻辑，直接通过actionMap匹配按钮内容，未匹配则处理数字输入：

item.forEach((element) => {
  element.addEventListener('click', function () {
    const content = this.innerHTML;
    if (actionMap[content]) {
      actionMap[content]();
    } else {
      number += content;
      screen.innerHTML = number;
    }
  });
});

优化后的完整JS代码 #

const items = document.querySelectorAll('.item');
const screen = document.querySelector('.calculator__screen');
let number = '';
let currentScore = 0;
let currentAction = '';

function handleOperator(action) {
  currentAction = action;
  screen.innerHTML = action;
  if (number) {
    currentScore += parseInt(number);
    number = '';
  }
}

const calculateMap = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => b !== 0 ? a / b : 'Error'
};

const actionMap = {
  '=': () => {
    if (currentAction && number) {
      const result = calculateMap[currentAction](currentScore, parseInt(number));
      screen.innerHTML = result;
      currentScore = typeof result === 'number' ? result : 0;
      number = '';
      currentAction = '';
    }
  },
  'C': () => {
    screen.innerHTML = '0';
    currentScore = 0;
    currentAction = '';
    number = '';
  },
  '+': () => handleOperator('+'),
  '-': () => handleOperator('-'),
  '*': () => handleOperator('*'),
  '/': () => handleOperator('/')
};

items.forEach((element) => {
  element.addEventListener('click', function () {
    const content = this.innerHTML;
    if (actionMap[content]) {
      actionMap[content]();
    } else {
      number += content;
      screen.innerHTML = number;
    }
  });
});

这个简易计算器完全适合写入简历，重点要突出你的思考与实践细节，而非仅描述功能：

• 强调你完成了从HTML结构、CSS布局到JS交互的完整流程，体现前端基础能力；
• 说明你对代码的优化过程（比如从冗余的if/switch到用函数+对象映射重构），展示对代码可维护性的理解；
• 若有额外优化（比如支持键盘输入、处理小数、错误提示），务必补充，体现主动思考能力；
• 明确写出项目用到的技术：CSS Flex/Grid布局、DOM事件处理、JS函数封装与逻辑优化。

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