前言

最近产品经理又又加了一个需求，想在开单页面加一个计算器，用户就可以在录单时可以使用计算器了。需求内容就一句话：支持加减乘除四则运算，点击计算器图标，当前页面弹出计算器弹窗。我一问，答案就是：你参考别人家的计算器做就行。

我的思路：记录用户每次按下的按键，然后拼接成一个运算表达式，然后再解析运算表达式不久okk了！！

解析运算表达式

按照产品的要求，解析运算表达式需要有这些功能：

  • 运算表达式需要支持 +，-，*，/ 四则运算，并且按照运算顺序，先乘除，后加减
  • 需要支持小数位数的计算，需要解决js计算的精度问题

    思路与难点：

  1. 如何收集数字
    1. 声明一个栈（数组），用于存储数字
    2. 遍历字符串，如果是点或数字，就拼接起来，如果是运算符号，就将数字推入到栈中
  2. 解决运算顺序，先乘除后加减
    1. 遍历字符串时，如果预存符号是加，就直接将数字推入栈，如果是减，就乘 -1再推入到栈，如果是乘除，就先计算栈顶元素与当前数字的结果，再将结果推入到栈顶
    2. 最后将栈中的数字相加，就是运算结果了
  3. 遍历到符号的时候，怎么将后面的数字收集起来推入到栈中
    1. 先预先存一个+的符号，不判断当前的符号，而是判断预存的符号，这样就可以将第一个数字推入栈中
    2. 然后再将预存符号赋值为当前的符号。

  4. 解决js精度问题，可以采用外部库，或参考之前封装的代码：

    举例：

  5. 假设有运算表达式：3.1 - 2 + 3 * 4 - 4 / 2

  6. 先乘除后加减，加入到栈中，栈：[ 3.1, -2, 12, -2 ]
  7. 再将栈中的元素相加：3.1 - 2 + 12 - 2 = 11.1

    实现代码：

    1. function parseExpression(s) {
    2. s = s.replace(/\s/g, '') + 'e' // 去除所有空格，末尾加上一个结束符号,确保最后一个数加入到栈中
    3. let stack = []
    4. let preSign = '+' // 初始置为+，目的：让第一个数字入栈
    5. let curNum = 0 // 当前数字
    6. let reg = /[0-9]|\./
    7. for (let i = 0; i < s.length; i++) {
    8.  if (reg.test(s[i])) {
    9.    // 当前字符为数字或点，拼接数字
    10.    curNum = curNum + s[i]
    11.  } else {
    12.    // 当前字符是操作符，则判断运算上一符号
    13.    if (preSign === '+') {
    14.      stack.push(curNum)
    15.    } else if (preSign === '-') {
    16.      let last = stack[stack.length - 1]
    17.      if (last === 0 && 1 / last < 0) {
    18.        // 判断上一个数字是不是 -0，解决类似：2--7这种问题
    19.        stack.push(curNum)
    20.      } else {
    21.        stack.push(-1 * curNum)
    22.      }
    23.    } else if (['+', '-'].includes(s[i]) && !curNum) {
    24.      // 对数字的正负号做特殊处理 比如：2*-2
    25.      if (['+', '-'].includes(curNum)) return 0 // 2*--2 有两个减号，直接返回 0
    26.      curNum = s[i]
    27.      continue
    28.    } else if (preSign === '*') {
    29.      stack.push(calc(stack.pop(), preSign, curNum)) // calc方法是用于解决js计算精度的方法，可参考我的另外一篇文章
    30.    } else if (preSign === '/') {
    31.      stack.push(calc(stack.pop(), preSign, curNum))
    32.    } else {
    33.      return 0 // 既不是数字也不是符号也不是点，直接返回0
    34.    }
    35.    curNum = 0 // 运算后将curNum置为0
    36.    preSign = s[i] // 记录当前符号
    37.  }
    38. }
    39. let sum = stack.reduce((pre, num) => calc(pre, '+', num), 0) // 计算栈的和
    40. if (isNaN(sum) || !isFinite(sum)) sum = 0 // 如果结果是NaN,或者无穷，就置为0
    41. return sum
    42. }
    43. // 测试
    44. console.log(parseExpression('3.1 - 2 + 3 * 4 - 4 / 2'))   // 11.1

    科学计算器

    完成了解析表达式的步骤，就可以做一个简易科学计算器

