开场白你见过会长树的句子吗小朋友、大朋友们你们好呀今天姐姐要给你们看一个特别神奇的东西——一棵会从句子里长出来的树等等句子怎么会长出树呢句子又不是种子别急别急听姐姐慢慢说。我们先看一道简单的算术题3 5 × 2请你算一算这道题等于多少呀如果你回答 16那就答对啦因为要先乘除后加减所以先算 5×210再算 31013……咦姐姐怎么算出 13 了让我再想想……哦对5×21031013你看这道题虽然简单但里面藏着一个秘密——计算是有顺序的要先算乘法再算加法。那么问题来了电脑是怎么知道这个顺序的呢它怎么知道要先算 5×2而不是先算 35 呢答案就是——电脑会把这道题画成一棵神奇的树这棵树就是今天的主角——语法树准备好了吗我们一起去看看这棵神奇的树是怎么长出来的第一站先认识一棵倒过来的树在看语法树之前我们先来认识树这个东西。你想象一下一棵真正的大树长什么样 树叶、树枝在上面 | | 树干在中间 /|\ 根根根 树根在下面扎进土里真正的树是根在下面树叶在上面对不对但是电脑里的树很调皮它喜欢倒过来长电脑里的树是这样的根 根在最上面 / \ 枝 枝 / \ \ 叶 叶 叶 叶子在最下面是不是很神奇电脑里的树根在最上面叶子在最下面像一棵倒过来的大树又像一个金字塔打个比方电脑里的树就像一个家族的族谱‍‍‍。你看族谱最上面是爷爷根爷爷下面是爸爸和叔叔树枝爸爸下面是你和弟弟树叶。越往上辈分越高越往下辈分越小。电脑的树就是这样画的我们先认识树的几个部分记住这几个名字后面要用 根最顶上的那个整棵树的开头 树枝中间的部分下面还会分叉 叶子最末端的下面不再分叉了好啦认识了倒过来的树我们就可以去看真正的语法树啦第二站什么是语法树我们先给语法树下一个简单的定义语法树就是把一段代码或者一个算式、一个句子按照它的结构画成的一棵树。这棵树能清清楚楚地告诉我们哪一部分先算、哪一部分后算谁和谁是一组的。听起来还是有点抽象没关系我们直接来看那道算术题3 5 × 2画成的语法树长什么样 ← 根最后做的加法 / \ 3 × ← 树枝要先做的乘法 / \ 5 2 ← 叶子最小的数字哇真的长出一棵树啦我们来仔细看看这棵树告诉了我们什么最上面是加号它在树根的位置表示加法是最后才做的。的下面左边是3右边是×乘号表示加法的两个伙伴一个是 3一个是5×2的结果。×的下面是5和2表示乘法要先把 5 和 2 乘起来。你发现了吗这棵树自动地告诉了我们计算的顺序最下面的5和2先抱在一起被×乘起来得到 10。然后3和这个 10 抱在一起被加起来得到 13。先算下面的再算上面的一层一层往上算最后算到树根就得到答案啦打个比方语法树就像搭叠叠乐积木。要先放好下面的积木先算 5×2上面的积木才能放上去再算 310。下面是基础上面靠下面撑着。所以电脑总是从最下面的叶子开始算一层层往上算到树根。第三站亲手画一棵语法树光看不练假把式现在姐姐带你亲手把一个算式画成语法树。我们的算式是( 2 3 ) × 4注意哦这次有括号括号的意思是先算我。所以要先算 23再乘 4。我们一步一步来画这棵树第 1 步找出最后才做的运算我们想一想这个算式里最后才做的是哪个运算因为括号里的 23 要先算算完得 5最后才用这个 5 去乘4。所以最后做的是乘法×最后做的运算就放在树根最上面× ← 树根最后做的乘法第 2 步把乘号的两个伙伴接上乘号×是把两样东西乘起来。是哪两样呢左边的伙伴(2 3)这一整块右边的伙伴4我们把它们接到乘号下面× / \ (23) 4右边的4已经是最小的数字了它就是一片叶子不用再分了。但左边的(23)还可以继续分第 3 步把括号里的加法继续画下去(2 3)里面是一个加法。加号把 2 和 3 加起来。我们继续往下画× / \ 4 / \ 2 3大功告成现在2、3、4都是最小的数字了下面不能再分了它们都是叶子。这棵树画完啦我们来看看这棵树告诉我们的计算顺序× ③ 最后5 × 4 20 / \ 4 / \ 2 3 ① 最先2 3 5第①步先看最下面2和3被加起来得到 5。第②步往上走这个 5 和4被×乘起来得到 20。完成算到树根答案是20你看这棵树清清楚楚地告诉了我们先算 23再乘 4。这正是括号要求的顺序神奇吧我们没有写一个字的先算这个、再算那个但是这棵树的形状自己就把顺序说清楚了这就是语法树最厉害的地方——用树的形状表达出代码的结构和顺序。第四站为什么要把代码画成树你可能会问“直接算不就行了吗为什么非要画成树这么麻烦呢”这是一个超级好的问题姐姐告诉你画成树有三个大大的好处好处一让顺序一目了然 我们写算式的时候是一行写出来的3 5 × 2。光看这一行电脑得想半天才知道先算哪个。但是画成树以后谁先算、谁后算看一眼树的形状就清楚了下面的先算上面的后算简单明了打个比方这就像把一团乱糟糟的毛线整理成一个漂亮的、有条理的图案 。乱毛线一行的算式看不出头绪整理成图案树以后一切都清清楚楚好处二让电脑容易读懂 电脑其实有点笨它喜欢简单清楚的东西。一行混在一起的算式电脑读起来费劲。但是树形结构电脑读起来特别轻松——它只要从下往上、从叶子到树根一层一层地处理就行了绝不会搞错顺序好处三让复杂的代码也能管得井井有条 我们刚才的例子很简单。但真正的程序可能有成千上万行代码复杂得不得了如果不整理简直一团乱麻。但是无论代码多复杂都可以画成一棵语法树。大树枝下面分小树枝小树枝下面再分小小树枝……再复杂的代码也能被这棵树管理得井井有条、清清楚楚打个比方这就像整理你的玩具箱。如果玩具乱七八糟堆在一起找一个玩具要翻半天。但如果你把玩具分类整理好——积木放一格小车放一格娃娃放一格——找起来就特别方便语法树就是帮电脑整理代码的好办法第五站句子也能画成语法树刚才我们画的都是算式。其实呀普通的句子也能画成语法树哦还记得我们上次冒险学的小猫吃鱼吗我们来把这个句子画成语法树句子 / | \ 主语 动词 宾语 | | | 小猫 吃 鱼我们看看这棵树告诉我们什么最上面是句子表示这是一个完整的句子树根。句子分成三部分主语、动词、宾语树枝。再往下主语是小猫动词是吃宾语是鱼叶子。这棵树清清楚楚地告诉我们这个句子的结构是谁 做什么 对什么。小猫是那个谁吃是那个做什么鱼是那个对什么。你看无论是算式还是句子只要有结构就能画成一棵语法树语法树就是用来表示结构的神奇工具。第六站语法树在生活中藏在哪里语法树听起来很神奇那它在我们生活中藏在哪里呢 藏在每一个程序里程序员写代码的时候电脑里那个叫**“编译器”**的程序做的第一件大事就是把代码画成一棵语法树只有先画成树电脑才能看懂代码到底是什么意思、该按什么顺序执行。可以说每一个能运行的程序背后都站着一棵看不见的语法树打个比方编译器就像一位翻译官️。你说的话代码它得先理解结构画成语法树才能准确地翻译给电脑听。语法树就是翻译官理解你意思的关键一步 藏在计算器里你用计算器算3 5 × 2它能正确地先算乘法。它怎么做到的很可能就是在心里偷偷画了一棵语法树然后从下往上算出正确答案 藏在很多智能工具里网页是怎么显示出来的浏览器要先把网页代码画成树叫DOM树才知道哪个标题放哪、哪张图片放哪。翻译软件理解句子也会用到类似语法树的结构。可以说只要电脑需要理解一段有结构的东西几乎都会用到语法树这个神奇工具大冒险结束我们一起回顾朋友你太了不起啦今天你完成了一次神奇的语法树大冒险让我们一起回顾这次冒险收获的宝贝语法树大冒险·满载而归 │ ├── 倒过来的树 │ 电脑的树根在上叶子在下 │ 像族谱、像金字塔 │ ├── 语法树是什么 │ 把代码/算式/句子按结构画成的一棵树 │ 用树的形状表达计算的顺序和结构 │ ├── ✏️ 怎么画语法树 │ 最后做的运算 → 放树根最上面 │ 最小的数字/词 → 放叶子最下面 │ 从下往上算先算叶子再算到树根 │ ├── ✨ 为什么要画成树 │ 顺序一目了然 │ 电脑容易读懂 │ 复杂代码也井井有条 │ └── 生活中的语法树 藏在每个程序里编译器要画它 藏在计算器里算出正确顺序 藏在浏览器、翻译软件里姐姐最想让你记住的一句话是语法树就是把代码画成一棵树。这棵树用它的形状清清楚楚地告诉电脑谁先算、谁后算谁和谁是一组的。下面的先算上面的后算一层层算到树根答案就出来啦你看语法树一点儿都不神秘它其实就是一种整理东西、理清顺序的聪明办法。就像你整理玩具、排列积木一样电脑也用画树的办法把乱糟糟的代码整理得井井有条。今天你不仅认识了这棵神奇的倒过来的树还亲手画出了一棵语法树甚至明白了为什么要画成树的奥秘——这些可是程序员叔叔阿姨们天天打交道的重要知识哦你真的太棒啦如果这次还有哪个小地方没看懂没关系你就告诉姐姐哪一站、哪个地方看不懂姐姐就专门给你讲那一个地方讲得更慢、更细、更好懂你能从头到尾完成这次语法树大冒险真的真的超级超级棒姐姐为你竖起大大的拇指还记得上次我们学的文法吗文法是造句的规则而语法树就是按照文法造出来的句子的模样。它们俩是一对好朋友呢将来你学编程的时候这两个好朋友都会来帮你的忙今天又是你成为小小程序员的精彩一步我们下次冒险再见啦