day03【项目前端相关基础知识一】/07-尚硅谷-谷粒学院-前端技术-es6语法-解构模板和声明对象

下面呢，给大家演示这个东西，它叫做解构赋值，什么叫结构赋值，我们先看一下啊，然后直接写代码，咱就比较我们最原始写法和研六写法，它们一个特点啊，比如我们现在大家看这个代码。这代码什么意思呢？咱定义三个变量，就是ABC啊，它也可以这么做，在Java中也可以这么写啊，就是let ABC，然后把它输出，这么做没有问题，或者说你还可以这么写啊，这是一六的写法，咱来一个let。这个中国号列为是不是一个数组，然后咱们写123，这123会对应你的XYZ2种写法，效果都一样啊，就是不同的做法，这是普通的，这是颜六的。那咱们下面就来写一下啊，这个基本做法啊，这叫数组结构，还一个叫对象结构，咱先看这个数组，就是把这个怎么构建成数组，你可以这么写，或者说这么来做啊，都是不同写法。

那我们来操作啊，在里边我再建个文件就是。零四。这个文件叫数组结构HTML啊，咱建个文件啊。注意这里边需要我们手动自己加上那个后缀名，然后记完之后，我把这里边咱们还是写一段最基本的这样所有代码，那我们来做操作啊，首先第一个咱先写最传统的写法，那怎么做呢？比如现在我来一个let，写个A，等于这个一。再来个B，比如等于二，再来个C等于三啊，这个是咱们用let定义三个变量ABC，然后最后把它们做输出，比如输入就这个A。啊B包括这个C，把三个值咱就直接输入一下啊，这我就直接复制了啊，就直接col.log这么一个输出，这是一个最简单的一个东西啊，这没有什么特别的，然后下面呢，咱写一下就是关于我们的ES6的这么一个写法。

那这些法怎么做呢？注意啊，跟上面有点区别，我们来一个let，然后你加个中括号，中号就表示是个数组，比如在里边我们定义三个变量，然后写个XY，还有一个Z，然后在后面的再加上里边那个数组中的值，比如来一个这么一个十。啊，这个二十来个30。而这个什么意思呢？这个过程中就会把这个十二十三十对应赋值给这个XY和Z啊，这是一个特点，然后最后咱们也是最终做个输出，就是CTRl.log X y z把这输出就可以了啊，就是这个啊。这是我们写到这么一个特点啊，然后写完之后，咱们把效果我们来试一下啊，看里边结果，这第一个不用说可用123，再看第二个它应该就是十二十三十。啊，我们来执行。

在这里边啊，咱们点F12。大家看下边啊，第一个是123，第二个就是十二十三十，这个啊我们就做到了，这是关于叫数组的结构，就是怎么构建数组，用咱们研六的写法，咱们可以这么来做啊，包括数组中值怎么取，直接用这个做到。啊，这个第一个啊。大家知道这种写法就可以了，这算是一种做法啊，比如说以后如果你看到别人这么写，要知道它是什么意思。然后除了这个之外，咱来看下一个叫做对象的结构，就这对象该怎么赋值，包括怎么操作里边啊也是两种，第一种普通的，第二个YES6的，咱先看一遍，然后来演示啊，第一个就是比如现在我来个user对象啊，就是一个G对象，KY6 KY6，有name，有H，然后现在我怎么做呢？比如现在我想取里面的值，那做法就是根据K得到的值，就是你写个user.name得到它，user.age得到它啊咱这么做。

但如果说你用就是研六写法很简单，咱直接写两个name和age对应这个值，然后这个值可以直接输出，就不需要再一个进行赋值了啊，这是它的两种不同写法，那咱们下面给大家演示一下啊，就是关于这个叫对象结构。我写的位置啊，这是我们的。零啊，应该是零五。啊，叫做对象。结构。点HTML啊，咱们来做个操作啊，首先还是写一个Java词汇代码，然后在里边第一个，比如说我们现在啊，咱先定义这么一个对象。啊，就是组一个对象，其实就是一个de的对象啊，那我们来定义，比如现在来一个let user等于对象。啊，按照咱们之前说的啊，首先第一个就是GY6嘛，咱有一个名称，比如说名称值我叫Lucy，然后第二个我叫A值，它的值比如写个20，这是咱们定义的这么一个变量啊，就是这么来做，然后定义之后，比如现在我们来做操作，首先第一个咱先用我们最传统的做法，我现在想从这个对象里边。

