00:00
各位同学大家好,咱们继续来学习前端中的技术支持,刚才呢,咱们完成了Vs code工具的安装,包括使用它的一个讲解过程,那下面呢,我们来继续往下来看前段中的其他知识,下面咱们讲什么呢?各位看我这张图上画出来了,第一部分咱们说完了,然后第二部分咱们学这个叫ES6。给各位讲解ES6中的基础语法,我们学的是一些最少必要知识,为了满足咱们项目使用,那下面咱们开始学下这个YES6。在学之前,首先我们先说一个基础知识给各位来写一下,各位知道啊,有门语言叫javascript,这个位都知道Java言,那大家考虑一下啊,或者各位同学告诉我,你说这个javascript它有哪些组成部分,或者说这个言由哪些部分组成,这各位要知道啊,就是它由。
01:01
哪些部分组成?这里边给各位来说一下啊,Javascript它一共有三大组成部分,首先第一部分我先写一下,一会儿杜会提的解释,它叫做ecma script,这是它的第一个部分,然后第二部分是什么呢?它叫做Bob,就是BOM。另外还有第三部分,它叫道,也是咱们说的DY,这是扎va中的三大组成部分,这各位要清楚,然后三个部分分别是什么意思,给各位同学来解释一下。咱们先看第一部分e CMA script。这个是什么呢?我来说明啊,首先大家看啊,Ecma其实它是一个组织,这个组织呢,叫做欧洲计算机协会,就类似于啊,我们中国足协似的,就是一些比较正式组织,然后这个组织他做了一个事情,做了什么事情,也就理解为。
02:03
制定我们章所中的语句和语法的规范,也就是他制定了你这个编写代码的语句和语法的一些规范。我在里边写一下,就是我的代码怎么写,比如说我怎么定义变量,我支持哪些语句,我怎么定义常量,怎么写函数等等,这些都在ecm词汇里边做的这么一个规定,所以它是一个语句语法的规范,这是第一个部分,然后各位再看第二部分叫鲍母。什么意思呢?其实它的全称叫browse object model叫做浏览器对象模型。什么叫浏览器对象模型呢?他就把浏览器中的相关内容用对象做的封装,比如大家看啊,我现在这是地址栏,它有对象,我整个是个屏幕,它有对象,这些在这个报幕里边都有对的对象进行操作,它叫浏览器对象模型,咱后面用的比较多的是这个对象,叫做location。
03:06
用它可以实现你页面的跳转等内容,这是第二部分,然后第三问,叫do do什么意思呢?它叫做文档对象模型。这个什么意思呢?比如说我们现在在页面中显示出来的内容,用盗可以操作,别人页面中我加行内容,查一行内容,或者说删一行内容,改行内容,用do都可以操作,Do中有一个很常见的一个对象,这个对象叫document,各位同学应该知道啊,Document中有个方法叫get I白地都是里面这个调中的内容,所以以上是。Java中的三大组成部分。第一部分是它的语句语法规范,第二部分叫boom,第三部分叫do。这各位给他知道,这是我们说的第一个技术知识,然后这个说完之后,咱们看我们现在讲这个重点,咱们要讲的叫什么,看这个全称叫ECMA6,简称叫ES6,那这么来看,各位同学应该很好理解这是什么意思?
04:14
说的简单点,它就是它的语句语法的是不是第六个版本的规范,这就是我们说的ES6,我写一下啊,简称ES6。这是咱们提到的这么一个基本概念,然后咱们再继续往下看啊,这里写到ES6就是ESSE和6.0是扎U元的下一代标准,就是咱说的语句语法规范,它在2015年6月发布了,然后他跟扎有什么关系,给各位说明啊,你可以理解为E3 script是一种规范,Javascript是他最近这种规范,一种具体的语言实现,它是语句语法规范。Java中遵循它这种规范,而这个具体语言除了Java之外还有别的语言,比如这个什么script actionscript,这些都遵循E3SQ的这种规范,这各位给他知道,所以咱们提到的要学到ES6,就是一套语句语法的规范。
05:16
然后在这里边呢,还有一个概念给各位进步来说明啊,但是下面说一个概念呢,在不同的书里边,它的说法可能有点区别,但是总体上都差不多,那我来解释一下啊,就是这里边除了ES6之外,还有一个版本叫ES5。咱们现在要学的这个叫ES6,这是两个不同版本,而这两个有个特点给大家说明啊,就是咱们一般来指的ES6是个通筹,或者是一个泛指。什么叫筹?比如说这里边有ES2016,包括后面发布了2017,这些统一都称为叫ES6,它是一个泛指或者是一个通程。
06:01
那这么说各位同学可能不好理解,我举一个比较现实的例子,各位应该就能理解什么叫泛指,什么叫通城,比如大家注意啊。比如现在啊,你到一个公司里边,你发现公司中有个人,这个人呢,可能所有同事都叫他二哥,就这个意思啊,都叫他二哥,那你去这公司里边,不管你比他岁数大,还是比他岁数小,是不是都要随着公司欺他人,是不是也要叫他二哥,这就叫泛指,就算我比他大,我叫他二哥,比他小也叫他二哥一个意思,所以这个E6是个泛指,它包含了20162017,这些都称为叫E6。这各位都知道。所以咱们现在主要学的是ES6的语句语法规范,然后这两个S5E6他们有一些优缺点,给各位也写一下啊,首先咱们说这个E6。它的优点是什么呢?就是代码编写简单。
07:00
方便啊,就是用很少代码能实现功能,但是它的缺点是什么呢?它的浏览器兼容性很差,也就是说你只能用一些新版本浏览器,如果用的浏览器版本比较低,那它很多代码的语句语法是不支持的,这是它一个特点,而这ES5跟它有这么一个区别,ES5什么特点,它的代码编写?相对于ES6要复杂很多,比如说举个例子,比如现在啊,我这里边写一段功能用ES,可能我写四行代码,用ES6,可能只需要一两行代码就可以实现,所以代码编写相对要复杂一些,这是它的一个特点,但是它有一个优点就是浏览器。兼容性很好,也如说你的版本第它依然能用啊,这是他们各自的优缺点,这大家了解一下,所以咱们开发中一般是这么一个过程给大家写一下啊,咱们实际的开发中一般怎么来做呢?写一下我们编写ES6的代码,然后咱们使用一个工具,这工具后面会说到叫这个B,或者叫bubble。
08:16
把我们这个。ES6的代码转换成ES5再进行执行,这是我们开发中一般经常这么来做,编写ES6代码,然后用工具背把ES6转成ES5再执行,因为这么做更加方便,写ES6代码不管你学也好,还是写的话,都会特别简单,特别方便。所以以上是这个基本概念的说明,大家把这知道咱目前学的就是ES6里面的基础语法,但是咱们学的呢,只学了一部分,为了满足咱们项目使用。这个啊是咱们基本介绍,所以大家把这概念先知道。然后这个说完之后,下面呢,咱就要具体看一下里边的基础语法,咱们学的是最少必要知识放在咱们后面,项目代码的理解,那我们看一下啊,咱要学什么,咱先过一遍,然后详细讲解。首先第一个。
09:15
ES6怎么声明变量,怎么声明常量,包括怎么做这个取值,以及有一个特别的叫模板字符串,包括你方法怎么写,包括有一个叫对象拓展运算符,还有这最后一个箭头函数,主要咱们讲解这么几个内容,那下面咱们一个一个来看一下啊,这个代码我就在code里边咱们进行编写了。那我写一下。首先我在这个位置呢,我先建个文件夹,这个文件夹我就叫ES6。这是文件夹,然后在里边我来建第一个文件啊,其实这个文件呢,咱们正常来讲呢,不推荐用中文,但是我这里边为了各位同学看得更明确,所以后把名字命名成中文,但是实际中不推荐写中文啊,咱为了明确我写成中文,第一个就是声明变量。
10:09
我们建一个H条文件,然后把它的代码感叹号生成出来,在里边写代码,因为写的是Java代码,咱们加上一个script标签,然后在里边写的的内容,第一个就是定义我们的变量啊,这是我们要说的第一个,而变量定义呢,学过Java同学都知道咱们用的关键字是什么。是Y,但是这是传动写法,在YES6里边定义变量用的不是Y,它的关键字叫做light定定义,那这里边我们来写一下啊,定义过程一样,咱就主要演示它的一个区别,那我们来写一下这个代码。比如现在啊,我这么做。我写个大括号。各位说这什么意思啊?理解为是不是就是一个代码块,然后在里边,比如说我先用传统方式来一个Y,咱来一个A等于一,做个定义,再写个let b等于二。
11:08
大家看这个变量是不是定义了,然后定义之后我在代码框外边做个输出,用conso.log,就是在控制台,你点浏览器的F12输出,咱们输出这个A,还有这个B。分别做输出。我在里边写下啊,这个是B,所以现在这段基础代码就完成了,很简单,定义两变量A和B,在代码块中定义,然后在边做输出。但是定义过程中咱们用了不同的关键字,一个是原始人,一个Y,还有一个是ES6中的light进定义,那咱们看它有什么特点。啊,咱们把这个执行一下,看一下怎么执行,之前说过啊,右键用open server运行,如果说你的系统浏览器没有弹出来,那你用127.0.0.15500访问是一样的,就是你可以这么访问,找到你的文件夹,然后点你的文件访问。
12:10
这个效果啊,然后咱们把F12打开,看控制台的输出,大家看啊,里边报了一个错误,这个错误。这些错误很明确,各位同学应该都能看懂啊,这英文很简单,大家看这错误啊,主要看最后重点这部分,这里写到什么错误,说这个B没有被定义啊,所以咱发现问题了,所以证明咱们说的let定义变量的第一个特点,Let定义变量是不是有一个作用范围啊,你定义变量在代码块中,你只能在代码块中用,输了代码块就不能用了,但是word的变量都可以使用啊,所以这是它的第一个特点。我写一下let定义变量有它的作用的范围。这各位给头知道啊,第就是第一个基本特点很简单,你记住light是E6中定义变量,这咱就说到这里,然后咱再说第二个,第二个呢,我直接复制一下啊,咱直接看一下,因为这很简单,这代我就不敲了啊,咱直接看一下这什么特点。
13:15
我把这代码复制过来,咱们看啊,就这里边就直接报错了,咱看他报的什么错啊,各位看啊,首先我用Y定义了M等于一,又写了M等于二,他是不是声明了两次,然后你看light,我定义N问题出来了,N等于三,N等于四,他就报错了,然后报的错里边告诉你就里边啊,他说这个不能重复背,你看这个re。第就是重定义嘛,就是你不能重复定义的N就是N,你用let只能声明一次,不能声明两次,声明两次它就直接报错了这个特点。这个我知道啊,一会咱们总结出第二个特点,Let定义变量只能声明一次,Y可以声明多次。以上就是YET6中怎么定义变量,各位把这个记住啊,用light关键字两个特点,第一个有作用范围,第二个只能声明一次。
14:16
所以这个我们就完成了。把这个各位给他记住啊,然后完成之后我们再看下一个操作,这个也很容易啊,就是用它定义常量,那咱看怎么做啊,我在这里边,比如说咱们重新建个文件零二。我们叫这个声明。敞亮。而且买了。然后把代码生成在里边加上。四个代码,然后咱们写一下啊,就是声明这个常量或者说固定值,那怎么做,在六中用过关键字叫这个cost。比如咱起个名字叫PI,就是那个圆周率嘛,然后后面加上一个值,这个值比如说我写一个3.1415926啊,什么5358,就随便写个值。
15:05
这个啊,是我们写的这么一个常量,然后de常量之后有一个特点,比如大家看啊,我这么写PI再等于一个三。我再来个三,现在这里边我把这个PI。现在写完之后啊,其实这里边就出现了问题,什么问题呢?你定义常量一个特点,常量值一旦定义它是不能被改变的,比如现在啊这个我给他做一个输出,咱们执行一下,看一下这个效果啊。Console log,输出一个叫PI,然后把这个代码执行,看一下它的效果,F12点开,然后各位看啊,这里写到。就是这个常量,你一旦定义之后,它就不能再改变它的值,如果改变值里面就报错了,这是它的一个特点。我把这个给各位截过来啊,把这句话各位记住就可以了。
16:02
写到这里。一六里边常量一旦定义赋值。啊,常量定义赋值之后,它就不能再去改变它的值了,这是咱们提到的这个特点,把这个记住啊,另外还一个特点。这个什么特点,就是你常量定义之后,必须要有个初始值,比如现在我来一个A,你这么写不对,它里边必须加上一个初始值的,告诉你,你看这句话啊,说必须被初始化,所以这么写也不对,这是它的。第二个特点。写下啊常量。必须。初始化就必须有值才可以。所以以上啊,就是在ES6里边怎么定义常量,把这个各位记住,以上咱就说了两个基础语法,ES6怎么定义变量,包括怎么声明常量是它的基础知识,各位把这个给他记住。
我来说两句