[前端漫谈] 作一个四则计算器

时间  2019-12-05
标签 前端 漫谈 一个 四则 计算器 繁體版
原文   原文链接

0x000 概述

近期从新开始学习计算机基础方面的东西，好比计算机组成原理、网络原理、编译原理之类的东西，目前正好在学习编译原理，开始对这一块的东西感兴趣，可是理论的学习有点枯燥无味，决定换种方式，那就是先实践、遇到问题尝试解决，用实践推进理论。本来打算写个中文JS解析的，可是好像有点难，须要慢慢实现，因而就找个简单的来作，那就是解析一下四则运算，就有了这个项目，声明：这是一个很简单的项目，这是一个很简单的项目，这是一个很简单的项目。其中用到的词法分析、语法分析、自动机都是用简单的方式实现，毕竟比较菜。html

0x001 效果

  • 源码地址：github

  • 实现功能：前端

    • 任意顺序的四则+-*/正整数运算
    • 支持()
    • 前端后端通用
    • 提供直接计算函数
    • 提供四则运算表达式转逆波兰AST函数
    • 提供语法分析函数(暂时只支持上下两个字符断定)
  • 效果演示：
    2019-01-01-20-52-38

0x002 实现

既然说很简单，那无论用到的理论和实现的方式都必定要都很简单，实现这个效果一共须要克服三个问题：git

  1. 如何实现优先级计算，好比*/()的优先级大于+-。
  2. 如何分割字符串，好比如何识别数字、符号和错误字符，也就是词素化。
  3. 如何实现语法检测，也就是让表达式的规则知足要求，好比+后面好比跟随数字或者(（这里将-看成操做，而不是符号）。

0x003 解决问题1: 如何实现优先级运算

1. 暂时忽略优先级

若是没有优先级问题，那实现一个计算十分的简单，好比下面的代码能够实现一个简单的加减或者乘除计算（10之内，超过一位数会遇到问题2，这里先简单一点，避过问题2）：github

let calc = (input) => {
            let calMap = {
                '+': (num1, num2) => num1 + num2,
                '-': (num1, num2) => num1 - num2,
                '*': (num1, num2) => num1 * num2,
                '/': (num1, num2) => num1 / num2,
            }
            input = [...input].reverse()
            while (input.length >= 2) {
                let num1 = +input.pop()
                let op = input.pop()
                let num2 = +input.pop()
                input.push(calMap[op](num1, num2))
            }
            return input[0]
        }

        expect(calc('1+2+3+4+5-1')).toEqual(14)
        expect(calc('1*2*3/3')).toEqual(2)

算法步骤:算法

  • 将输入打散成一个栈，由于是10之内的，因此每一个数只有一位：后端

    input = [...input].reverse()

  • 每次取出三位，若是是正确的输入，则取出的三位，第一位是数字，第二位是操做符，第三位是数字：网络

    let num1 = +input.pop()
let op = input.pop()
let num2 = +input.pop()

  • 根据操做符作运算后将结果推回栈中，又造成了这么一个流程，一直到最后栈中只剩下一个数，或者说每次都要取出3个数，因此若是栈深度<=2，那就是最后的结果了：函数

    while (input.length >= 2) {
    // ......
    input.push(calMap[op](num1, num2))
}

动画演示：单元测试

不考虑优先级计算过程

2. 考虑优先级

可是如今须要考虑优先级，好比*/的优先级大于+-，()的运算符最高，那如何解决呢，其实都已经有解决方案了，我用的是后缀表达式，也叫逆波兰式学习

  • 后缀表达式：
    所谓的后缀表达式，就是将操做符放在表达式的最后边，好比1+1表示成11+。
  • 中缀表达式：
    所谓的中缀表达式，其实就是咱们日常使用的写法了，这里不作深刻。
  • 前缀表达式
    所谓的后缀表达式，就是将操做符放在表达式的最前边，好比1+1表示成+11，这里不作深刻

逆波兰式能够参考下列文章

3. 逆波兰式解决优先级问题

在逆波兰式子中，1+1*2能够转化为112*+
代码演示：

let calc = (input) => {
    let calMap = {
        '+': (num1, num2) => num1 + num2,
        '-': (num1, num2) => num1 - num2,
        '*': (num1, num2) => num1 * num2,
        '/': (num1, num2) => num1 / num2,
    }
    input = [...input].reverse()
    let resultStack = []
    while (input.length) {
        let token = input.pop()
        if (/[0-9]/.test(token)) {
            resultStack.push(token)
            continue
        }
        if (/[+\-*/]/.test(token)) {
            let num1 = +resultStack.pop()
            let num2 = +resultStack.pop()
            resultStack.push(calMap[token](num1, num2))
            continue
        }
    }
    return resultStack[0]
}
expect(calc('123*+')).toEqual(7)

转化以后计算步骤以下：

  1. 初始化一个栈

    let resultStack = []

  2. 每次从表达式中取出一位

    let token = input.pop()

  3. 若是是数字，则推入栈中

    if (/[0-9]/.test(token)) {
    resultStack.push(token)
    continue
}

  4. 若是是操做符，则从栈中取出两个数，作相应的运算，再将结果推入栈中

    if (/[+\-*/]/.test(token)) {
    let num1 = +resultStack.pop()
    let num2 = +resultStack.pop()
    resultStack.push(calMap[token](num1, num2))
    continue
}

  5. 若是表达式不为空，进入步骤2，若是表达式空了，栈中的数就是最后的结果，计算完成

    while (input.length) {
    // ...
}
return resultStack[0]

动画演示：

逆波兰式计算过程

转化成逆波兰式以后有两个优势：

  • 不关心运算符优先级
  • 去除括号，好比(1+2)*(3+4)，能够转化为12+34+*，按照逆波兰式运算方法便可完成运算

4. 中缀转后缀

这是问题1的最后一个小问题了，这个问题的实现过程以下：

let parse = (input) => {
            input = [...input].reverse()
            let resultStack = [], opStack = []
            while (input.length) {
                let token = input.pop()
                if (/[0-9]/.test(token)) {
                    resultStack.push(token)
                    continue
                }
                if (/[+\-*/]/.test(token)) {
                    opStack.push(token)
                    continue
                }
            }
            return [...resultStack, ...opStack.reverse()].join('')
        }

        expect(parse(`1+2-3+4-5`)).toEqual('12+3-4+5-')

准备两个栈，一个栈存放结果，一个栈存放操做符，最后将两个栈拼接起来上面的实现能够将1+2-3+4-5转化为12+3-4+5-，可是若是涉及到优先级，就无能为力了，例如

expect(parse(`1+2*3`)).toEqual('123*+')

1+2*3的转化结果应该是123*+，但其实转化的结果倒是123+*，*/的优先级高于+，因此，应该作以下修改

let parse = (input) => {
            input = [...input].reverse()
            let resultStack = [], opStack = []
            while (input.length) {
                let token = input.pop()
                if (/[0-9]/.test(token)) {
                    resultStack.push(token)
                    continue
                }
//                if (/[+\-*/]/.test(token)) {
//                    opStack.push(token)
//                    continue
//                }
                if (/[*/]/.test(token)) {
                    while (opStack.length) {
                        let preOp = opStack.pop()
                        if (/[+\-]/.test(preOp)) {
                            opStack.push(preOp)
                            opStack.push(token)
                            token = null
                            break
                        } else {
                            resultStack.push(preOp)
                            continue
                        }
                    }
                    token && opStack.push(token)
                    continue
                }
                if (/[+\-]/.test(token)) {
                    while (opStack.length) {
                        resultStack.push(opStack.pop())
                    }
                    opStack.push(token)
                    continue
                }
            }
            return [...resultStack, ...opStack.reverse()].join('')
        }

        expect(parse(`1+2`)).toEqual('12+')
        expect(parse(`1+2*3`)).toEqual('123*+')
  1. 当操做符为*/的时候，取出栈顶元素，判断栈中的元素的优先级低是否低于*/，若是是就直接将操做符推入opStack，而后退出，不然一直将栈中取出的元素推入resultStack。
if (/[+\-]/.test(preOp)) {
     opStack.push(preOp)// 这里用了栈来作判断，因此判断完还得还回去...
     opStack.push(token)
     token = null
     break
}else {
    resultStack.push(preOp)
    continue
}
  1. 还要注意栈空掉的状况，须要将操做符直接入栈。
token && opStack.push(token)
    continue
  1. 当操做符为+-的时候，由于已是最低的优先级了，因此直接将全部的操做符出栈就好了
if (/[+\-]/.test(token)) {
    while (opStack.length) {
        resultStack.push(opStack.pop())
    }
    opStack.push(token)
    continue
}

到这里已经解决了+-*/的优先级问题，只剩下()的优先级问题了，他的优先级是最高的，因此这里作以下修改便可：

if (/[+\-]/.test(token)) {
    while (opStack.length) {
        let op=opStack.pop()
        if (/\(/.test(op)){
            opStack.push(op)
            break
        }
        resultStack.push(op)
    }
    opStack.push(token)
    continue
}
if (/\(/.test(token)) {
    opStack.push(token)
    continue
}
if (/\)/.test(token)) {
    let preOp = opStack.pop()
    while (preOp !== '('&&opStack.length) {
        resultStack.push(preOp)
        preOp = opStack.pop()
    }
    continue
}
  1. 当操做符是+-的时候，再也不无脑弹出，若是是(就不弹出了
while (opStack.length) {
        let op=opStack.pop()
        if (/\(/.test(op)){
            opStack.push(op)
            break
        }
        resultStack.push(op)
    }
    opStack.push(token)
  1. 当操做符是(的时候，就推入opStack 
if (/\(/.test(token)) {
    opStack.push(token)
    continue
}
  1. 当操做符是)的时候，就持续弹出opStack到resultStack，直到遇到(，(不推入resultStack 
if (/\)/.test(token)) {
    let preOp = opStack.pop()
    while (preOp !== '('&&opStack.length) {
        resultStack.push(preOp)
        preOp = opStack.pop()
    }
    continue
}

完整代码：

let parse = (input) => {
   input = [...input].reverse()
   let resultStack = [], opStack = []
   while (input.length) {
       let token = input.pop()
       if (/[0-9]/.test(token)) {
           resultStack.push(token)
           continue
       }
       if (/[*/]/.test(token)) {
           while (opStack.length) {
               let preOp = opStack.pop()
               if (/[+\-]/.test(preOp)) {
                   opStack.push(preOp)
                   opStack.push(token)
                   token = null
                   break
               } else {
                   resultStack.push(preOp)
                   continue
               }
           }
           token && opStack.push(token)
           continue
       }
       if (/[+\-]/.test(token)) {
           while (opStack.length) {
               let op = opStack.pop()
               if (/\(/.test(op)) {
                   opStack.push(op)
                   break
               }
               resultStack.push(op)
           }
           opStack.push(token)
           continue
       }
       if (/\(/.test(token)) {
           opStack.push(token)
           continue
       }
       if (/\)/.test(token)) {
           let preOp = opStack.pop()
           while (preOp !== '(' && opStack.length) {
               resultStack.push(preOp)
               preOp = opStack.pop()
           }
           continue
       }
   }
   return [...resultStack, ...opStack.reverse()].join('')

动画示例：
中缀转后缀
如此，就完成了中缀转后缀了，那么整个问题1就已经被解决了，经过calc(parse(input))就能完成中缀=>后缀=>计算的整个流程了。

0x004 解决问题2:分割字符串

虽然上面已经解决了中缀=>后缀=>计算的大问题，可是最基础的问题还没解决，那就是输入问题，在上面问题1的解决过程当中，输入不过是简单的切割，并且还局限在10之内。而接下来，要解决的就是这个输入的问题，如何分割输入，达到要求？

  • 解决方式1：正则，虽然正则能够作到以下，作个简单的demo仍是能够的，可是对于以后的语法检测之类的东西不太有利，因此不太好，我放弃了这种方法

    (1+22)*(333+4444)`.match(/([0-9]+)|([+\-*/])|(\()|(\))/g)
// 输出
// (11) ["(", "1", "+", "22", ")", "*", "(", "333", "+", "4444", ")"]

  • 解决方法2：逐个字符分析，其大概的流程是

    while(input.length){
    let token = input.pop()
    if(/[0-9]/.test(token)) // 进入数字分析
    if(/[+\-*/\(\)]/.test(token))// 进入符号分析
}

接下来试用解决方案2来解决这个问题：

1 定义节点结构

当咱们分割的时候，并不单纯保存值，而是将每一个节点保存成一个类似的结构，这个结构可使用对象表示：

{
    type:'',
    value:''
}

其中，type是节点类型，能够将四则运算中全部可能出现的类型概括出来，个人概括以下：

TYPE_NUMBER: 'TYPE_NUMBER', // 数字
    TYPE_LEFT_BRACKET: 'TYPE_LEFT_BRACKET', // (
    TYPE_RIGHT_BRACKET: 'TYPE_RIGHT_BRACKET', // )
    TYPE_OPERATION_ADD: 'TYPE_OPERATION_ADD', // +
    TYPE_OPERATION_SUB: 'TYPE_OPERATION_SUB', // -
    TYPE_OPERATION_MUL: 'TYPE_OPERATION_MUL', // *
    TYPE_OPERATION_DIV: 'TYPE_OPERATION_DIV', // /

value则是对应的真实值，好比123、+、-、*、/。

2 数字处理

若是是数字，则继续往下读，直到不是数字为止，将这过程中全部的读取结果放到value中，最后入队。

if (token.match(/[0-9]/)) {
    let next = tokens.pop()
    while (next !== undefined) {
        if (!next.match(/[0-9]/)) break
        token += next
        next = tokens.pop()
    }
    result.push({
        type: type.TYPE_NUMBER,
        value: +token
    })
    token = next
}

3 符号处理

先定义一个符号和类型对照表，若是不在表中，说明是异常输入，抛出异常，若是取到了，说明是正常输入，入队便可。

const opMap = {
    '(': type.TYPE_LEFT_BRACKET,
    ')': type.TYPE_RIGHT_BRACKET,
    '+': type.TYPE_OPERATION_ADD,
    '-': type.TYPE_OPERATION_SUB,
    '*': type.TYPE_OPERATION_MUL,
    '/': type.TYPE_OPERATION_DIV
}
let type = opMap[token]
if (!type) throw `error input: ${token}`
result.push({
    type,
    value: token,
})

4 总结

这样就完成了输入的处理，这时候，其余的函数也须要处理一下，应为输入已经从字符串变成了tokenize以后的序列了，修改完成以后就是能够calc(parse(tokenize()))完成一整套骚操做了。

0x005 解决问题3：语法检测

语法检测要解决的问题其实就是判断输入的正确性，是否知足四则运算的规则，这里用了相似状机的思想，不过简单到爆炸，而且只能作单步断定～～
定义一个语法表，该表定义了一个节点后面能够出现的节点类型，好比，+后面只能出现数字或者(之类。

let syntax = {
    [type.TYPE_NUMBER]: [
        type.TYPE_OPERATION_ADD,
        type.TYPE_OPERATION_SUB,
        type.TYPE_OPERATION_MUL,
        type.TYPE_OPERATION_DIV,
        type.TYPE_RIGHT_BRACKET
    ],
    [type.TYPE_OPERATION_ADD]: [
        type.TYPE_NUMBER,
        type.TYPE_LEFT_BRACKET
    ],
    [type.TYPE_OPERATION_SUB]: [
        type.TYPE_NUMBER,
        type.TYPE_LEFT_BRACKET
    ],
    [type.TYPE_OPERATION_MUL]: [
        type.TYPE_NUMBER,
        type.TYPE_LEFT_BRACKET
    ],
    [type.TYPE_OPERATION_DIV]: [
        type.TYPE_NUMBER,
        type.TYPE_LEFT_BRACKET
    ],
    [type.TYPE_LEFT_BRACKET]: [
        type.TYPE_NUMBER,
        type.TYPE_LEFT_BRACKET
    ],
    [type.TYPE_RIGHT_BRACKET]: [
        type.TYPE_OPERATION_ADD,
        type.TYPE_OPERATION_SUB,
        type.TYPE_OPERATION_MUL,
        type.TYPE_OPERATION_DIV,
        type.TYPE_RIGHT_BRACKET
    ]
}

这样咱们就能够简单的使用下面的语法断定方法了：

while (tokens.length) {
    // ...
    let next = tokens.pop()
    if (!syntax[token.type].includes(next.type)) throw `syntax error: ${token.value} -> ${next.value}`
    // ...
 }

对于()，这里使用的是引用计数，若是是(，则计数+1，若是是)，则计数-1，检测到最后的时候断定一下计数就行了：

// ...
    if (token.type === type.TYPE_LEFT_BRACKET) {
        bracketCount++
    }
    // ...
    if (next.type === type.TYPE_RIGHT_BRACKET) {
        bracketCount--
    }
    // ...
    if (bracketCount < 0) {
        throw `syntax error: toooooo much ) -> )`
    }
    // ...

0x006 总结

  • 该文章存在一些问题：

    1. 我推导不出为啥要用逆波兰式，只是知道有这么一个解决方案，拿过来用而已，而不是由问题推导出解决方案。
    2. 文字功底不够，讲的不够 cool。

  • 该实现也存在一些问题：

    1. 并不是彻底用编译原理的思想去实现，而是本身摸解决方案，先实践，后了解问题。
    2. 并无参考太多别人的实现，有点闭门造车的感受。

  • 思考：

    1. 对于()的处理或许可使用递归的方式，进入()以后从新开始一个新的表达式解析
    2. 思考不够全，单元测试覆盖不够，许多坑还不知道在哪儿

总之：文章到此为止，有不少不够详细的地方还请见谅，多多交流，共同成长。

0x007 资源

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程