![3d2dd39dc5a2a6695a5ee1f04474a291.png](https://i-blog.csdnimg.cn/blog_migrate/792347251302f93e1f3969cfd0123b58.jpeg)
课程大纲
1.let的使用
2.解构赋值
3.模板字符串
4.箭头函数 (Arrow Function)
5.set结构和map结构
6.生成器函数
7.类class (了解)
![11566a140748b0a1317cd843e67671fc.png](https://i-blog.csdnimg.cn/blog_migrate/ff3575b62257dddcf2af3f339914edce.jpeg)
let的使用
概念:
用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
存在块级作用域 { }
不存在声明提升
不允许重复声明 (包括普通变量和函数参数)
const的使用:
用来声明常量,不要试图改变常量的值,其他语法参照let
![92401d80366b8c28ce8d2b1742ff768f.png](https://i-blog.csdnimg.cn/blog_migrate/7b352320e542cf62b6bad4c12a48ea1b.jpeg)
先来看存在块级区域:
![493f0a097bcb5a814df718ec12a4f8b3.png](https://i-blog.csdnimg.cn/blog_migrate/d26be586455838b08de0f9c96cf02909.jpeg)
最终只输出了a的值10,b和c都显示没有定义
![1a70797866c02ff2c23c7db55f2308a5.png](https://i-blog.csdnimg.cn/blog_migrate/e0ea2ae829cde54af02f26f748b5f793.jpeg)
再来看不存在声明提升:
![5dfdd2552375456b298f60f22296d07d.png](https://i-blog.csdnimg.cn/blog_migrate/87b8d93de7f2c3f98d734065fb804a9c.jpeg)
运行结果如下:
![75475c9f968561374a97353b98081430.png](https://i-blog.csdnimg.cn/blog_migrate/fa21e6382d8c3ae904ac80c221ce6bf8.jpeg)
![7837ee1973de268bed796a64a516d8e8.png](https://i-blog.csdnimg.cn/blog_migrate/b542a81ac82a86689231d4c8587d24b5.jpeg)
最后来看不允许重复声明:
![811d3200deaaf0fd6e910db3679ac18a.png](https://i-blog.csdnimg.cn/blog_migrate/552a64640487de7392bb213afd3938c8.jpeg)
此时不需要输出,便会提示语法错误,运行结果如下:
![bf232f9edf8dc2b28c394f4530557dcb.png](https://i-blog.csdnimg.cn/blog_migrate/a34d696ab44e6598b9fad895a58fb637.jpeg)
以上就是使用let所要注意的几点
![b5f4fd540ab36566fca265a0bb0fa19e.png](https://i-blog.csdnimg.cn/blog_migrate/3fb43ea27f576e25a3f63ddbccbb4ab5.jpeg)
来看一下const的使用:
![2867f13bd28d2463fddb7e45d4ec4a62.png](https://i-blog.csdnimg.cn/blog_migrate/4a6b06f185ace61ab66b448878d2f103.jpeg)
不允许修改const定义的值,运行结果如下:
![21ae4c7f8ede5863f904ecb765cbbc3f.png](https://i-blog.csdnimg.cn/blog_migrate/0a5bd2a59e29b27a50ecb9565daf3970.jpeg)
![e550c6d2762a53c9f1ea13b8820e2e13.png](https://i-blog.csdnimg.cn/blog_migrate/06b37687a13ee222cee13482e9004d61.jpeg)
解构赋值
概念:
按照一定模式,从数组和对象中提取值,并对变量进行赋值。
![4aa6c83ecbeac4fc2fdddbf6d0850d8b.png](https://i-blog.csdnimg.cn/blog_migrate/0b0a7ed684842d6eeec300c028d337d9.jpeg)
分为数组和对象两种形式,具体的我们来看一下:
先来看数组:
![11f3cddc7598c2a93712080b7b5f9f65.png](https://i-blog.csdnimg.cn/blog_migrate/26e97aff74ed18706039bc0575d6309e.jpeg)
abc就会对于的赋予123
这里我们用谷歌chrome运行结果如下:
![ff8be8be5b0dabedcc0f4dd50fd556e3.png](https://i-blog.csdnimg.cn/blog_migrate/c19cc2cd6716433c93a97e5fdf4e9672.jpeg)
还有一种写法:
![12aa721010f1e95d5fc7fb3346c9896e.png](https://i-blog.csdnimg.cn/blog_migrate/cff88733e5a26eea7255adc5de04140f.jpeg)
此时a重新赋值为0,b没有值为undefined
运行结果如下:
![e857189dfde76881ac45583f5f1baea2.png](https://i-blog.csdnimg.cn/blog_migrate/4f2aaa8acc924dc93bcca7faadcce0be.jpeg)
如果给a赋予一个不确定的变量:
![0a732f4f57b9d4fc7e427dfa12607b44.png](https://i-blog.csdnimg.cn/blog_migrate/79637f157d21d3170ffdaefe4881d1e9.jpeg)
运行结果如下:
![d5924665654cb427679cebd5aa1bffd9.png](https://i-blog.csdnimg.cn/blog_migrate/b46c04a5e71dad727916f2e50ca961bf.jpeg)
![92414e6801942ec9a9651fa1f5420436.png](https://i-blog.csdnimg.cn/blog_migrate/ad932e7668da114946f7faf3b412fb33.jpeg)
再来看对象:
第一种写法:
![1440e790aa3d93b0e1eed2a92a20e62e.png](https://i-blog.csdnimg.cn/blog_migrate/520336281f350fd8d69bf3d47a9b9a28.jpeg)
运行结果如下:
![dac03a44f605542012fe8761b593e8f1.png](https://i-blog.csdnimg.cn/blog_migrate/7922457ebbb19eaba7ac7c0d47ad881a.jpeg)
第二种写法:
![14bd57b3115c3f88cd28c42d10642fc5.png](https://i-blog.csdnimg.cn/blog_migrate/d160f06424dbe705d4c96a2898c81f0b.jpeg)
运行结果如下:
![3ff9ae557e4d30ab14e82697f4eb69b3.png](https://i-blog.csdnimg.cn/blog_migrate/af48c1dfa914a8ffc053549a1cc02a12.jpeg)
最后一种写法方式:
![f1dc19ee058a8609cf39f76c366ab55b.png](https://i-blog.csdnimg.cn/blog_migrate/38d08fe4c1aff13645b2bf8242818516.jpeg)
运行结果如下:
![36cc638bd095f789f6d4c847f7446ccb.png](https://i-blog.csdnimg.cn/blog_migrate/522655f38f666ef74af3a9cc1135afec.jpeg)
let //不能重复声明,但是可以重新赋值
const //不能重复赋值,是固定死的一个常量
![ee4813f4a117de552e3d893e35b4dd56.png](https://i-blog.csdnimg.cn/blog_migrate/450f4f86d47ff893c4b17b9072ef6d14.jpeg)
模板字符串
概念:
将变量或表达式直接嵌入字符串
使用 ( ` ` ) 反引号进行拼接多行字符串
![27883db65c67c75c9622f042b8df0190.png](https://i-blog.csdnimg.cn/blog_migrate/50d3d5b8b8e55b60a15ef8a51af8095c.jpeg)
先来看Es5的写法:
![bf756956dd771ca400a38a3cc061a770.png](https://i-blog.csdnimg.cn/blog_migrate/4f701b98287144231ec47110dc5298f1.jpeg)
运行结果如下:
![5110a3ca1f6c91a93b6a62518d524a6f.png](https://i-blog.csdnimg.cn/blog_migrate/86a7a34e87a1f95af32a7ffd88e523ab.jpeg)
再来看一下最常用的Es6的写法:
![b829366f4e19900c69bb33eaff0e57bf.png](https://i-blog.csdnimg.cn/blog_migrate/c41fff5575c344380d72d4652b8ebee0.jpeg)
运行结果与上面相同,如下:
![22ecc396032b487670b04fdda64b8a21.png](https://i-blog.csdnimg.cn/blog_migrate/7119b78916e99064c2f3e015cf509c42.jpeg)
Es6写法注意:
1.` ` 反引号
2.let{ } 来写变量
3.${ } 里面加变量名
4.输出格式 (`${ 变量名 }文字文字${ 变量名 }`);
![dcc75ffad28bb8b2e96fd14e2942bdf7.png](https://i-blog.csdnimg.cn/blog_migrate/01cdb9713eb2d27865e3aef28f22bc10.jpeg)
模板字符串还可以用来生成多行字符串:
将数组中的数据放在上面ul中新建的li中
先用Es5的写法来写:
![269766c89f2dfee2a79192161830ee44.png](https://i-blog.csdnimg.cn/blog_migrate/5372bd35c8e6f32407eb705b229f0c7a.jpeg)
运行结果如下:
![02a42b1ab050116521258b968ace153a.png](https://i-blog.csdnimg.cn/blog_migrate/be5a57ea10be1ad77d053a31a447e367.jpeg)
用Es6的方法再来写一下:
![8af98b6f7eef62c32e31c277b8d604f4.png](https://i-blog.csdnimg.cn/blog_migrate/e3b9105ad40e654a533003fcda1bd7a3.jpeg)
运行结果都一样:
![d85f269738396602442e1466c1a56d73.png](https://i-blog.csdnimg.cn/blog_migrate/bda30060d8490eb36a779c95ae0c68f6.jpeg)
如果li标签中还有其他的标签,例如a标签等,写起来就会很方便
按照HTML的格式写即可:
![434212ed76eaef9ddca029b236673989.png](https://i-blog.csdnimg.cn/blog_migrate/5321e32c9daf94f38dc1492fedb5fd7e.jpeg)
运行结果如下:
![80351fe2e38f03217c251f89c4a01c83.png](https://i-blog.csdnimg.cn/blog_migrate/a6c3e6eb95b2e8148d54dac9f0f134dd.jpeg)
如果在Es5这样写就会有错误提示,并且麻烦
![72ebb8152683eba25ed30f0b3016fbdc.png](https://i-blog.csdnimg.cn/blog_migrate/21053a60b904c7b108eeda03b667bc08.jpeg)
本节所讲到的:
let的使用、解构赋值 和 模板字符串
![aba6da31e9a9495cced84b849453a93c.png](https://i-blog.csdnimg.cn/blog_migrate/23650b36551a930b42450519cc726549.jpeg)
let //不能重复声明,但是可以重新赋值
const //不能重复赋值,是固定死的一个常量
![90c54fd9f212a0e82b4179ec45ddf302.png](https://i-blog.csdnimg.cn/blog_migrate/9b5119af5981a6422f797c181dcdc014.jpeg)
Es6写法注意:
1.` ` 反引号
2.let{ } 来写变量
3.${ } 里面加变量名
4.输出格式 (`${ 变量名 }文字文字${ 变量名 }`);
![5123188aa8e5f7fdb450bb8285acc3b3.png](https://i-blog.csdnimg.cn/blog_migrate/bd5d1223ac9a2d22a34f1f1ccb5c01a0.jpeg)
- 写作不易,大家多多关注,谢谢啦-
---web分享,分享的不只是web
![8097c3b3f340c114c72b8695ec0e2379.png](https://i-blog.csdnimg.cn/blog_migrate/a1a1cd364187913c6d60dec8cdd634b3.jpeg)