小編給大家分享一下JavaScript如何實現計算器的四則運算功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
注：只是前端實現
需求來源是因為有一個做嵌入式 C/C++的基友做了一個遠程計算器。 需求是要求支持輸入一個四則混合運算公式的字符串，返回計算后的結果。
想看看用 C/C++封裝過的 JavaScript 如果要實現這樣一個功能最終效果（文章后我會討論這兩種實現思路，還望各位看官可以提出一些優化方案以及建議之類的~）。
主要是用到字符串切分為數組的方法 split、以及數組中插入刪除的方法 splice。 字符串正則 replace 方法是考慮到用戶的輸入習慣可能有所不同，例如 1+2*3/4 與 3 * 7 + 229。
支持：
基礎四則運算 3+6*5/6-3;
小數四則運算 3.14 + 6 * 5 / 6 - 3.5;
高位四則運算 99 * 94 - 6.35 + 100 / 1024;
多次四則運算 3 * 3 + 3 * 16 - 7 - 5 + 4 / 2 + 22;
以上綜合
不支持：
帶括號的運算 1 * (2 - 3);
其他數學運算
/**
* js四則混合運算計算器 功能實現（約20行+ 面條代碼）
* @param {string} str 輸入的四則運算字符串
* @return {number} 輸出 結果
*/
const calculator = (str) => {
// 定義添加字符函數
const add = (arr, symbol) => {
let length = arr.length;
while (length > 1) {
arr.splice(length - 1, 0, symbol); // 在每一項后面添加對應的運算符
length--;
}
return arr; // 目的是得到一個改變長度的數組
}
const array = add(str.replace(/\s*/g,"").split('+'), '+').map(it => add(it.split('-'), '-').map(it => add(it.split('*'), '*').map(it => add(it.split('/'), '/')))).flat(3);;
// 先運算乘除法
['*', '/'].map(it => {
while (array.includes(it)) {
const index = array.findIndex(o => o === it);
index > 0 && it === '*' ? array.splice(index - 1, 3, (Number(array[index - 1]) * Number(array[index + 1]))) : array.splice(index - 1, 3, (Number(array[index - 1]) / Number(array[index + 1])));
}
})
// 再執行加減法，即從左至右的計算
while (array.length > 1) {
array[1] === '+' ? array.splice(0, 3, (Number(array[0]) + Number(array[2]))) : array.splice(0, 3, (Number(array[0]) - Number(array[2])));
}
return Number(array[0]).toFixed(2);
}如果對 ES6 語法還算熟悉的話，應該可以輕松閱讀代碼的。 想必你也注意到了，這也是其中令我比較糾結的：在日常開發中，是否該經常寫一些面條代碼呢？
（輕松理解的大佬可以直接跳到：步驟3）
1.實現最基礎的加減乘除
2.支持高位數的運算
3.支持多次的運算
4.支持...
如果是初學者，建議跟著敲一下過程（或者 f12 驗證 + 調試），編程能力某種角度下一定是建立在代碼量之下的。
// 版本一
const calculator = ((str) => {
// 定義最基礎的加減乘除
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;
// 將輸入的字符串處理為 數組
const array = str.split('');
// **【處理基本四則運算】
['*', '/', '+', '-'].map(it => {
const index = array.findIndex(o => o === it);
if (index > 0) {
switch (it) {
case '*':
array[index + 1] = mul(array[index - 1], array[index + 1]);
break;
case '/':
array[index + 1] = div(array[index - 1], array[index + 1]);
break;
case '+':
array[index + 1] = add(Number(array[index - 1]), Number(array[index + 1]));
break;
case '-':
array[index + 1] = sub(Number(array[index - 1]), Number(array[index + 1]));
break;
}
array.splice(index - 1, 2)
}
})
// return array[0];
console.log('返回值:', array[0]);
})('3+6*5/6-3')
// 返回值: 5這樣就實現了一個四則混合運算的計算器！
但是這個計算器很雞肋，只是一個最基礎的功能上的實現。即：只可以運行一位數數字的加減乘除混合運算。
其實第一步的想法是，利用數組的性質，通過操作數組來操作單次的四則運算。其中數組的遍歷，我優先 *, / 法，緊接著是 +，- 法。 這其實是有問題的，乘除法在實際運算中的優先級并不明顯，可以說是不怎么影響運算的結果（在文章最后一個版本實現涉及到性能上的討論時會詳談），但是加減法就會有影響了：必須是從左至右的實現，否則影響運算的結果（這里不多贅述）。
【處理基本四則運算】
首先處理字符串為數組 const array = str.split('');這一步代碼舉例說明：
（圖一）
在處理字符串的時候，可以看到 '3+6*5/6-3' 處理成了 ['3', '+', '6', '*', '5', '/', '6', '-', '3']。
然后在版本一代碼中，可以看到我處理運算的執行順序是 ['*', '/', '+', '-']，所以版本一只支持加減乘除一次運算；
const index = array.findIndex(o => o === it); 這一步找到步驟 2 中的符號所在數組中的位置（說明一下，只用字符串的方法也可以實現，即找到字符串的位置，然后操作也可，只是數組更常用，也更容易理解）
觀察處理后的數組，符號總是隔一位出現的，即便是優先級較高的 *、/ 法，也是符號所在的位置的前一項與后一項的運算結果。 array[index + 1] = mul(array[index - 1], array[index + 1]); 將符號所在的下一項的值為調用對應的操作函數的運算結果；
刪除符號位與第一項：array.splice(index - 1, 2)
這時候可以看到最初定義的 array 數組一直在改變，以 node 環境下的打印結果為例（注意觀察運算數組）：
（圖二）
可以看到每次打印都會打印初始數組以及通過 splice 方法處理之后的結果。
弊端：此版本不支持多次運算，即四則混合運算只能執行一次。同時，也不能夠支持高位運算。
在圖一中
如果是涉及高位（個位以上）的數值運算字符串的話，單純的使用 split('') 方法會把兩位數數值，處理成數組的兩項，即影響運算結果。
所以我需要一個方法，在接收一個字符串以后，得到我想要的字符串：
（圖三）
如圖三所述， ary 即所需。
所以，圖三中由 str 到 ary 的過程就是本次版本所需要實現的：
/**
* 實現字符串的數組化分割
* @param {string} strs 輸入的字符串 ： '12*33/3+9+10'
* @returns 數組 ['12', '*', '33', '/', '3', '+', '9', '+', '10']
*/
const split = () => {
const result = str.split('+') // 遇到 + 處理為數組
.map(it => {
return it.split('-') // 遇到 - 處理為數組
.map(it => {
return it.split('*') // 遇到 * 處理為數組
.map(it => {
return it.split('/') // 遇到 / 處理為數組
})
})
})
return result.flat(3);
}我在設計這個算法的時候，一時間也沒有太好的思路和想法，該函數處理字符串為一個多維數組，然后再將數組扁平化處理。如圖四所示：
（圖四）
圖四中，執行該函數，得到一個多維數組（其實最高也只有三維數組），返回值 result 打印出來的結果可以看到，基本滿足所需要的數組：['31', '+', '62', '*', '5', '/', '6', '-', '3'] 。
接下來，為其帶上運算符：
/**
* 定義添加字符函數
* @param {string[]} result 傳入的數組 ['31', '62*5/6-3']
* @param {string} symbol 傳入的運算符
* @returns 數組 ['31', '+', '62*5/6-3']
*/
const add = (result, symbol) => {
let length = result.length;
while (length !== 1) {
result.splice(length - 1, 0, symbol); // 在每一項后面添加對應的運算符
length--;
}
return result; // 目的是得到一個改變長度的數組
}比如傳入 ['31', '62*5/6-3'] ，只需要在第一項之后補 '+' 即可。
實現的目的是考慮到多次運算的時候，為每一個因為 '+' 分割的數組中的項添加運算符，所以這里用到了 while 循環語句，并且由一個變量 length 控制（也可以遍歷數組或者 for 循環數組實現這一步操作）；
檢驗結果，如圖五所示：
（圖五）
這樣就實現了這個任意長度數值數組輸入時，返回帶符號的數組。
【回顧一下】：
上面兩個函數的整體實現就是，實現了根據符號分割數組，根據傳入的數組與符號添加符號：
結合兩個函數，并且簡化一下代碼（其實我個人還是喜歡寫面條代碼的，只是可能不利于閱讀，但是看起來舒服一些~）：
// 定義添加字符函數
const add = (result, symbol) => {
let length = result.length;
while (length !== 1) {
result.splice(length - 1, 0, symbol); // 在每一項后面添加對應的運算符
length--;
}
return result; // 目的是得到一個改變長度的數組
}
const array = (strs = str) =>
add(strs.split('+'), '+').map(it =>
add(it.split('-'), '-').map(it =>
add(it.split('*'), '*').map(it =>
add(it.split('/'), '/')
)
)
).flat(3);即，任意運算字符串的傳入都可以處理為所需數組如圖六所示：
（圖六）
array 函數在后面直接把內部處理函數的返回值綁定了。
對于上述算法的設計如果有更好的實現還希望有朋友可以指出，大家互相之間可以學習一下。
回到版本一，目前的實現只支持一次的四則混合運算，更合理的實現應該是先運算乘除法，再運算加減法，而且先出現的先執行。
完整運算代碼：
const calculator = (str) => {
const add = (result, symbol) => {
let length = result.length;
while (length > 1) {
result.splice(length - 1, 0, symbol);
length--;
}
return result;
}
const array = add(str.replace(/\s*/g, "").split('+'), '+').map(it => add(it.split('-'), '-').map(it => add(it.split('*'), '*').map(it => add(it.split('/'), '/')))).flat(3);;
// 先運算乘除法
while (array.includes('*') || array.includes('/')) {
const itSymbol = array.find(o => o === '*' || o === '/');
const index = array.findIndex(o => o === '*' || o === '/');
index > 0 && itSymbol === '*' ? array.splice(index - 1, 3, (Number(array[index - 1]) * Number(array[index + 1]))) : array.splice(index - 1, 3, (Number(array[index - 1]) / Number(array[index + 1])));
}
// 再執行加減法，即從左至右的計算
while (array.length > 1) {
array[1] === '+' ? array.splice(0, 3, (Number(array[0]) + Number(array[2]))) : array.splice(0, 3, (Number(array[0]) - Number(array[2])));
}
return Number(array[0]).toFixed(2);
}注：有必要說明一下，因為個人習慣不同，所以輸入帶有空格情況，所以這里在處理字符串之前首先用到了一個正則表達式 str.replace(/\s*/g, "") （去除空格）。
等等，我剛剛想到了什么？
如果大家都在輸入的時候，自覺加一個空格隔開運算符與數值的話~
是不是我之前版本二中的字符串處理就可以省一下啦??！
所以作為開發者，一定要 注意規范，注意規范，注意規范！
上面完整代碼中，
簡化了調用加減乘除函數，改而用 array.splice(index - 1, 3, 運算) 運算直接可以操作兩參數。
得到了可操作數組 array 后，先執行乘除法，再執行加減法。
乘除法里先判斷 是否存在 * 或 / 兩個符號，如果存在，則找到符號的位置，運算每一個乘除法，按數學的思維，誰在前先運算誰（但我依然規定了先運算所有的 *，再運算所有的 / 這種方式作為最終實現并放到了文章最開始。因為真正在運算的時候，乘除法的先后執行順序得到的結果似乎并沒有什么關系，而與我而言，我感覺在這套實現中，includes 與 find 的多次執行可能對性能上的損耗更大一些）
當所有的乘除法執行完畢后，就只剩下加減法了，這時候按順序執行加減法即可。
最后保留兩位小數。
其實這段代碼更符合數學思維，先運算乘除法（誰在前先運算誰），再運算加減法。
如果大家有一些其他的想法，可以一起討論一下~
1. 實現逆波蘭表達式
1+2*3 這是一個中綴表達式，人腦很容易計算，結果為7。當然計算機也很容易處理這個表達式。
當我們輸入1.2+(-1+3*1)*2,人腦需要思考一下，但計算機還是可以通過固定代碼快速計算出結果。
但是，當我們隨機輸入中綴表達式 XXX 時，人腦可以手動計算出結果，計算機不可能一個表達式一個代碼塊，那么計算機怎么實現通用且快速的計算呢？答案就是后綴表達式。
中綴和后綴表達式在數據結構里有涉及到，我就不講概念了，下面手動模擬一下計算機計算字符串表達式的過程。
2. 中綴表達式 => 后綴表達式
計算機易于計算的其實是后綴表達式，整個過程就是將已知的中綴表達式轉換為后綴表達式。
2.1 定義【操作數?！亢汀具\算符?！浚?/p>
2.2 運算符棧出棧，操作數棧入棧，上式即可成為: 123*+ 這就是一個簡單的后綴表達式
2.3 計算機在運算后綴表達式時：運算符棧讀取 *，操作數棧讀取 2,3 得到結果 6,；然后運算 1 + 6 = 7。
3. 較復雜的表達式計算
入棧：
( 后的- 作為負數進入操作數棧（如果作為符號位，后面計算會成1.1 - 30）;
與上文一樣，只是不同之處在于運算符棧，遇到 ( 以后先進入運算符棧;
直到遇到 )
3.1 使用 # 符號區分 負數、高位數、以及符號位
3.2 所以得到的后綴表達式為： #-1.1#3#10#*#+#2#/#；
出棧過程：
計算沒有遇到符號位一 # 為準，依次取出
直到遇到符號位之前，取出了三個數 -1.1 3 10
遇到符號位以后，在結果棧中出棧，與符號計算結果 => 結果棧變為 -1.1 30
依此計算：
出棧完成后，就實現了對逆波蘭表達式的求值運算。
我拿到【實現一個支持四則混合運算的計算器】需求以后，首先想到的是字符串轉數組，然后去操作數組，然后由于高級語言的特性，很多方法已經封裝完成，所以實現起來相對容易一些。
當然，也可以采用前端的代碼，用著后端的思維去實現也是一個選擇。
以上是“JavaScript如何實現計算器的四則運算功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