在完成科学计算器的时候，产品增加了两个要求：

  1. 需要根据鼠标点击的位置不同，在不同位置显示计算器
  2. 要与键盘上的数字与运算键绑定，用键盘也能使用计算器

    两个要求不难办，就不细讲，可以直接看代码

思路：

  1. 页面上需要显示两行，一行是表达式，一行显示当前数字。
    1. data中用两个数据表示

  2. 每次按下运算符号后，当前的数字都要重置

    1. data中使用一个数据记录是否需要重置当前数字

      异常处理：

  3. 连续点击运算符号，需要将最后一次的运算符号覆盖

  4. 一个数字中不能出现多个小数点

  5. 按下等号后继续输入，需要将之前的数据清空

    实现后效果：

    calc.gif

    实现代码：

    ```html

  1. > 产品看后，沉思了片刻，说：和我电脑上的计算器不一样啊，点运算符号都会把上一次的结果算出来，这种：
  2. > ![image.png](https://cdn.nlark.com/yuque/0/2022/png/2628706/1656398531884-a55476f2-3ac0-4637-b4f6-e8017ade725d.png#clientId=ud9e1aab7-e853-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=337&id=u1c663812&margin=%5Bobject%20Object%5D&name=image.png&originHeight=532&originWidth=320&originalType=binary&ratio=1&rotation=0&showTitle=false&size=82867&status=done&style=none&taskId=uc306505c-db1a-4fd3-8840-8fdf7671d49&title=&width=202.55557250976562)
  3. > 我：你这是标准计算器，你点一点左上角，选择科学，就一样了
  4. > 产品：我就要这种标准计算器
  5. > 我：？？？？
  7. <a name="TBY0e"></a>
  8. ## 标准计算器
  9. > 既然产品都发话了，那就做吧，把科学计算器改一改，就是一个标准计算器了
  10. > 重点就是改一改按下字符如果是运算符号时，先将之前按下的数据算出来
  12. <a name="t2QIr"></a>
  13. ### 实现后的效果：
  14. ![calcBB.gif](https://cdn.nlark.com/yuque/0/2022/gif/2628706/1656400523964-bd696643-dc9d-40e0-a40b-e4b15178a01b.gif#clientId=u026a52ab-15a1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u365bc872&margin=%5Bobject%20Object%5D&name=calcBB.gif&originHeight=305&originWidth=252&originalType=binary&ratio=1&rotation=0&showTitle=false&size=106174&status=done&style=none&taskId=u9f5ca426-fb73-421b-8873-ac5e539c245&title=)
  15. <a name="XszBR"></a>
  16. ### 实现代码：
  17. ```html
  18. <template>
  19.   <div>
  20.     <!-- 遮罩层，点击遮罩层隐藏计算器 -->
  21.     <div class="mask" @click="$emit('hideCalc')"></div>
  22.     <div :style="{ top: top + 'px', left: left + 'px' }" class="calculator">
  23.       <div class="showPanel">
  24.         <span class="exp">{{ exp }}</span>
  25.         <span class="number">{{ number }}</span>
  26.       </div>
  27.       <div class="caculator-button">
  28.         <el-button @click="getResult('c')">c</el-button>
  29.         <el-button @click="getResult('/')">/</el-button>
  30.         <el-button @click="getResult('*')">*</el-button>
  31.         <el-button @click="getResult('del')" icon="delete"> </el-button>
  33.         <el-button @click="getResult('7')">7</el-button>
  34.         <el-button @click="getResult('8')">8</el-button>
  35.         <el-button @click="getResult('9')">9</el-button>
  36.         <el-button @click="getResult('-')">-</el-button>
  38.         <el-button @click="getResult('4')">4</el-button>
  39.         <el-button @click="getResult('5')">5</el-button>
  40.         <el-button @click="getResult('6')">6</el-button>
  42.         <el-button @click="getResult('+')">+</el-button>
  44.         <el-button @click="getResult('1')">1</el-button>
  45.         <el-button @click="getResult('2')">2</el-button>
  46.         <el-button @click="getResult('3')">3</el-button>
  47.         <el-button @click="getResult('=')" type="primary" class="equal">=</el-button>
  49.         <el-button @click="getResult('+/-')">+/-</el-button>
  50.         <el-button @click="getResult('0')">0</el-button>
  51.         <el-button @click="getResult('.')">.</el-button>
  52.       </div>
  53.     </div>
  54.   </div>
  55. </template>
  57. <script>
  58. import parseExpression from '@/utils/parseExpression'
  59. export default {
  60.   name: 'Calculator',
  61.   props: {
  62.     calcTop: {
  63.       // calcTop，calcLeft计算器的位置
  64.       type: Number,
  65.       default: 100
  66.     },
  67.     calcLeft: {
  68.       type: Number,
  69.       default: 100
  70.     }
  71.   },
  72.   data() {
  73.     return {
  74.       number: '0', // 当前显示在输入框的数值，这里要注意number时刻是个字符串格式，否则indexOf方法会报错
  75.       exp: '', // 用于计算和显示的表达式
  76.       rewrite: false // 是否要清空输入框重写，比如按下5后，再按+，下次再按一个数字是，就需要清空输入框重写
  77.     }
  78.   },
  79.   computed: {
  80.     top() {
  81.       // 计算器定位，距离边距的处理
  82.       if (document.documentElement.clientHeight - this.calcTop < 270) {
  83.         return this.calcTop - 300
  84.       } else {
  85.         return this.calcTop
  86.       }
  87.     },
  88.     left() {
  89.       // 计算器定位
  90.       return this.calcLeft < 0 ? 30 : this.calcLeft
  91.     },
  92.     // 键盘按键与事件之间的对应关系
  93.     keyMap() {
  94.       return new Map([
  95.         ['0', this.getResult.bind(this, '0')],
  96.         ['1', this.getResult.bind(this, '1')],
  97.         ['2', this.getResult.bind(this, '2')],
  98.         ['3', this.getResult.bind(this, '3')],
  99.         ['4', this.getResult.bind(this, '4')],
  100.         ['5', this.getResult.bind(this, '5')],
  101.         ['6', this.getResult.bind(this, '6')],
  102.         ['7', this.getResult.bind(this, '7')],
  103.         ['8', this.getResult.bind(this, '8')],
  104.         ['9', this.getResult.bind(this, '9')],
  105.         ['Backspace', this.getResult.bind(this, 'del')],
  106.         ['/', this.getResult.bind(this, '/')],
  107.         ['*', this.getResult.bind(this, '*')],
  108.         ['+', this.getResult.bind(this, '+')],
  109.         ['-', this.getResult.bind(this, '-')],
  110.         ['.', this.getResult.bind(this, '.')],
  111.         ['c', this.getResult.bind(this, 'c')],
  112.         ['Enter', this.getResult.bind(this, '=')]
  113.       ])
  114.     }
  115.   },
  116.   mounted() {
  117.     document.addEventListener('keyup', this.keyEvent)
  118.   },
  119.   destroyed() {
  120.     document.removeEventListener('keyup', this.keyEvent)
  121.   },
  122.   methods: {
  123.     getResult(e) {
  124.       // 如果之前按下了等号
  125.       if (this.isInit) {
  126.         this.isInit = false
  127.         Object.assign(this.$data, this.$options.data())
  128.       }
  129.       // 不可以连续点击多个小数点
  130.       if (this.number.indexOf('.') != -1 && e === '.') return
  131.       if (/[0-9]|\./.test(e)) {
  132.         // 如果是小数点或者数字，更改this.number的值
  133.         if (this.rewrite) {
  134.           this.number = e
  135.           this.rewrite = false
  136.         } else {
  137.           if (this.number === '0' && e !== '.') {
  138.             this.number = e
  139.           } else {
  140.             // 可以输入：0.5
  141.             this.number += e
  142.           }
  143.         }
  144.       } else if (['+', '-', '*', '/'].includes(e)) {
  145.         // 上一次点击的按键也是运算符号，则需要覆盖最后一个运算符号
  146.         let last = this.exp.charAt(this.exp.length - 1)
  147.         if (this.rewrite && ['+', '-', '*', '/'].includes(last)) {
  148.           this.exp = this.exp.slice(0, this.exp.length - 1) + e
  149.         } else {
  150.           this.rewrite = true   // 下次输入数字时需要重置this.number
  151.           this.exp += this.number
  152.           // 每次按下运算符都需要将上次的结果算出来给输入框
  153.           this.number = parseExpression(this.exp).toString()
  154.           this.exp = this.number + e
  155.         }
  156.       } else if (e === 'del') {
  157.         if (this.number === '0') return
  158.         if (this.rewrite) return // 刚刚点完符号，不可以删除
  159.         this.number = this.number.slice(0, this.number.length - 1)
  160.         if (this.number === '') this.number = '0'
  161.       } else if (e === '+/-') {
  162.         // 取反，并给表达式最后一项乘-1,注：-1需要在最后一项前面乘
  163.         this.number = (-1 * this.number).toString()
  164.       } else if (e === '=') {
  165.         this.exp += this.number
  166.         // 算出结果
  167.         this.number = parseExpression(this.exp).toString()
  168.         this.exp += e
  169.         this.isInit = true // 下次点击按键时，重置数据
  170.         this.$emit('getCalcResult', this.number)
  171.       } else if (e === 'c') {
  172.         Object.assign(this.$data, this.$options.data())
  173.       }
  174.     },
  175.     /**
  176.      * @description  监听键盘事件
  177.      */
  178.     keyEvent(e) {
  179.       this.keyMap.get(e.key) && this.keyMap.get(e.key)()
  180.     }
  181.   }
  182. }
  183. </script>
  184. <style lang="scss" scoped>
  185. .mask {
  186.   position: absolute;
  187.   z-index: 80;
  188.   top: 0;
  189.   left: 0;
  190.   width: 100vw;
  191.   height: 100vh;
  192. }
  193. .calculator {
  194.   position: fixed;
  195.   z-index: 99;
  196.   border: solid 1px #dcdfe6;
  197.   padding: 5px;
  198.   background-color: #fffffff1;
  199.   border-radius: 4px;
  200.   box-shadow: 0 0 2px #dcdfe6;
  202.   .showPanel {
  203.     display: flex;
  204.     flex-direction: column;
  205.     align-items: flex-end;
  206.     padding: 2px 20px;
  207.     height: 42px;
  208.     border: 1px #f0f0f0 solid;
  209.     width: 203px;
  210.     border-radius: 4px;
  211.     box-sizing: border-box;
  212.     margin-bottom: 3px;
  213.     justify-content: space-evenly;
  214.     .exp {
  215.       color: #aaa;
  216.       font-size: 10px;
  217.       height: 12px;
  218.     }
  219.     .number {
  220.       font-size: 16px;
  221.       font-weight: 900;
  222.     }
  223.   }
  224.   // 删除的icon图标
  225.   ::v-deep.delete {
  226.     display: inline-block;
  227.     width: 20px;
  228.     height: 12px;
  229.     background: url('../../icon/calcDetele.png') no-repeat center center;
  230.     background-size: 90% 90%;
  231.   }
  232. }
  233. .el-button {
  234.   margin: 0 !important;
  235.   padding: 10px;
  236.   font-weight: 600;
  237.   width: 100%;
  238. }
  239. .caculator-button {
  240.   margin: 0 auto;
  241.   width: 190px;
  242.   display: grid;
  243.   border: solid 1px #eee;
  244.   padding: 6px;
  245.   grid-template-columns: 1fr 1fr 1fr 1fr;
  246.   gap: 3px;
  247.   border-radius: 4px;
  248.   background-color: #fffffff1;
  249. }
  250. #result {
  251.   margin-bottom: 6px;
  252. }
  253. .equal {
  254.   grid-column: 4/5;
  255.   grid-row: 4/6;
  256. }
  257. </style>

这下产品经理没话说了吧？