js实现四则混合运算计算器

最近想用js做一个简单的计算器，不过网上的例子好像大部分都是直接从左到右挨个计算，就好像1+2*5，就会先计算1+2，再计算3*5，并没有实现运算符的优先级，这里找到了一种方法实现，来总结一下。不过这里只是最基本的思路，还有许许多多的细节没有完善。

在解决基本的样式布局与交互逻辑之前，我们先来解决四则混合运算的核心模块，也就是如何把我们输入的字符串转换为数字表达式并进行计算：

我所找到的方法叫做逆波兰表达式（也叫做后缀表达式），关于逆波兰表达式的具体定义大家可以上网去搜索一下，概念应该比较简单。

这里我们举一个例子来展示一下逆波兰表达式的作用：

例如：3+4*5 ,这个表达式要如何实现先算乘号再算加号呢？对于计算机来说应该很难实现

但是把它转换成这个式子再看一下：

3,4,5,*,+，那么这样看起来好像就简单多了，只要每遇到一个操作符就将他的前两个操作数进行运算，再将操作结果代替运算表达式直到算出最终结果，这样说有点复杂，我们还是看一下例子

3,4,5,*,+ -> 3,20,+ -> 23

那么该如何把我们熟悉的 3+4*5 转变成这个牛逼的逆波兰表达式呢？

大家也可以上网搜索一下，这里我给出一个我找到的链接：

基于逆波兰表达式的公式解析器

为了方便大家顺畅的浏览文章，这里截取文章的部分核心内容（即转换规则）：

一般算法：

逆波兰表达式的一般解析算法是建立在简单算术表达式上的，它是我们进行公式解析和执行的基础：

1. 构建两个栈Operand（操作数栈）和Operator（操作符栈）。

2.扫描给定的字符串，如果得到一个数字，则提取（扫描是一位一位的，一定要提取一个完整的数字）数字（以下用Operand代替），然后把Operand压入Operand栈中。

3. 如果获得一个运算符（比如+或者*，下面用B代替），则需要和Operator栈栈顶元素（用A替代）比较：

1) 如果A不存在，则把B压入Operator栈中；

2)如果B是一个左括号，则忽略A和B的优先级比较，把B压入Operator栈。

3)如果B是一个右括号，则把Operator栈顺序出栈，然后把弹出的元素顺序压入Operand栈中，直到栈顶弹出的是左括号，括号不入Operand栈中。

4)如果A是左括号，则把B直接压入Operator栈。

5)如果B优先级比较A高，则把B直接压入Operator栈。

6)如果B优先级低于或等于A的优先级，则把A出栈然后压入Operand栈，反复进行此步骤直到栈顶优先级高于B的优先级或者栈顶是一个括号。

4.扫描完毕后，把Operator栈的元素依次出栈，然后依次压入Operand栈中。

虽然不太明白原理，不过跟着一步步做就可以得到逆波兰表达式了。这里一般会在一开始往operator里面压入一个“#”，并把它的优先级设置为最低，这样就方便其他运算符来进行比较了。

现在我们来理一下思路：为了得到逆波兰表达式我们需要以下几个步骤：

1.将字符串转换为数组，转化过程中要将操作数和操作符分开，直接操作字符串的话，会出现错误，例如：

3+20 会被解析成： 3，+，2，0

2.在数组前加一个“#”，方便进行操作符的比较。

3.根据上面给出的规则进行编码得到operant数组

首先是字符串的转换：

这里是我想出来一种比较笨的方法，就是在操作符两边都加上一个分隔符，在根据这个分隔符来进行分割。应该有更简单的方法，大家可以在评论区讨论下。

　　 var operand = [], //用于存放操作数的栈operator = [], //用于存放操作符的栈textArr = text.split(''),newTextArr = [],calTextArr = []; //用于存放操作数与操作符分割后的数组。for(var i = 0; i < textArr.length; i++){if(!Number(text[i])){newTextArr.push("|",text[i],"|");}else{newTextArr.push(textArr[i]);}}calTextArr = newTextArr.join('').split("|");calTextArr.unshift("#")

然后就是根据规则一步步来了，但是其中有一个运算符的优先级比较我们还没有解决

运算符的优先级比较

这里我们把每一个运算符的优先级都用数字来表示就更加清晰明了。

