00:00
各位同学,咱们继续来学习ES6的基础语法,下面呢,我们来看第三个内容叫解构赋值,就是ES6里边怎么取值,怎么赋值的一些简写方式,那咱们下面直接通过代码看一下具体效果,我在里边写下,咱们创建第三个页面就是零三。解构赋值DHTML。进行创建,创建之后把代码生成加上script的标签,然后在里边写一下怎么做,我来实验一下啊,比如说第一个咱们先用我们的传统方式先做一个实现。那怎么实现写一下啊,首先我们的第一步,咱们先定义这么一个,就是数据,或者定义这么一个变量和里边的值,那我写个light user,等于咱就写这么一段Jason的一个对象形式,它的名字比如我们叫name。然后这个值我就叫Lucy。
01:02
再写个名字,我们叫A,它的值来一个20,所以大家看U色是不是一个这对象,那大家应该知道啊,比如现在我想取到这个内值,想想想要取到这个age值,那怎么取?是不是很简单,user.name取到就是你的name值,那咱给它个值,我来一个let name1,我想取到age值一样,我写个AGE1等于user.a所以现在这个值都取到了,取到之后咱们最后做个输出。conso.logo。一还有H1。所以以上呢,就是我们传统方式写法,这各位应该都能知道啊,一个最基础写法,我把这个输出一下啊,大家看一下应该很简单,根据名称取到它的这个值,那写完之后咱们看一下这个效果怎么样,试一下这个效果啊。
02:03
F12点开,大家看LUCY20是不是都输出了,证明这个是正确的,而这个写法呢,在我们ES中有一种简写方式,那丹重点讲的是。ES6中这种写法咱们看怎么来做,给各位写一下啊,ES6中的写法,这个写法就很简单了,我直接实现一下,比如现在我写个light,然后在里边我加上一个name,再写个逗号age。然后等于这个userr,这样的话就可以了,这么写之后什么效果?它会把里面的name值Lucy赋值给这name,把age值20不是给他,它会直接做赋值,前提条件你的两个名字要跟你的这个K的名字保持一致,也就是你这个名字name它是name,这是age,它是age,如果你是H1,那它取不到名字,只要保持一致就可以了,这样的话能直接进行赋值。
03:04
那咱们复制之后,把这个输出咱们看一下效果是怎么样,咱们试一下啊。改一下name,还有age现在就可以了,然后到里边,比如说现在我刷新。大家看啊,LUCY20是不是取到了,我上面已经注掉了,就下面这个做了输出证明,把里边的值对应这个名字进行了赋值,这就是ES6中的写法,叫解构赋值,是它的一种简写方式啊。当然这么写呢,有些同学可能不习惯,那你依然可以用传统方式实现。总之,如果别人写这个代码,至少你要能看懂,你自己写的时候,按照你个人习惯,要么用传统方式,要么用ES6进行实现。这个我们就完成了解构赋值的这个操作,这就说到这里。然后这个完成之后,我们继续往下看啊,下面讲的是一个新的内容,是六中一种特有的东西,叫做模板字符串,那咱们来看一下这个内容到底什么意思,我在这里边还是通过代码给各位实现一下。
04:13
我们创建第四个文件模板字符串。HTML把代码生成。加上此块标签,然后在里边写一下剩下它的含义啊,首先做一个说明模板字符串。它就是什么符号呢,是我们的这个符号。大家看啊,这符号不是引号。在咱们S口语中是那个飘的那个符号,就是在你的数字键一旁边有一个键,它里边应该是那个波浪线这个位置有这个符号,我们一般读成飘的符号,或者说叫模板字符串。用这个符号,然后这个符号呢,注意啊,它的作用是什么呢?能取到你变量中的值或者常量中的值,另外可以调用你的方法,那咱们直接看效果,看它到底怎么样,比如说我这么来写啊,咱先定义两个变量或者常量都可以,比如来一个name。
05:11
这个值咱们叫我再来个等于20,这是两个变量,然后下面比如说写一个light音符等于咱这个值,这个里边我加上这个叫模板字符串,大家看这写法啊,模板字符串,然后在里边怎么做,比如写一下啊,说这个name的名字是这个Mary,但是Mary是不是这个name变量的值,咱把它取到怎么取到用一个表达式。加上你的名字name,这样的话把值取到,咱们可以再写一下。它的这个A是这个20,那20通过表达式可以取到,而这个可以做一个运算操作,比如说让20加一,比如今年20,明年21啊,让他加一,这样的话它是支持的。
06:05
这是一个写法,另外在这个模板字符串中还能够调用方法,比如现在啊,我这里边我来定义一个方法或者函数,我随便来一个啊,方F1。然后这个函数里边,我就直接退一个值,这个值,比如写一个这个啊就是。这个have five啊,就是玩的高兴嘛啊,还有饭写上这么一个值,然后在里边我们可以直接调方法把这值就是分的值是可以取到的,那咱们来写一下啊,比如这个。是Mary age是20加一二十一,然后最后啊,咱们玩的高兴,我就最终调这个方法通过表达式。加上F1这个方法,这样的话就可以了,它就可以把它re的值最终进行显示,所以这就是我们用的模板字符串能取你的变量常量中的值,另外还可以调我们的方法。
07:07
这些写完之后,最后咱们做一个输出。console.log加上ino这样的话就可以了,这就是模板字符串,注意这个符号不要写错啊,不是单引号,是咱那个飘的那个符号。然后洗完之后,最后咱们运行看一下最终结果怎么样。咱们看一下啊,效果出来了,Name是Mary age是21,然后have fun玩的高兴,这样的话咱们把这个就说完了,各位记住啊,模板字符串,咱们在后面的项目前端开发中会用到这个东西。这个我们就说到这里。
我来说两句