如何使用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