js的数组怎么做计算器

JS的数组怎么做计算器？

通过JavaScript数组实现计算器，可以使用数组存储操作数和操作符，然后进行计算。使用数组存储操作数和操作符、遍历数组进行计算、实现基本的四则运算。例如，在实现加法时，遍历数组并将所有操作数相加。下面将详细介绍如何使用JavaScript数组来实现一个简单的计算器。

一、通过JavaScript数组存储操作数和操作符

在实现计算器的过程中，首先需要通过JavaScript数组来存储用户输入的操作数和操作符。可以使用一个数组来存储整个表达式，然后遍历数组，执行相应的计算。这样可以方便地处理多步计算并保持表达式的结构。

let expression = []; // 用于存储操作数和操作符的数组
function addToExpression(value) {
  expression.push(value);
  console.log(expression);
}

二、遍历数组进行计算

在用户输入完表达式后，需要遍历数组并进行计算。为了实现这一点，可以先将所有的乘法和除法计算完毕，然后再进行加法和减法的计算。

function calculateExpression(expr) {
  let result = 0;
  let currentOperation = null;
  for (let i = 0; i < expr.length; i++) {
    if (typeof expr[i] === 'number') {
      if (currentOperation) {
        if (currentOperation === '+') {
          result += expr[i];
        } else if (currentOperation === '-') {
          result -= expr[i];
        } else if (currentOperation === '*') {
          result *= expr[i];
        } else if (currentOperation === '/') {
          result /= expr[i];
        }
        currentOperation = null;
      } else {
        result = expr[i];
      }
    } else {
      currentOperation = expr[i];
    }
  }
  return result;
}

三、实现基本的四则运算

实现计算器的基本功能包括加法、减法、乘法和除法。以下代码展示了如何通过JavaScript数组来实现这些运算。

function add(a, b) {
  return a + b;
}
function subtract(a, b) {
  return a - b;
}
function multiply(a, b) {
  return a * b;
}
function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

四、完整的计算器实现示例

下面是一个完整的计算器实现示例，通过JavaScript数组存储操作数和操作符，并进行计算。

<!DOCTYPE html>
<html>
<head>
  <title>Simple Calculator</title>
  <script type="text/javascript">
    let expression = [];
    function addToExpression(value) {
      if (!isNaN(value)) {
        value = parseFloat(value);
      }
      expression.push(value);
      document.getElementById('display').value = expression.join(' ');
    }
    function calculateExpression() {
      let result = 0;
      let currentOperation = null;
      for (let i = 0; i < expression.length; i++) {
        if (typeof expression[i] === 'number') {
          if (currentOperation) {
            if (currentOperation === '+') {
              result += expression[i];
            } else if (currentOperation === '-') {
              result -= expression[i];
            } else if (currentOperation === '*') {
              result *= expression[i];
            } else if (currentOperation === '/') {
              result /= expression[i];
            }
            currentOperation = null;
          } else {
            result = expression[i];
          }
        } else {
          currentOperation = expression[i];
        }
      }
      document.getElementById('display').value = result;
      expression = [result];
    }
    function clearExpression() {
      expression = [];
      document.getElementById('display').value = '';
    }
  </script>
</head>
<body>
  <h1>Simple Calculator</h1>
  <input type="text" id="display" readonly>
  <br>
  <button onclick="addToExpression('1')">1</button>
  <button onclick="addToExpression('2')">2</button>
  <button onclick="addToExpression('3')">3</button>
  <button onclick="addToExpression('+')">+</button>
  <br>
  <button onclick="addToExpression('4')">4</button>
  <button onclick="addToExpression('5')">5</button>
  <button onclick="addToExpression('6')">6</button>
  <button onclick="addToExpression('-')">-</button>
  <br>
  <button onclick="addToExpression('7')">7</button>
  <button onclick="addToExpression('8')">8</button>
  <button onclick="addToExpression('9')">9</button>
  <button onclick="addToExpression('*')">*</button>
  <br>
  <button onclick="addToExpression('0')">0</button>
  <button onclick="addToExpression('.')">.</button>
  <button onclick="calculateExpression()">=</button>
  <button onclick="addToExpression('/')">/</button>
  <br>
  <button onclick="clearExpression()">C</button>
</body>
</html>

五、处理复杂表达式

上述示例仅处理简单的四则运算，如果需要处理更复杂的表达式，例如带有括号的运算，可以使用“栈”的概念来存储和计算子表达式。

