【原】Es6A - let使用/解构赋值/模板字符串

  课程大纲 

1.let的使用

2.解构赋值

3.模板字符串

4.箭头函数 (Arrow Function)

5.set结构和map结构

6.生成器函数

7.类class (了解)

  let的使用 

概念：

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

存在块级作用域 { }

不存在声明提升

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

const的使用：

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

先来看存在块级区域：

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

再来看不存在声明提升：

运行结果如下：

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

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

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

来看一下const的使用：

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

  解构赋值 

概念：

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

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

先来看数组：

abc就会对于的赋予123

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

还有一种写法：

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

运行结果如下：

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

运行结果如下：

再来看对象：

第一种写法：

运行结果如下：

第二种写法：

运行结果如下：

最后一种写法方式：

运行结果如下：

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

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

  模板字符串 

概念：

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

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

先来看Es5的写法：

运行结果如下：

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

运行结果与上面相同，如下：

Es6写法注意：

1.` ` 反引号

2.let{ } 来写变量

3.${ } 里面加变量名

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

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

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

先用Es5的写法来写：

运行结果如下：

用Es6的方法再来写一下：

运行结果都一样：

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

按照HTML的格式写即可：

运行结果如下：

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

本节所讲到的：

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

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

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

Es6写法注意：

1.` ` 反引号

2.let{ } 来写变量

3.${ } 里面加变量名

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

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

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