00:00
大家好,我是学习园地的特约导师高若峰,上节课呢,咱们认识了一下ES6,那这节课呢,咱们开始学习ES6的,呃,语法,咱们先从light声明变量开始。来,我们先建一个项目,新建一个文件夹。能叫ES6。然后呢,打开我们的,呃。然后我们创建一个新项目,用这个文件夹放在在这里面,ES6ES6好创建。好,在这里边我们新建一个,这节课我们讲light,那我们都写在HTM文件里边,我建一个HTM文件,就叫做ES6,那叫做light吧,这几个讲light以这个命名,咱们来做这个ma,这里边我们把所有的东西都写在surprise里边,当然了,你可以用咱们前面学过的,呃,Webpa什么的都可以啊,都没关系,那咱们这更直观一些,也不用打过变异了,直接用就行了。看一下ES6为什么给我们新增light。为什么新增light这样的一个声明变量的一个关键字?
01:10
为什么心疼这个,那主要是因为什么?主要是因为我们VR不好用,对吧,VR怎么了它不好用。那有的时候都用这么多年了,怎么不好用呢?因为javascript在最开始建的时候就为了写了什么,写一些小的东西,所以呢,语言规划的不是那么完整,所以当时就随意的,有可能啊是随意的整了一下这个VR声明变量就用它。然后呢,呃,也没有什么改进,那好多程序后期都在用加素,那VR倒着在用,他又不好把它去掉。因为VR是有缺陷的,所以呢,后来新增了light,那VR有什么缺陷,为什么不好用,那第一个就什么VR它可以怎么样重复声明。重复,嗯声明,再有看什么呢,它可以呃无法限制修改,所以呢,又加了一个cos的这个命令。
02:04
无法呃,限制修改,所以加了一个cos的名,当然这也加赖用不上它,咱把VR的缺咱们都说出来,因为以前呃,在ES6之前已经ES5那些版本,那只能用VR,没有like cos这样的一个说法,最主要的是VR。它缺陷在哪呢?最主要的缺陷就是什么,没有块级。作用。这是他最主要的一个缺陷。那我们先看一下,呃。VR这几个缺陷,你比如说。这个我们就先不看了,比如说重复声明,什么叫重复声明呢?把这关掉。VR声明一个DNA等于十,你看我再声明一个VRA等于20,这是不是就重复声明了,你看啊,我们这样去给的时候。你看一下我们这么做a.ROOG啊反,然后我们这边运行一下。
03:03
我们都在控制台里边看这个结果啊。你看是20。那重复声明,那是不是这样是重复声明呢?比如说VRA等于20,我们这么声明一下,你看一下可不可以刷新一下。你看。好像是没有出错对吧,没有出错,那想想这么声明夺怪呀,对吧,这是别的语言都不存在的问题,它存在,所以这是重复声明对吧?那最主要的是什么呢?是因为它的块级作用,那什么叫块级作用域,比如说。我们,呃,这么说明一下。块呢,通常我们就是放在大括号里边的,就是一个块对不对,你看VR等于,嗯,说明一个变量A吧,等于十对吧,那如果在这里边打印。这个A点零二,在这里边用coco在控制台打印,你看相当于在这里边使用A没问题对不对?来我们刷新一下。你看十是没问题的,那么它超出这个块在外边也可以用,比如说a.log我们保存一下。
04:01
你看一下。你看外边也可以用打印两遍式对吧,这就我们说的,它不会受块级作用率限制,那块及作用率都有哪些呢?那不光是这个,那我们还有什么,你比如说。我们嗯,声明一个VRA等于十,随便写了一个这个变量能声明,不光能声明整个字符串什么都可以啊,你随便用都可以啊,你比如说我换一个吧。换一个比如说VR name等于比如说R,对吧,证明一个这样的一个变量,但是要规范一些。那现在假如说我们if等于T处。你看在这里边,那我这里边儿可以再声明一个什么name,等于比如说e do what,这都可以对吧,然后name.love。然后呢,我这里边儿再打印你看。这是if有大块的,就是一个块也是块机,对吧,单独写的也是块机,那我在外边我打一下namelo name,你看一下它是哪个值呢。的现象,那都是一堆对吧,在这里边对吧,把它修改了,我们打印的却是这里边的,看到了吗?相当于给外边赋值了,这相当于被随意的给篡改了,这个值被随意的给篡改了。
05:12
那假如说这块我们要是呃,其他的时候我们在用的时候,这就很麻烦,对吧,那不光是在这里边用,那在其他的用的时候都是会出现这样问题,所以呢,通常我们解决在以前的语法中啊,像这样的语法在会计作用句里边,因为既然我想在这里边声明,就目的就是只要他在这里边用。对吧,所以VR这里边有一个不足的是,呃,就是没有快速就域,那我这里边这个记录一下。块肌作用力指的是哪块级作用域?会计作用域指的什么?大括号里边衣服这个大括号,里边还有什么风循环这个大括号,这些都是大括号,那像这样的,它超出了这个用具外边,可以随便使用这个它已经封装到里边这个东西对不对?那我们平时解决的办法,以前我们解决办法没有ES6语法let出现之前,我们解决这个问题怎么解决呢?我们我们。
06:04
我把它。嗯。啊。我们穿这么解决,用包解决。为什么能用B包解决?因为什么?因为有一个特点。记住啊,虽然VR没有快速应用作用域,但是只有在函数中。它这个块中相当于有作用欲,只有在这一个里边,函数里边有作用欲,所以呢,咱们用B包去解决这个问题,什么叫函数里边有作用欲啊,比如说我先把这个删掉。你看,嗯,同样声明一个fra是声明一个变量吧,We are name等于L。等于I上面这样的一个变量对吧,然后fe生面一个函数,随便写一个函数叫什么名都行,对不对?My name吧,随便写一个你看。随便起一个这里边,然后这里边VR name。或者是。不在直接在这里面是吧,你看啊。你看,如果我在一副一句里声明了,外边可以直接调用在这里边声明的这个变量,那我能调这个内内点log。
07:07
它是调不了的,你看一下。刷新价。这还一沃是呃,上边。你哪块没注释掉吗?都掉了,刷新刷新下。复习一下。这怎么还给我?都掉了,应该有了。保存一下试一下。刷新一下,强制刷新一下CTRLF5。几块你看一下啊。只有这块,这块我们已经把它注释掉了。把浏览器关掉,再开一下。
08:01
F12。刷新一下。没有还是缓存啊,你看这里边调用谁啊,调用这个内它就没调用到对吧,如果这是一个一组语句的话,它就可以调用到了,对吧。如果是if语句的话,那就可以调用到了,但是呢,我们写在函数里边,它是有函数作用域的,是调用不到的,那有的说了,那你这函数没调用啊,My name,就算我调用一下,你看一下我在这块还是调用不到核新一下。那还是要用到对吧,因为它只在这个函数的区域里有效,这就是我们说的VR的作用域,现在只支持函数这个作用域,所以既然只支持函数作用域,那么我们把这个。哎,这说是了,那我们解决这个问题怎么解决呢?看一下。我们解决外边不能调用的问题,我们通常加个B包,B包还记得吧,我们声明一个用一个呃,括号,这里边声明一个函数。大括号,然后后边呢,我们加括号来调用对吧,这里边声明的括号,用这个括号来调用,这里边儿的这个函数,如果这里边有参数,比如说有名字name,那我们这块传一个名字哈。
09:06
那就相当于传统的变量,这是细胞这个作用对不对,那我在这里边,比如说把它放在这里边,放在这里边,你看这个现在相当于也是相当于重复声明啊。支不支持呢,我先加一个一吧啊。你看。这是原来可以调用到的,但是我们封装了一层,相当于把这个函数,其实就是利用一个函数的作用域,对吧,写一个函数并调用这个函数,其实就用作用域把这个VR变量封装到这个作用域里边,这咱不在这就行。但是相同变量也行,这因在函数里边,这是支持的,你看。相当于生灵的作用,这样的话我们在外边就调不到这个里边的内容了,来我们刷新一下。这个E丢work name这一丢work是相当于我们在里面这块打印的,我把它去掉,你看但下边打印的是monkey了,就不像我们刚才成打印的是两个都是什么,都是E丢对吧,就可以限制它的作用欲了,所以通常用这个解决,那同样我们在负需款里边也是这样的解决,比如说。
10:02
我在下边我再做几个按钮,比如说BOT to做一个按钮,这里边写上,呃,写上按钮。嗯。按钮。按钮。随便做几个吧,你看按钮二。293294。按钮五。按钮这样的一个情况。这我们现在说的都是以前的这个VR的这样的一个用法啊,我现在呢,想把每一个按钮都加一个监听,然后呢,我们点击哪个按钮的时候,就告诉我们点击了哪个按钮在这里边,那我们先把这个用VR,呃,BTNS,我们做一个document,点呃代我们用标签名吧,这里边用BOT to,因为前面就有这个标签,对不对,然后我们做一个呼循环,V等于零,I小于BTNS按钮点loss,有几个循环几个I加加。
11:01
你看我现在在循环这个作用域的区域里边。我现在给BTS。I就是每一个ad添加监听,绑定什么监听呢?Click监听,然后当我们点击按钮的时候,执行这里边的这个函数,啊,执行这里边这函数,然后我们在这里边点击按钮的时候,当我们现在我们用这个是给每个按钮。这五个按钮都加上了点击事件一点击的时候都执行这个函数的一个区域,对吧,那在这里边我们呃用logo吧,这里边儿呃是I。Log。我们打一下这个,你看下这个值啊。现在是什么样的情况?因为我们想点击的时候,I第一次循环代表012345对不对,那我们没点击哪个按钮,它就应该I应该确实是显示我点击的是第几个默认从零开始的吗?但是现在的结果应该不是不是应该不是就不是点击。你看五点击每一个都是五。
12:01
看到了吗?点击每一个都是。为什么?因为我们给按钮添加的是一个点击的事件,添加的是点击的事件,点击的事件呢,是发生在我这个五次循环之后,五次循环呢,就相当于我们这个事件循环了五次,那这个方法相当于声明了五次,当然不是说用这个方法声明的一个作用率啊,那声明了五次,那这个I呢。在我们点击的时候,他每次执行的时候,他都会修改。也就是五次执行完之后,这个I是最大值,比如说是五对吧,那么它会把这里边每一个里边接听事件的I都改成五,因为没限制到区域,第二个函数在执行的时候,是因为我们点击的事件是发生在所有循环之后,I已经是五了,这个I就会把原来作用域里边所有I都修,都怎么修改一遍。是这样的,所以呢,我们得不到我们想要的结果,所以遇到这样的问题,像一付一对啊,不循环呢,这样的话胃癌没有作用欲的,我们以前解决的办法都是什么。都是加个括号,加个括号调用一下function对吧,然后我们加个大括号,这里边把这个。
13:06
放进这个函数里边,然后这里边接受个I吧,我再把这个I存进来,你看这样的话,我们就声明一个区域,每次循环执行一下,这个I放进去了,就在这里边,不会再被篡改了,因为有作用欲了,保护这个变量不会被修改,那我们再来执行一下,现在我们刷新一下。点击第一个012345,你看这才是我们想要的结果,这就是作用于VR怎么着不可以的一个情况,对吧。这是以前的这些解决方式,那现在新版的解决方案,那我们用的什么,我们用light,所以说既然我们学了light了以后,没有任何理由。让你去使用VR只有一个理由,就是为了你考虑到兼容性的情况,因为是ES6以后支持语法,有的浏览器不支持,但现在新版浏览器几乎都支持了,所以这个理由也给你pass掉了,那你现在就没有理由再去使用以前的VR了,对吧?因为它存在这么多弊端。存在这么多弊端对吧,又不好用就是缺陷对吧,那现在上面这几个VR不支持的是吧,这个light现在都支持。
14:07
你比如说咱们就说。嗯,重复声明的问题,这里边let a等于十对吧,那我let a等于20,这属于重复声明吧,那我们a.rog来我们试一下。刷新一下。你看错误,他说告诉什么已经存在了,不允许再定义,重新定义对不对,所以呢,它不允许重新定义,是这个问题。对吧,解决了light这个缺陷,最主要是作用欲的那个缺陷,你比如说在大泡里边,我们这里边声明牛为牙生明一个A等于十,对吧,那我们在外边是可以调用到这个十的,是不这样,但是呢,我现在如果我用light,它只在这个大泡的作用域里边可以使用,超出这个作用率是不可以使用的,所以我们上信一下,你看告诉我们A没有定义对吧,但是我们在哪能能用呢?在这地方可以使用。就没问题了,对吧,所以呢,前边那几个问题,前面那几个问题在if语句里边,我们如果用light,你就不用在里边,每个里边都嵌入到B包了,对吧,你比如说。
15:08
这块我们把这个程序我们再拷出来一下。你看这是我们用B包解决的这个问题,解决这个按钮点击的问题,现在呢,我们就可以不用这个了,你看这去掉。这个去掉对吧。现在。这个是呃,以前的那种问题。啊。出现都是五对不对,现在我们用B包可以解决的问题,那比如说这些地方我们都生命成Y,当然现在我们用的不是这个,你比如说在这里边I,这个I我们用I的生命,那它就有作用率了,这个就是一个单独作用率,超这个作用率后边这个I在变化,不会再把这个作用率去执行,因为它循环五次,相当于这个区域里边的代码执行五次,那就是五个作用域,每个作用用过了,后边咱用就用不了这个作用域里边的I了,其实是这个作用,所以呢,它有一个区块的这样的一个限制就可以了。来我们看一下,用这个就不用B包就能解决了,很方便,你看零。
16:01
二。随便点的看到这个结果了吗?对吧,这就是我们赖什么。这是呃,它的一个核心的用法,其他的语言生命变量都是跟的效果是一样的。都是跟的效果是一样的,所以呢,你没有必要怎么着,没有必要把它,嗯,还用VR对吧,那有的说我那么用灵活呀,但灵活很容易直接被别人篡改,使你程序混乱,逻辑不清楚,所以呢,你就不要用了。听了吗?还有呃,VR是支持变量提升的外,是不支持的,什么叫支持变量提升的,你比如说。呃,我声明一个VR,嗯,这会我先是A点,就是VRA等于十,先随便这么声明一下吧,然后呢,a.log你看我在上面打印。我在上面打印,可不可以能打印出来呢?刷新一下。嗯。这样,嗯,VRA先声明,然后呢,a.log。
17:06
A点。Log,然后我在这块A等于十。看一下,那在用VR声明的时候呢,所谓的变量提成就它都会把这个声明的给我们放到相当于放到最前面啊这个。放到这就是你在哪怕在后边声明了对吧,哪怕你不声明,你在后边声明了,他只能给我们说明什么,没有定义或者什么,他不会出错,你看这个时态也能打印,你在后边上面,它把所有的声明变量啊,声明函数啊,都会给我们提升到前边,相当于在脚本的最上边,它有一个这个作用,这就变量提升,但是如果我们这个是light。之类,你看啊,说明这个,那你看一下什么结果。你看就是一个错误。对吧,说明说访问A没有被数字化,对吧,他不能把我们这个声明的这个代码往前提升,你比如说去掉这个。
18:00
就先不复制,那都是一样的。都会提示这样密初始化,但是呢,你如果这块要是用VR就不会出错了。VR就不错了,你看。他只说没有定义对吧?没有定义你用like,它就会给我们一个致命的错误,看到了吗?那我都说了,是不是light,是不是light不声明就不能用啊,那你看现在是错误在这,我把它去掉。等一下。你看没有错误对不对,不是说这个没给值的错误清楚吗?它可以分开给值,可以分开给值对吧,只是变量未声明的这个错误对吧,没提升没提升就这意思,VR是可以提升的,也可以直接给知道。所以这就是变量提升,那我们总结一下。看一下ES6新增light cos命令用来生命变量的用法,类似于这个对吧?Light生命变量的时候,只有light命令所带代码块有效,所以有块记中率,那它命令不存在变量提升外,命令不允许在相同作用内重复生明同一个变量,而VR是允许的,这咱们都做过实验了,介绍了。
19:02
所以呢,咱们学light,你要知道几点,知道VR不足的地方在哪,对吧?VR所有的缺陷light都帮他弥补了,单me弥补全,那用两个将VR的弥补了,一个是用light,一个是cos,这样的话让Java s块这门语言就跟其他的高级语言对吧?那Java s现在也算是高级语言,用法是一致的。好,谢谢大家,这节课我们讲到这里,下节课我们来介绍一下。
我来说两句