/*
*比较操作符的优先级
*param string 需要被转换的字符串
*/
function compareOperator(a,b){var aLevel = getOperatorRand(a),bLevel = getOperatorRand(b);if(aLevel <= bLevel){return true;}else if(aLevel > bLevel){return false;}
}/*
*将操作符的优先级用数字具体化
*/
function getOperatorRand(operator){switch(operator){case "#":return 0;case "+":return 1;break;case "-":return 1;break;case "*":return 2;break;case "/":return 2;break;}
}

运算符的优先级比较问题也已经解决了，然后我们就可以得到逆波兰表达式了：

得到逆波兰表达式（其中text是待转换的字符串）：

function getRPN(text){var operand = [], //用于存放操作数的栈operator = [], //用于存放操作符的栈textArr = text.split(''),newTextArr = [];for(var i = 0; i < textArr.length; i++){if(!Number(text[i]) && Number(text[i]) != 0){newTextArr.push("|",text[i],"|");}else{newTextArr.push(textArr[i]);}}var calTextArr = newTextArr.join('').split("|");calTextArr.unshift("#")for(var i = 0; i < calTextArr.length; i++){//如果是数字则直接入栈if(Number(calTextArr[i]) || Number(calTextArr[i]) == 0){operand.push(calTextArr[i]);}//如果是操作符则再根据不同的情况进行操作else {switch(true){//如果operator栈顶是“（”或者遍历到的操作符是“（”则直接入栈case calTextArr[i] == "(" && operator.slice(-1)[0] == "(":operator.push(calTextArr[i]);break;/*如果遍历到的操作符是“）”则把operator中的操作符依次弹出并压入operand中直至operator栈顶操作符为“（”，然后将“（”也弹出，但不压入operand栈中*/case calTextArr[i] == ")":do{operator.push(operator.pop());}while(operator.slice(-1)[0] != "(");operator.pop();break;//如果是其他的操作符，则比较优先级后再进行操作default:var compare = compareOperator(calTextArr[i],operator.slice(-1)[0]);var a = calTextArr[i];var b = operator.slice(-1)[0]if(operator.length == 0){operator.push(calTextArr[i]);}else if(compareOperator(calTextArr[i],operator.slice(-1)[0])){do{operand.push(operator.pop());var compareResult = compareOperator(calTextArr[i],operator.slice(-1)[0]);}while(compareResult);operator.push(calTextArr[i]);}else {operator.push(calTextArr[i]);}break;}}}//遍历结束后，将operator中的元素全部压入operand中operator.forEach(function(){operand.push(operator.pop());});//把用于比较的“#”字符去掉
    operator.pop();return operand;
}

ok,逆波兰表达式我们已经搞定了，接下来就可以计算了，计算的思路一开始也讲过了，就是每遇到一个操作符就将他的前两个操作数进行运算，再将操作结果代替运算表达式，这样循环下去直到算出最终结果，不过这里我的代码显得有点多而且麻烦，本人水平有限，有更好的方法请在评论区指出。

/*
*计算并返回结果
*/
function getResult(RPNarr){var result;while(RPNarr.length > 1)RPNarr =  singleResult(RPNarr);    console.log(RPNarr)result = RPNarr[0];return result;
}/*
*每遇到一个操作符就进行一次运算然后更新数组，直到算出最终结果。
*/
function singleResult(RPNarr){for(var i = 0,max = RPNarr.length; i < max; i++){console.log(!Number(RPNarr))if(!Number(RPNarr[i])){switch(RPNarr[i]){case "+":var addResult = Number(RPNarr[i-2]) + Number(RPNarr[i-1]);RPNarr.splice(i-2,3,addResult);return RPNarr;break;case "-":var addResult = Number(RPNarr[i-2]) - Number(RPNarr[i-1]);RPNarr.splice(i-2,3,addResult);return RPNarr;break;case "*":var addResult = Number(RPNarr[i-2]) * Number(RPNarr[i-1]);RPNarr.splice(i-2,3,addResult)return RPNarr;break;case "/":var addResult = Number(RPNarr[i-2]) / Number(RPNarr[i-1]);RPNarr.splice(i-2,3,addResult)return RPNarr;break;}}}
}

至此，我们的运算过程就全部结束了。

