4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/18-尚硅谷-云尚办公系统-前端基础知识-ES6入门.mp4原创

各位同学大家好，刚才呢我们完成了前端开发工具code的安装，包括讲解了它的基本使用过程，那下面呢，我们开始学习简单中的基础知识，首先我们学第一个内容是ES6的入门，我们现在学的呢只是为了满足后面项目对代码的理解，所以咱们学的是最少必要知识，那这里边分成几部分来学，第一部分给大家介绍一下什么是也六，然后咱们学它的三个基础语法，第一个模板字符串，第二个对象拓展运算符，第三个箭头函数。下面我们具体看一下，首先看第一个什么是E6。这句话的描述啊，E称E点，那呢解释一下啊，首先看第一个e c ma，这个是什么呢？它是一个组织，叫欧洲计算机厂家协会，就是你可以理解为由，这个组织制定了一套语句语法的规范，就规定我写这个代码，我的语句该怎么写，我的语法该怎么定义，比如说怎么定义变量，我可以写哪些语句，是可以写for循环还是写if判断等等，这叫做E，它是语的下一代标准，是6.0标准的这套规范，这个叫ES6，而咱目前要学的就是ES6的这套规范。

那它的语法有很多，咱们介绍三个比较典型的，首先第一个叫模板字符串，什么意思呢？给大家啊，直接演示效果，咱直接看效果，那我现在在这里边，我来操作一下，首先我在这位置，我再重新建个文件夹，这个文件夹就叫ES6。然后在YES6里边，我创建第一个文件啊，为了看到明确啊，这个文件名字我就写中文了，叫做模板字符串DHTML。

创建之后呢，在里边把代码生成，加入感叹号，直接生成，刚才咱们都看到了，然后在里边怎么写，我写一下啊，因为咱要写的是Java代码，所以我加上一个。标签，在标签里边我们做个操作，那怎么做呢？写一下啊，比如第一个我这么来做，我先定义两个变量啊，就是一个比如一个名字，一个A这两个定义，然后在定义这么一个值，在这里边能取到这两个变量中的值，而在定义的时候呢，有一个小细节，大家看这个啊。各位应该知道啊，在Java里定义用的那个关键字叫V，而现在在里边可以用另外关键词叫light啊，都能定义，那我这里边还是写个了，这是第一个name等于这个值，我们来一个叫Lucy。

然后第二个我来一个A等于20，这是我定义的两个变量值，然后定义之后，下面我写第三个六的写法，啊第三个呢，我来一个叫info。然后在info里边呢，我想做件事情，什么事情，把name的值还有值给它取到，并且把A值20让它加一，我想做这个事情。写下啊，就是在这个info里边。获取name的值和A的值，并且H的值让它有加一，我想做这个事情，那这个做怎么来实现？其实有多种方式，而现在我们用模板字符串可以直接得到，那怎么得到？我写一下啊，咱的做法就是当然有多种方式啊，我们可以使用这个叫模板字符串再加上表达式来实现。

那具体怎么做，给大家写一下啊，首先第一个注意啊，模板字符串是一个标准的符号。这个位置啊。模板字符串有一个符号的写法。他写法是什么呢？各位看这个就是这个符号。比如说这个注意啊，不是单引号，如果各位知道搜狗语句就类似于搜狗语中那个飘的符号，且它，所以现在我加上一个叫模板字符串，然后在里边呢加上表达式，通过表达式能取到这个值，表达式长什么样子呢？它就长这个样子。用到符号大括号加上你这个。变量的名称。这样的话就可以取到，那我给大家写一下啊，现在我写一下说这个，呃，这个名字它是这个Lucy，而Lucy呢，我们用表达式取到，加上这个name，这就可以取到你的这个值，那比如说再写一下说它的。

年龄是这个20加一，那咱们用表达式H加一，最终得到的就是这个21，这就是我们说的模板字符串，能取到你变量，包括这里边值啊，当然常量值也可以取到，另外能让你这个数字值做一个运算操作，这称为叫模板字符串。就这里写到的啊，通过表达式啊，能完成里边的这些操作。那这个之后下面呢，咱把这个F值我们做输，我们1o log，然后最来做个测试，试一下这效果，就看一下这个值到底是什么。那我们来看一下啊，回到我们这个位置。我刷新。啊，咱先回了啊。刷新一下有ES6，然后在里边有这个文件一点啊，因为它是在控制台输入的，我点开F12就这个O，然后大家看啊。