function evaluateExpression(expression) {
  let operators = [];
  let values = [];
  for (let i = 0; i < expression.length; i++) {
    if (expression[i] === '(') {
      // Do nothing
    } else if (expression[i] === ')') {
      let operator = operators.pop();
      let value = values.pop();
      if (operator === '+') {
        value = values.pop() + value;
      } else if (operator === '-') {
        value = values.pop() - value;
      } else if (operator === '*') {
        value = values.pop() * value;
      } else if (operator === '/') {
        value = values.pop() / value;
      }
      values.push(value);
    } else if (expression[i] === '+' || expression[i] === '-' || expression[i] === '*' || expression[i] === '/') {
      operators.push(expression[i]);
    } else {
      values.push(parseFloat(expression[i]));
    }
  }
  return values.pop();
}

六、用户输入验证和错误处理

在实际应用中，需要对用户输入进行验证，并处理可能出现的错误。例如，当用户输入连续的操作符或者除以零时，需要给予适当的提示。

function validateInput(input) {
  let lastChar = expression[expression.length - 1];
  if (isNaN(input) && isNaN(lastChar)) {
    alert('Invalid input: Two consecutive operators are not allowed.');
    return false;
  } else if (input === '/' && lastChar === '0') {
    alert('Invalid input: Division by zero.');
    return false;
  }
  return true;
}
function addToExpression(value) {
  if (validateInput(value)) {
    if (!isNaN(value)) {
      value = parseFloat(value);
    }
    expression.push(value);
    document.getElementById('display').value = expression.join(' ');
  }
}

七、用户界面优化

为了提升用户体验，可以优化用户界面。例如，添加键盘输入支持、显示当前表达式、以及提供更友好的按钮布局。

<!DOCTYPE html>
<html>
<head>
  <title>Simple Calculator</title>
  <style>
    .calculator {
      width: 200px;
      margin: auto;
    }
    .display {
      width: 100%;
      height: 40px;
      text-align: right;
    }
    .buttons {
      display: flex;
      flex-wrap: wrap;
    }
    .button {
      width: 50px;
      height: 50px;
      margin: 5px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
  </style>
  <script type="text/javascript">
    // JavaScript code as described above
  </script>
</head>
<body>
  <div class="calculator">
    <input type="text" id="display" class="display" readonly>
    <div class="buttons">
      <div class="button" onclick="addToExpression('1')">1</div>
      <div class="button" onclick="addToExpression('2')">2</div>
      <div class="button" onclick="addToExpression('3')">3</div>
      <div class="button" onclick="addToExpression('+')">+</div>
      <div class="button" onclick="addToExpression('4')">4</div>
      <div class="button" onclick="addToExpression('5')">5</div>
      <div class="button" onclick="addToExpression('6')">6</div>
      <div class="button" onclick="addToExpression('-')">-</div>
      <div class="button" onclick="addToExpression('7')">7</div>
      <div class="button" onclick="addToExpression('8')">8</div>
      <div class="button" onclick="addToExpression('9')">9</div>
      <div class="button" onclick="addToExpression('*')">*</div>
      <div class="button" onclick="addToExpression('0')">0</div>
      <div class="button" onclick="addToExpression('.')">.</div>
      <div class="button" onclick="calculateExpression()">=</div>
      <div class="button" onclick="addToExpression('/')">/</div>
      <div class="button" onclick="clearExpression()">C</div>
    </div>
  </div>
</body>
</html>

八、处理高级功能

如果希望添加更多高级功能，例如支持科学计算、内存操作（存储和调用中间结果）、以及历史记录，可以进一步扩展计算器的功能。

let memory = 0;
let history = [];
function storeMemory() {
  memory = parseFloat(document.getElementById('display').value);
}
function recallMemory() {
  addToExpression(memory);
}
function addToHistory(result) {
  history.push(result);
}
function showHistory() {
  alert(history.join('n'));
}

九、调试和测试

在开发计算器的过程中，调试和测试是非常重要的步骤。可以使用浏览器的开发者工具来调试代码，并编写测试用例来验证计算器的功能。

function testCalculator() {
  addToExpression('1');
  addToExpression('+');
  addToExpression('1');
  if (calculateExpression() !== 2) {
    console.error('Test failed: 1 + 1 should equal 2');
  } else {
    console.log('Test passed');
  }
}
testCalculator();

通过上述步骤，可以使用JavaScript数组来实现一个功能齐全的计算器。希望这篇文章对你有所帮助，祝你编码愉快！