重学前端
程劭非(winter)
前手机淘宝前端负责人
104095 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

(小实验)理解编译原理:一个四则运算的解释器

你好,我是 winter。
在前面的课程中,我在 JavaScript 和 CSS 的部分,多次提到了编译原理相关的知识。这一部分的知识,如果我们从编译原理“龙书”等正规的资料中学习,就会耗费掉不少的时间,所以我在这里设计了一个小实验,帮助你快速理解编译原理相关的知识。
今天的内容比较特殊,我们来做一段详细的代码实验,详细的代码我放在了文章里,如果你正在收听音频,可以点击文章查看详情。

分析

按照编译原理相关的知识,我们来设计一下工作,这里我们分成几个步骤。
定义四则运算:产出四则运算的词法定义和语法定义。
词法分析:把输入的字符串流变成 token。
语法分析:把 token 变成抽象语法树 AST。
解释执行:后序遍历 AST,执行得出结果。

定义四则运算

四则运算就是加减乘除四种运算,例如:
1 + 2 * 3
首先我们来定义词法,四则运算里面只有数字和运算符,所以定义很简单,但是我们还要注意空格和换行符,所以词法定义大概是下面这样的。
Token
Number: 1 2 3 4 5 6 7 8 9 0 的组合
Operator: +-*/ 之一
Whitespace: <sp>
LineTerminator:<LF> <CR>
这里我们对空白和换行符没有任何的处理,所以词法分析阶段会直接丢弃。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(25)

  • 最新
  • 精选
  • Rango
    这边把中缀表达式解析成后缀表达式会不会更容易理解一点?

    作者回复: 怎么解析呢 难道不是跟语法分析一样?

    4
  • 阿成
    * 以前我只大概了解一般的做法是消除文法中的左递归,这一课让我知道原来还可以通过“层层展开”去处理。 * 词法分析我尝试了正则的方式 * 括号的处理费了些时间,这里我是修改了文法(感觉我的 Expression 产生式[在源码注释里]怪怪的,希望 winter 老师有时间的话可以指点一下),另一种做法是,先把中缀表达式变成前缀表达式 * 学习一些编译原理的知识还是很有必要也很有趣的,可以去写一些webpack的loader啊,插件啊,vscode的插件等等 https://github.com/aimergenge/arithmetic-executor
    29
  • 北天魔狼
    感觉每一篇都需要看三遍,才能看懂一点写的是啥。后端入行,大前端,全栈,架构师。路还很长,楼上的:日拱一卒,共勉
    3
    17
  • Bojack
    实现了小数与负数的编译器 https://gist.github.com/OPY-bbt/8ee387122550326f60592b94b7908d19
    7
  • 翰弟
    日拱一卒
    7
  • 缺个豆饼吗
    之前写了一个JS的编译器的词法和语法分析。可以处理变量声明,加减乘除运算及赋值运算。 https://github.com/yuguomin/my-compiler
    5
  • 一条不会挣扎的咸鱼🐟
    想问下老师有没有推荐的国外论坛|YouTube作者|个人博客
    5
  • chang.xu
    标记,需要基础再回来
    4
  • Glee
    日拱一卒
    3
  • 爱的神
    大三正在学习编译原理,目前仅能看懂词法分析那些,后面还不能看懂。补全了emmitToken函数。 var tokens = [] emmitToken(type,value){ tokens.push({ type : type, value: value }) } 不知道对不对🤔
    1
    3
收起评论
显示
设置
留言
25
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部