（小实验）理解编译原理：一个四则运算的解释器
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。
在前面的课程中，我在 JavaScript 和 CSS 的部分，多次提到了编译原理相关的知识。这一部分的知识，如果我们从编译原理“龙书”等正规的资料中学习，就会耗费掉不少的时间，所以我在这里设计了一个小实验，帮助你快速理解编译原理相关的知识。
今天的内容比较特殊，我们来做一段详细的代码实验，详细的代码我放在了文章里，如果你正在收听音频，可以点击文章查看详情。
分析
按照编译原理相关的知识，我们来设计一下工作，这里我们分成几个步骤。
定义四则运算：产出四则运算的词法定义和语法定义。
词法分析：把输入的字符串流变成 token。
语法分析：把 token 变成抽象语法树 AST。
解释执行：后序遍历 AST，执行得出结果。
定义四则运算
四则运算就是加减乘除四种运算，例如：
首先我们来定义词法，四则运算里面只有数字和运算符，所以定义很简单，但是我们还要注意空格和换行符，所以词法定义大概是下面这样的。
Token
Number: 1 2 3 4 5 6 7 8 9 0 的组合
Operator: + 、-、 *、 / 之一
Whitespace: <sp>
LineTerminator：<LF> <CR>
这里我们对空白和换行符没有任何的处理，所以词法分析阶段会直接丢弃。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
这篇文章通过一个小实验向读者展示了编译原理的基本知识。作者设计了一个简单的四则运算解释器，通过词法分析、语法分析和解释执行的过程，帮助读者更直观地理解相关知识。文章首先定义了四则运算的词法和语法，然后使用状态机进行词法分析，将字符流转换为token流。接着，作者使用LL语法分析根据每一个产生式编写相应的函数，对token进行语法分析，最终得到抽象语法树（AST）。最后，作者介绍了解释执行阶段，通过对AST进行遍历执行，得出最终结果。通过实际代码演示，读者可以更快速地理解编译原理相关的知识。文章还提出了一些挑战，如补全emmitToken、为四则运算加入小数、引入负数和添加括号功能，以帮助读者进一步巩固所学知识。整体而言，这篇文章以实际案例为基础，生动地展现了编译原理中的关键概念和过程，对于想要快速了解编译原理的读者来说，是一篇值得阅读的文章。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(26)
- 最新
- 精选
Rango这边把中缀表达式解析成后缀表达式会不会更容易理解一点？作者回复: 怎么解析呢 难道不是跟语法分析一样？
2019-06-184
阿成* 以前我只大概了解一般的做法是消除文法中的左递归，这一课让我知道原来还可以通过“层层展开”去处理。 * 词法分析我尝试了正则的方式 * 括号的处理费了些时间，这里我是修改了文法（感觉我的 Expression 产生式[在源码注释里]怪怪的，希望 winter 老师有时间的话可以指点一下），另一种做法是，先把中缀表达式变成前缀表达式 * 学习一些编译原理的知识还是很有必要也很有趣的，可以去写一些webpack的loader啊，插件啊，vscode的插件等等 https://github.com/aimergenge/arithmetic-executor2019-03-2629
北天魔狼感觉每一篇都需要看三遍，才能看懂一点写的是啥。后端入行，大前端，全栈，架构师。路还很长，楼上的：日拱一卒，共勉2019-07-09317- Bojack实现了小数与负数的编译器 https://gist.github.com/OPY-bbt/8ee387122550326f60592b94b7908d192019-03-247
- 翰弟日拱一卒2019-03-227
缺个豆饼吗之前写了一个JS的编译器的词法和语法分析。可以处理变量声明，加减乘除运算及赋值运算。 https://github.com/yuguomin/my-compiler2019-12-075
chang.xu标记，需要基础再回来2019-08-145
一条不会挣扎的咸鱼🐟想问下老师有没有推荐的国外论坛|YouTube作者|个人博客2019-03-215
Glee日拱一卒2019-10-143
爱的神大三正在学习编译原理，目前仅能看懂词法分析那些，后面还不能看懂。补全了emmitToken函数。 var tokens = [] emmitToken(type，value){ tokens.push({ type : type， value: value }) } 不知道对不对🤔2019-03-2713
收起评论