然后就是页面的布局，布局和样式大家可以随意实现这里就简单贴下代码：

基本布局与样式：

html代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"></head><body><div id="calculator-container"><h1>Bett's Calculator</h1><div class="calculator-display"><input id="calculator-display" type="text"></div><ul class="btn-list"><li class="btn-item">1</li><li class="btn-item">2</li><li class="btn-item">3</li><li class="btn-item">+</li><li class="btn-item">4</li><li class="btn-item">5</li><li class="btn-item">6</li><li class="btn-item">-</li><li class="btn-item">7</li><li class="btn-item">8</li><li class="btn-item">9</li><li class="btn-item">*</li><li class="btn-item">.</li><li class="btn-item">0</li><li class="btn-item" id="result">=</li><li class="btn-item">/</li></ul></div><script src="calculator.js"></script></body>
</html>

css代码：

html,body,button,h1,h2,div,p,input,ul,li {margin: 0;padding: 0;
}
ul,li{list-style: none;
}h1 {text-align: center;color: #fff;margin-bottom: 20px;font-weight: normal;
}
#calculator-container {width: 300px;height: auto;margin: 100px auto 0;padding: 20px 20px;background-color: #354B69;overflow: hidden;
}
.calculator-display {width: 100%;margin-bottom: 10px;
}
#calculator-display {display: block;width: 100%;padding: 5px 10px 5px 0;text-align: right;font-size: 18px;line-height: 30px;border: none;box-sizing: border-box;
}
.btn-item {float: left;width: 24%;padding: 6% 0;margin: 0.5%;text-align: center;font-size: 18px;font-weight: bold;color: #354B69;background-color: #fff;
}

最后的效果图是长这样：

有许多功能还没有实现，比如清空，退格，括号的运算等，都还没加进去，有一些小bug可能自己也没发现，这里主要讲解一下思路，大家后面可以自己拓展，我做出完整功能后也会来更新。

基本的交互逻辑的思路：

/**

1、首先我需要将我点击的任意一个按钮（除了等号按钮外）的文本显示在input框中
2、在按下等号时将input框中的文本拿出来
3、将得到的字符串转换成数学表达式并进行计算
4、将计算结果反应在input框中
5、计算完成后若再次点击的是数字则清空显示框再进行下一次运算，如果点击的是操作符则继续进行运算
*/

那么这里首先就有一个问题，就是关于计算状态的判断，根据上面的思路我们可以有这样一个思路（input框的value值用val表示）：

a. 如果我点击的是普通按钮，那么显示框中就用val+=不断追加并更新内容，我们把这个状态称为“continue”(计算中)

b. 如果我点击的是等号按钮，那么就算出结果result，然后清空搜索框再更新结果，val = result 我们把这个状态称为“end”（计算结束）

但是因为有了第5步，我们的状态判断变得更为复杂了一些：

在按下等号之后:又会出现两种状态：
a. 如果我点击的是操作符，那么就继续进行运算，状态更新为“continue”
b. 如果我点击的是数字，那么就重新开始运算，这里我们给一个新状态“start”(“重新开始运算”)

那我们怎么去判断等号后的下一个按钮是什么呢？感觉很难判断，那我们干脆就在点击普通按钮的时候都来进行一个状态的判断，根据得到的状态来决定如何在显示框中进行显示。这里给出代码：

设置状态

首先我们设置一个全局变量“state”,默认状态为“start”

var calState = "start";

状态判断（其中参数text是点击的按钮的文本内容）

/*
*点击普通按钮时进行状态判断
*如果是“continue”状态则继续运算
*如果是“end”状态，则再根据操作的不同进行判断
*/
function setCalState(text){if(calState == 'end' && Number(text) ||(calState == 'end' && Number(text) == 0)){calState = 'start';}else if(calState == 'end' && !Number(text)){calState = 'continue';}else {calState = 'continue';}
}

根据状态的不同显示框中的显示也有不同的方式：

function setInputValue(text){var calInput = document.getElementById('calculator-display');if(calState == "end" || calState == "start"){calInput.value = text}else{calInput.value += text;}
}

利用事件冒泡原理给每一个li 绑定一个点击事件