获取它的值，也就是说我想把这个name值Lucy a值20K的取到啊，咱用传统方式做到，那怎么做写一下啊。第一个各位知道啊，因为这个结构是不是就是KY6KY6，那我们的做法就是根据K得到里边这个值啊，那咱写一下啊，比如第一个user.name就可以把这Lucy得到，咱给它做个赋值，比如来一个let，我叫这个。内一啊，这是第一个，然后第二个来一个let，叫H1等于user.h这样的话根据K把这个Lucy和20可以得到，最后咱做个输出。

conso.log啊，就是两个值，一个是NAME1啊，还有一个是这个叫age。啊，比如说我就在这里面直接输出了啊，还有一个叫H1啊，咱为了区分再加一些特殊符号啊。这样的话做到了啊，这是最原始方式，要各位这要知道啊，应该是扎中的内容，我再说一遍，它做法就是这是一个J的对象，就是咱经常说的Jason，对象是key value key value，那我们取值的话，根据key的value，它的key就是name和age，所以我们来一个user，侧点name user.age这个值可以得到最后出值给这两个啊，最后做输出。那咱们看结果啊。看控制台中，大家看LUCY20是不是可以了啊，这个完成了啊，这是传统写法，那这做完之后，咱们再用这个ES6的写法。

啊来实现，就是获取对象中的值，这个写法比它就要简单很多了，那怎么做呢？咱直接啊，Let大括号里边加上你这么两个属性，就加上这两个名字，而这个里边的name位跟这个必须要对应上，就这名字必须要一样，然后你写个user色，他又会把user色值复制给他。啊，就这么来做啊，这种方式应该最简单，那我们来写一下啊，写个light大括号，我们来一个name，再来一个age，然后等于这个user色，它就会把user色中的name值给这个user色中的A值输给他，然后最后咱们也是。做个输出啊，就是里边是name和age啊，为了区分我换个符号，这个符号。这个啊，就是颜六的写法，那咱们也是把效果试一下啊。

看一下结果，我点F12。大家看。Lucy星号20是出来了啊，这就叫六。啊，所以咱们把这个啊演出来了，关于这个叫做结构函数啊，就是结构数组，结构对象结构，包括咱们区里面的值，数组这用的不多，但是对象用的很多，这是我们原始方式，然后这是比较新的方式，直接加大括号，对应你这个名字，它这值就可以取到。啊，所以大家把这个写法要知道啊，因为在ES6中都这么来做啊，这些都属于扎组中这些东西啊，各位要给他适应过来啊。就是我们写过很多的Java代码，而我们到Java代码的时候，一个原则各位明确啊，咱们javascript跟Java没有什么直接关系，两个完全是不同的语言，所以你在写Java的时候，有些时候不要再去想Java，两个东西是不一样的啊，它的写法肯定也是有很大区别的，因为它是另外一种语言，所以咱们现在就是Java汇。

这么一个东西啊，各位把这记住啊，这叫解构赋值。然后这个做完之后，咱再看第四个啊，第四个是什么呢？它叫做模板字符串，还有第五个叫生命对象啊，咱今天把这个对象这个给它演示完啊，就上午，那咱们首先先看这个叫模板字符串，什么叫模板字符串呢？就是这里边啊，主要用的是一个符号，这个符号。给大家啊，拿过来啊，我说各位这符号是否用过啊，注意啊，这个符号呢，不是引号。是你键盘上啊，如果你用的普通笔记本是一旁边那个符号啊，就是一个。类似于叫做反引号这么一个东西，而这符号呢，就是在很多里边啊，咱经常给他说一个词叫做飘的符号，就是你一旁边那个符号啊，这个符号。大家注意咱用这个符号，然后实验一些效果啊，它不是引号，叫反引号，经常说那个飘的那个符号，这各位注意啊，那咱说它该怎么去用啊，这个叫模板字符串。

那我来演示啊。在里边，比如现在我再来建个文件零六。模板字符串，而且买了。然后在里边啊，咱们也是写这么一个javascript，这么一个结构。那这个我们怎么演示呢？首先给大家先演示第一个，第一个是什么呢？再用它呀，就这个挑的这个符号可以做到一个就是你的这个数据的一个自动换行的一个效果，用它可以给你换行，但是如果说你不用这个飘就加引号，那它是不会换行的啊，那我来直接给大家演示一下啊，这个应该比较简单，就是使用这个。就是这个符号。啊，符号能实现换行的这么一个效果，那当然也是啊，比如来一个let，我叫S撇一，等于各位注意啊，加个Q的这个符号。

