字符串赋值给字符串_Es6A - let使用/解构赋值/模板字符串

3d2dd39dc5a2a6695a5ee1f04474a291.png

课程大纲

1.let的使用

2.解构赋值

3.模板字符串

4.箭头函数 (Arrow Function)

5.set结构和map结构

6.生成器函数

7.类class (了解)

11566a140748b0a1317cd843e67671fc.png

let的使用

概念:

用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效

存在块级作用域 { }

不存在声明提升

不允许重复声明 (包括普通变量和函数参数)

const的使用:

用来声明常量,不要试图改变常量的值,其他语法参照let

92401d80366b8c28ce8d2b1742ff768f.png

先来看存在块级区域:

493f0a097bcb5a814df718ec12a4f8b3.png

最终只输出了a的值10,b和c都显示没有定义

1a70797866c02ff2c23c7db55f2308a5.png

再来看不存在声明提升:

5dfdd2552375456b298f60f22296d07d.png

运行结果如下:

75475c9f968561374a97353b98081430.png
7837ee1973de268bed796a64a516d8e8.png

最后来看不允许重复声明:

811d3200deaaf0fd6e910db3679ac18a.png

此时不需要输出,便会提示语法错误,运行结果如下:

bf232f9edf8dc2b28c394f4530557dcb.png

以上就是使用let所要注意的几点

b5f4fd540ab36566fca265a0bb0fa19e.png

来看一下const的使用:

2867f13bd28d2463fddb7e45d4ec4a62.png

不允许修改const定义的值,运行结果如下:

21ae4c7f8ede5863f904ecb765cbbc3f.png
e550c6d2762a53c9f1ea13b8820e2e13.png

解构赋值

概念:

按照一定模式,从数组和对象中提取值,并对变量进行赋值

4aa6c83ecbeac4fc2fdddbf6d0850d8b.png

分为数组和对象两种形式,具体的我们来看一下:

先来看数组:

11f3cddc7598c2a93712080b7b5f9f65.png

abc就会对于的赋予123

这里我们用谷歌chrome运行结果如下:

ff8be8be5b0dabedcc0f4dd50fd556e3.png

还有一种写法:

12aa721010f1e95d5fc7fb3346c9896e.png

此时a重新赋值为0,b没有值为undefined

运行结果如下:

e857189dfde76881ac45583f5f1baea2.png

如果给a赋予一个不确定的变量:

0a732f4f57b9d4fc7e427dfa12607b44.png

运行结果如下:

d5924665654cb427679cebd5aa1bffd9.png
92414e6801942ec9a9651fa1f5420436.png

再来看对象:

第一种写法:

1440e790aa3d93b0e1eed2a92a20e62e.png

运行结果如下:

dac03a44f605542012fe8761b593e8f1.png

第二种写法:

14bd57b3115c3f88cd28c42d10642fc5.png

运行结果如下:

3ff9ae557e4d30ab14e82697f4eb69b3.png

最后一种写法方式:

f1dc19ee058a8609cf39f76c366ab55b.png

运行结果如下:

36cc638bd095f789f6d4c847f7446ccb.png

let //不能重复声明,但是可以重新赋值

const //不能重复赋值,是固定死的一个常量

ee4813f4a117de552e3d893e35b4dd56.png

模板字符串

概念:

变量或表达式直接嵌入字符串

使用 ( ` ` ) 反引号进行拼接多行字符串

27883db65c67c75c9622f042b8df0190.png

先来看Es5的写法:

bf756956dd771ca400a38a3cc061a770.png

运行结果如下:

5110a3ca1f6c91a93b6a62518d524a6f.png

再来看一下最常用的Es6的写法:

b829366f4e19900c69bb33eaff0e57bf.png

运行结果与上面相同,如下:

22ecc396032b487670b04fdda64b8a21.png

Es6写法注意:

1.` ` 反引号

2.let{ } 来写变量

3.${ } 里面加变量名

4.输出格式 (`${ 变量名 }文字文字${ 变量名 }`);

dcc75ffad28bb8b2e96fd14e2942bdf7.png

模板字符串还可以用来生成多行字符串:

将数组中的数据放在上面ul中新建的li中

先用Es5的写法来写:

269766c89f2dfee2a79192161830ee44.png

运行结果如下:

02a42b1ab050116521258b968ace153a.png

用Es6的方法再来写一下:

8af98b6f7eef62c32e31c277b8d604f4.png

运行结果都一样:

d85f269738396602442e1466c1a56d73.png

如果li标签中还有其他的标签,例如a标签等,写起来就会很方便

按照HTML的格式写即可

434212ed76eaef9ddca029b236673989.png

运行结果如下:

80351fe2e38f03217c251f89c4a01c83.png

如果在Es5这样写就会有错误提示,并且麻烦

72ebb8152683eba25ed30f0b3016fbdc.png

本节所讲到的:

let的使用、解构赋值 和 模板字符串

aba6da31e9a9495cced84b849453a93c.png

let //不能重复声明,但是可以重新赋值

const //不能重复赋值,是固定死的一个常量

90c54fd9f212a0e82b4179ec45ddf302.png

Es6写法注意:

1.` ` 反引号

2.let{ } 来写变量

3.${ } 里面加变量名

4.输出格式 (`${ 变量名 }文字文字${ 变量名 }`);

5123188aa8e5f7fdb450bb8285acc3b3.png

- 写作不易,大家多多关注,谢谢啦-

---web分享,分享的不只是web

8097c3b3f340c114c72b8695ec0e2379.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值