如何使用Javascript解析数组中的整数和运算符？

Question

我正在尝试使用HTML，CSS和JavaScript编写一个计算器应用程序，到目前为止，我们已经能够在显示屏上填充数字和运算符。

我试图找到一种方法将数字（作为整数）与运算符分开，并希望以后对它们运行运算函数以完成计算。

但是，我真的很难将数字和运算符分开。 一个典型的数组如下所示：

["9", "8", "7", "+", "3"]

我已经研究了join()和parseInt()但看不到如何确定循环中数组元素之间的差异。

请在下面找到我的完整JS和HTML代码。 任何建议将不胜感激。

JS

const add = (num1, num2) => num1 + num2
const subtract = (num1, num2) => num1 - num2
const multiply = (num1, num2) => num1 * num2
const divide = (num1, num2) => num1 / num2
let textView = document.querySelector('input[data- 
view]')
let calculation = []

// type numbers into the calculator display.
document.querySelector('div[data-behavior="btn- 
container"]').addEventListener('click', function (e) {
  if (e.target.dataset.input === 'number') {
calculation.push(e.target.value)
textView.value = calculation.join('')
}
})
// type operators into the calculator display
document.querySelector('div[data-behavior="btn-container"]').addEventListener('click', function (e) {
  if (e.target.dataset.input === 'operator') {
    calculation.push(e.target.value)
    textView.value = calculation.join('')
  }
})

HTML

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class='calculator-container'>
      <div class = 'display-container'>
        <form>
          <input data-view class = 'textView'>
        </form>
      </div>
      <div class = 'button-container' data-behavior='btn-container'>
        <button class = 'number'data-input = 'number' value = 7>7</button>
        <button class = 'number'data-input = 'number' value = 8>8</button>
        <button class = 'number'data-input = 'number' value = 9>9</button>
        <button class = 'operatot' data-input = 'operator' value = />/</button>
        <button class = 'number'data-input = 'number' value = 4>4</button>
        <button class = 'number'data-input = 'number' value = 5>5</button>
        <button class = 'number'data-input = 'number' value = 6>6</button>
        <button class = 'operator' data-input='operator' value = X >X</button>
        <button class = 'number' data-input = 'number' value = 1>1</button>
        <button class = 'number'data-input = 'number' value = 2>2</button>
        <button class = 'number'data-input = 'number' value = 3>3</button>
        <button class = 'number'data-input = 'number' value = 0>0</button>
        <button class='operator' data-input='operator' value = ->-</button>
        <button class='operator' data-input='operator' value = +>+</button>
        <button data-behavior='equals'>=</button>
        <button data-behavior='clear' value = 'clear'>AC</button>
      </div>
    </div>
    <script src="calculator.js" ></script>
  </body>
</html>

Answer 1

首先，在我看来，您还没有完全弄清计算器的行为方式。 在按下数字按钮之前先按操作员按钮会发生什么？ 如果您连续打两个数字会怎样？ 您支持小数还是整数？ （您可能已经决定不这样做。）“等于”按钮在哪里？ 清除按钮在哪里？

第二件事是您没有完全弄清楚逻辑就投入了代码。 如果这样做，我将设置两个click事件处理程序，一个用于您的number类，另一个用于您的operator类。 每个逻辑都不相关，因此它们不应成为同一功能的一部分（功能基本上应该坚持做一件事情）。 我将拥有三个变量：第一个数字，选定的运算符和第二个数字； 我也会像你一样拥有一个数组。 我还要添加一个等于按钮和一个清除按钮。 （对于清除按钮，我将添加另一个特定于它的事件处理程序，并为其指定自己的类名。）我的逻辑将运行以下内容：

从用户那里获得一个号码。 存储到阵列。
只要用户不断按下数字按钮，就将其继续推入阵列。
当用户点击运算符时，将其存储到currentOperator或任何您想调用的对象。 将您的数组解析为整数。 将结果存储到num1 。 清空阵列。
从用户那里获取另一个数字，存储到您的数组中，重复步骤2。
当用户单击equals按钮时，再次将数组解析为整数。 将结果存储到num2 。 评估currentOperator 。 执行适当的操作并显示结果。
如果用户点击清除，则清空您的数组并重置变量。

无论您做什么，在开始编写之前都需要知道它是什么。 编写代码不会告诉您要编写什么代码。

如何使用Javascript解析数组中的整数和运算符？

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-08-02 00:02:47

如何使用Javascript解析数组中的整数和运算符？

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-02 00:02:47

解决方案1
0 已采纳 2018-08-02 00:02:47