然后在里边，比如写一个叫哈。然后我加个换行，我再来一个，比如说叫这个就是哈这个啊就是呃，ES6。啊，加个什么DEMO啊，什么up啊，就为了有效果啊，然后现在咱把这个定义出来了，但是大家看啊，在这定义中，Hello，下边是不给我们做了一个换行啊。然后你再输出，那他会有一个换行的效果，那比如说我们给他直接咱就输出一下啊。Conso点。Log里边加一个S撇一，这样的话就做到了啊，用一个叫飘的符号，那咱们把效果试一下啊。来看里边。大家看是不是就换行了啊，或者说你把这个往前移。啊，就到这个位置，然后比如说我们现在在刷新是跑这里了，但是它有一个换行效果啊，这是飘符号的第一个用法，可以实现一个换行啊，这个我们做了一个说明啊，大家给他知道啊，然后除了这个之外啊，就是这个不是特别重要，主要大家感受一下啊，咱看下面用的很多，下面可以做什么呢？你注意啊。

首先咱用这个飘的符号可以结合上这种表达式，就这种表达式Dollar符号表达式能取到你变量中的这个值，比如说来看我这个例子中啊，比如说我这个name，你用这个表达式能取到这个来，这个麦克用这个表达式能取这个值，另外它可以做这个线下操作，但是前提条件表达式就要用在我们这个Q的符号中。啊，这是一种表达式的写法，那咱们把这效果给大家也来试一下啊。就是第二个啊。啊，为了明显这句话我先注掉啊，咱看第二个。第二个就是咱们在这个就是。就是这个飘的符号里边，我们可以使用表达式。

来获取你变量中的值啊，这是它的第二个，那比如说我们来做个定义，假如第一个我来一个let name，咱来这么一个变量，呃，比如说我跟他一样啊，这变量它叫。Ma啊，咱就写它了啊，我来一个麦克，然后第二个我来一个like age，比如等于这个叫20啊，这是我写的两变量，而下面呢，我在这个飘里边可以用表达式把这个内值A值取到，那我们来取一下啊，比如我叫STR2。等于注意啊，是飘的这个符号，然后在里边比如写个值，我叫这个哈。逗号加上表达式啊，就相当于我们之前写过那个EL表达式里边加个name啊，这是一个，那比如说我再写一下，比如它这个age是这个啊，再加个表达式，咱来一个叫age，当然里边可以做这个操作，比如加一。

就是这里边最终输出哈，这个麦克H是这个20加一，就是21嘛，啊，这是我们飘的符号，你记住啊，用在飘的符号中，用表达式能取到你变量中的值啊，就是。这么一个效果啊，所以这个我们也是做了一个编写啊，然后写完之后，最后咱们把它最终做个输出console.logo这叫STR2。这个可以了哈，那咱们来试一下啊。应该是这里边我现在。刷新。大家看一遍啊，Hello，麦克age是不是21啊，而麦克21是咱通过表达式取得值，或者表达式选值之后又做了一个加一的操作。啊，这个叫模板字符串，各位把这个给他知道啊，这咱演示了第二个啊，就是飘的这个符号，然后飘的符号呢，还有第三个操作，就是咱用飘的符号也能够去调用你的方法，在这个里边可以直接去掉方法，比如你看我写这个，我这里边有个方程F这个方法，然后里边也可以去调这个方法，最终做这个操作。

那咱们来啊，看最后一个啊。就是第三个。写一下哈，在我们的挑的符号里边，可以去调用你定义的那个方法。那咱来测试啊，首先我先来个方法。这方法定义不是，各位还是否记得啊，它有多种方式，咱写一个最简单的方式，来一个方式，比如说我叫F1。这个是一个方法啊，就是方法这个名字叫F1，比如里边我直接给他退一个值。假的这个值我就叫哈F1啊，就是它，然后写完之后啊，咱下面我还是再写个变量，我叫STR3。啊，为了明显这先注掉啊，然后S23里边咱还是加一个飘的符号在里边，比如说我现在就写一个随便来一个啊M。