/*
*利用事件冒泡给每一个按钮添加点击事件
*/
function btnHandleClick(callback){var btnList = document.getElementsByClassName('btn-list')[0];btnList.onclick = function(e){var btnEl = e.target || window.e.target;if(btnEl.id == 'result'){calState = 'end';var resultText = getInputValue();var RPNarr = getRPN(resultText);var totalResult = getResult(RPNarr);callback('');callback(totalResult);}else{var btnText = btnEl.innerText;setCalState(btnText);callback(btnText);}}
}btnHandleClick(setInputValue);

至此我们就用js完成了一个简单的四则混合运算的计算器,不过还有一些缺陷，比如说js在进行加减乘除时会有一些精度的问题，比如0.1+0.2 != 0.3，而是等于

0.30000000000000004，类似这样的精度问题，其实可以把getResult中每个操作符的运算抽离出来，例如加法的运算可以单独拿出来做一些处理写成function add(){} ,然后再进行一些精度的处理。

一种更加简单但不推荐的方法其实还有一种简单的方法，就是eval(text) ，输入字符串后字符串中的语句就会被自动执行，一行代码就搞定，相当方便，可是高程上并不推荐这种做法说是不太安全，万一人家输入什么乱七八糟的字符串也会被执行，另外一种 new Function(str)的方法相对安全点，但也是类似的思路而且最重要的是如果运用了这种方法的话，我们就无法自己对运算过程进行操作了，比如说上面的加法运算的精度问题，还有其他的一些问题，所以我们还是采用自己实现混合运算的方法。

非常重要的一点：上面的代码只是一个思路，有许多细节部分都没有处理，比如除数不能为0等地方的错误处理也没有。希望大家看的时候能注意下。本人是一只小白，上述部分如有错漏之处，或者说有更好的思路、方法请在评论区指出

转载于:https://www.cnblogs.com/bax-life/p/8042562.html

js实现四则混合运算计算器相关推荐

python 实现四则混合运算计算器
python 实现四则混合运算计算器这个是基于四则混合运算计算器 Calculator的修改版,新增了处理()的功能调试次数较少,应该尚有bug未发现,如果发现有Bug,欢迎大家来评论指正四则混 ...
python 四则混合运算计算器
python 四则混合运算计算器思路:(1)获取一个运算公式(四则混合) (2)对获取的公式进行处理,因为Input获取的是字符串形式,这里处理时将之转换成列表,并对其中包含的多位数进行处理.见D ...
四则混合运算c语言程序例,C++实现四则混合运算计算器
本文实例为大家分享了C++实现四则混合运算的计算器,供大家参考,具体内容如下计算器是带括号的四则运算实际上利用的是栈后进先出的原则转换思想: #define _CRT_SECURE_NO_WARN ...
c语言字符型计算器,求用c语言编程四则混合运算计算器？
#include #include #include char token[61]; /*存放表达式字符串的数组*/ int n=0; void error(void) /*报告错误函数*/ { pr ...
java完善四则计算器_java 四则混合运算计算器
public class Counter { /**用递归算法,把括号内的公式算出然后递归 * @param args */ public static void calculator (String ...
四则混合运算c语言程序例,用c语言编程四则混合运算计算器
满意答案 #include #include #include char token[61]; /*存放表达式字符串的数组*/ int n=0; void error(void) /*报告错误函数*/ ...
【数据结构】支持四则混合运算的计算器(转)
1.给出两个数,用户再指定操作符,要求计算结果,这实现起来很容易: 2.多个数,但只涉及同一优先级的操作符,做起来也很容易: 3.多个数,不同优先级的操作符,怎么办呢? 想想就头痛,不过还好前 ...
php混合运算计算器,混合运算计算器
用计算器怎样计算加减乘除混合运算第一点,有一个简单的计算器,显示屏幕比较大,而且按键比较大,比较简单,可以非常快的使用乘除混合运算. 第二点,可以将如下的一道题进行一次性运算:"(101* ...
java简单运算程序_JAVA实现简单四则混合运算
JAVA实现简单四则混合运算,说明:该计算器支持实则混合运算,如 2*(3+1 )/ 4-3 *9+ 8/ 3*4- 5,则输出:-19.333332 需要说明的事括号必须是英文的.源码如下仅供学习: ...

js实现四则混合运算计算器

一般算法：

js实现四则混合运算计算器相关推荐

最新文章

热门文章