名称是Lucy age是21，证明咱这个值和运算应该都得到了，这就叫模板字符串，是咱们演示的第一个技术技法，因为后面我们开发前程中这个写法会用到。注意啊，这里要写这个模板字符串写法，你不能写引号，就是你不能这么写。这么写的话，这个值肯定去不到。这个我们就讲到这里啊，咱说的第一部分。然后这个之后我们继续来看啊，看第二个技术语法叫做什么对象拓展运算符，那这个给大家在里边写一下。我们创建第二个。对象拓展运算符。然后在里边也是写一个最基础的这么一个结构，那这个什么意思呢？大家看啊，首先对相同运算符的写法，就是括号里边加上三个点，类似于Java中的可变参数，但跟那不是一个东西啊，只长得像而已，然后它怎么做，看这里啊，比如说我把这个代码就直接复制了，因为它就三行啊，咱看一下什么意思。

然后这里。对象拓展运算符说的通俗点就是做一个对象的复制或者对象的拷贝，大家看啊，我第一行PERSON1名称年龄是不是有值，而我现在先把这个PERSON1的内容复制到这个3万里面去，那怎么做？加上大括号三个点加P1，它就会把PON1中的值复制到3万里面去，就完成我们说这个对象的拷贝，或者叫对象复制，这就是第二个内容。注意这个法，然后咱们试一下这个效果。

我这里边刷新。然后大家看这个对象拓展运算符，你看最终输出的是不是有这个内容名称和A，第二个语法我们演示完成，然后除此之外，下面还有第三个基础语法，也是咱们后面项目中会见到的语法。我这里继续写一下啊，第三个。它叫做箭头函数。写到这位置啊，那这个箭头函数什么意思呢？这里说明啊，各位应该学过Java基础，在JAVA8中有个特性叫拉姆的表达式，它的作用和写法跟拉表达式很相似啊，注意很相似，肯定是不一样的，因为这是前端，但是很多地方有很多相似的之处。那咱看一下啊，先看一下，然后咱写一下，比如说我现在。写一个方法叫方式F1里面串个参数把它返回，而这种写法我们用这个箭头函数可以把它做个简化，它就是提供了一种更加简洁的函数书写方式，跟拉表达式很类似，然后第二个一样，比如说两个参数啊，最终也可以把它做个简化，这就叫箭头函数和拉表达式类似这种简洁的函数编写方式。

那我下面来做一个演示。首先啊，我们演示第一个。啊，就是演示一，我先来一个方法啊，这个方法就叫F1。加上function里边传有参数叫A。然后最终我们来这个A，这是一个最简单函数，这个函数咱们给它做一个调用输出啊，试一下这个效果。我就复制了啊，给它直接输出调用F1里边我传一个三，然后最终输出的值应该是这个三，记住我们最原始写法，而现在我把它用箭头函数做个简化展开，怎么做啊。

Y，比如叫F11。为了区分。注意后面写法啊，首先第一部分就这里加上你的参数部分，它目前参数是这个样子，就是一个A啊，那咱来个A，然后写什么，加上一个右键头，再加上返回结果的结果就是这个A，这样的话就把这个方法做了简化，两个方法是等价的，只是不同的写法。最终我们再做一个调用。我调这个叫F11啊，一个这个。八成这个值。现在这就完成，完成之后我们试一下这个效果啊，看它是怎么样的。做个测试。间头函数你看啊，第一个三，第二个是八，这样的话完成它的简写。然后之后我们再试一个啊，因为这个是一个参数的，咱们来一个多个参数的试一下。

我写个演示二。比如说现在啊，呃，我用它就改下来，因为就是这个结构啊，就是首先我写个方法叫F2里边传个这个A，再传个B。最终蕊A加B。是不是两个参数，而现在这里边我调用F2，比如来一个三啊，再来一个四，就是三加四嘛。这个咱们做过简化，大家按照刚才的写法注意怎么做啊Y，比如这个二二。等于什么？第一部分加参数等于多个嘛，加一个括号加上。右箭头就咱说这个箭头函数，然后最终加上返回结果就是A加B，这样的话就完成简化，然后最后把这个我们也做一个调用。F2啊，咱们来一个这个，比如说。

呃，五加五啊，就把它区分一下。现在就可以了啊，最终到里边刷新。你看值是不是都有了，这就叫箭头函数，是一种更加简洁的函数书写方式。所以以上啊是我们演示的ES6中的技术语法，咱们演示它为了满足后面项目进行使用。