法位的区分，然后加上表达式。在表达式里边加上这个叫F1，这样的话，我们这里边当你一到这行代码中，用表达式又可以把F1这个方法执行，然后这个值就可以取到，最终咱输出的里面会包含这个值，就是哈F1。啊，这个是它的这么一个特点啊，就是飘里边可以做到这些功能，最后咱们也是输出一下啊。点log str3。然后咱们啊，看效果啊，这叔叔应该叫哈F1。那我们来刷新。大家看哈F1是不是就可以了啊，所以这就是关于啊，咱说那个模板字符串，也就是这个反引号，或者说飘符号使用主要这么几点，第一个能换行，第二个用里边加表达式能取变量的值，第三个用里边加表达式能去调用你的这个方法啊，这叫乱字串标符号。

所以咱们啊，这个就解示完了啊，大家把这知道啊，因为这个咱后面在项目中肯定会用到，就标括号表达式，然后取值这种写法，这个给它知道啊。完成了啊，然后这个完成之后，咱下面还有几个语法啊，咱再演示一个啊，下面咱最后演示这个东西，就是声明一个对象。什么叫对象呢？给大家强调啊，比如说啊，咱们刚才其实对象已经声明过了，比如说你看我这个是不是就是声明一个对象，这是一种方式啊，这是一种比较传统方式，而咱现在用ES6也能声明变量，它的写法比这要简单一些啊，那咱们来把这个写下啊，我就按照这种结构啊，先定义两个变量，然后里边做这个传统方式和颜六的写法啊，把这个我们给它最终现出来啊。

这里写一下啊。就是我们里边的应该是第七个。声明对象。点HTL啊，把这个咱们写出来，然后在里边先写一个，还是square这个标签啊，那我们来写一下啊，声明对象我就按照课件中这个过程啊，首先先来两个初始值啊，就是两个固定的值，一个12啊，一个这个。比如叫Lucy啊这两只，然后洗完之后呢，咱首先第一个先使用就是。传统方式来定义我这个对象，然后我们再使用ES6的这个做法来定义我们的变量啊，用两种方式把这做到那家看传统方式，传统方式呢，就需要在里边呢，直接去设它的值，而0ES6直接啊往里边附就可以了，那我们来写一下啊。

当然这个位置啊，用light也可以啊，我就用这个。Cost啊，比如说第一个我叫这个P1，那等于我们这个值，那怎么做，因为咱知道啊，它这个结构应该是那个key value key value这种形式，那比如我现在我就来一个name啊，然后name我先写，然后解释第二个age，再加个age。这是他的一个写法。而这写法什么意思呢？它就表示啊，第一个name和age是表示你这里边那个key的名称，然后第二个name age是表示虚拟里边的这个值，就是最终效果应该是name是这个Lucy是12，应该是这个结果啊，那咱们做个输出。conso.log加个PE啊，这就是传统方式，我们直接把这个值给它，把name给这个啊，这是传统写法。

啊，咱是这么来做的啊，然后咱们效果看一下啊。看结果。还是F12。大家看啊，因为它本身是一个对象，但是里边有name有age啊，这值都可以了，这是第一种写法啊，然后除了它之外，咱也可以用这个叫ES6的写法，这写法就简单了啊，写一下啊叫car，比如说叫P2，然后等于大括号里边怎么做，直接写个name和age。就可以了，然后它的过程中啊，逗号name和age可以了，它的过程中写法跟这个是一样的，只是说因为你这个name和这个名字是一样的，所以他就会把这个值复制给他，把A值给他，直接这么简写就足够了。A号啊，咱们也是输出一下。这个名字叫P2。这是EX6的写法啊，然后到里边刷新。你看效果是一样的啊，也是这个值就是12LUCY。

啊，应该没有太大区别啊，所以咱们这是关于对象的这么一种定义方式啊。你可以直接赋值，或者说直接简写，它们效果都可以做到啊，这些都是不同的，这个语法就是不同的写法啊，但是其实这个写法中有这么一点啊，说实际的项目中说你到底怎么写，这不一定看你的喜好，比如有的人他就喜欢这么来做啊，没有问题，但是有人可能喜欢这么写。但是我觉得不管是哪种方式，各位至少都能给他看懂，因为你看到别人代码中有人这么写，有人这么来写，不管哪种写法，都要知道它们分别代表是什么意思。啊，这是生明对象，所以咱们把它啊就做了一个演示。