前言

常量声明、变量声明
- let声明命令
- let规定不可重复声明变量
- let不存在变量提升
- 块级作用
- 暂时性死区

2.变量解构赋值

数组的解构赋值
对象的解构赋值

箭头函数
模板字符串
模块（Module）语法

前言

一个前端项目开发中，都会使用到ES6命令，但是你知道什么是ES6命令吗？在最新的前端技术迭代下，ES6无非就是ES5的下一个版本，也是现在JavaScript轻量级语言的最新一版本的标准。说最新也新，因为这是现在的最新的一代，但是说不新，因为他已经在7年前就已经发布了。

一、常量声明、变量声明

let声明命令

let规定不可以重复声明变量

    let a=1;
    let a=2;
    console.log(a)

这一个程序当执行到let A=2;的时候就会执行不下去，就会报错，报错的结果如下所示

报错解释：未捕获的Sytaxerror:标识符'a'已经声明。因为let命令不允许在相同的作用域下重复声明同一个变量。

let不存在变量提升

变量升级什么意思呢？往下看一个实例代码就知道了

    console.log(a)
    let a=1

这一段代码就回到console.log(a)d的时候就会报错，报错类型如下：

提升.png

//未捕获的引用错误:在初始化之前无法访问'a'

解释一下为什么会出现这样的保存类型，因为外面使用的是let命令，这个命令中在进行声明变量的时候，要经过定义这个环节，才能进行到执行代码编译这一步。

在前面我们说了，用var进行声明的变量，是可以在没有声明前使用这个变量的，其得到的值是：undefined未定义，不会产生报错；但是使用的是let命令进行声明的，一定要遵守先定义再执行的过程，不然就会产生报错。

块级作用

我们在使用let命令的时候，所要声明的变量，这个变量只能在let命令所在的代码块里生效。这句话理解起来很简单。可以通过一个例子看就知道了

{
let a=1
console.log(a)
}
console.log(a)

当代码运行到最后一条console.log(a)的时候，这个代码就会报错，报错格式类型如下

块.png

//a没有定义。

补充:ES5中只有全局作用域和函数作用域两个作用域，但是ES6新增了块作用域，是的在执行的时候更加的便利。

暂时性死区

在ES6中，如果区块在使用let命令的时候，在块级中对let所声明的变量，这个块区的作用域就会变成封闭的作用域，这个作用域的作用就是只要你在声明前使用这一些变量，都会产生报错，我们就将它称之为“暂时性死区”。代码实例如下：

var a = 10;
if(ture)
{
 b = 20;
let b;
}

这个程序当执行到 b = 20;的时候就会报错，暂时性死区就是这个意思

二、const命令

在一个vue开发项目中，const这个命令一般使用来声明一个只读的变量，这个变量声明一旦确定了，里面的值就不能发生改变了。这个const的特性和let的使用特性是一样的。

我们还是通过例子的方式来理解，例子：


const p = 3.1415;
 console.log(p);
e=520;
console.log(p)  

  
//这个时候代码编译后的结果是p = 3.1415，

//报错的格式类型：Uncaught TypeError: Assignment to constant variable

//未捕获的类型错误:对常量变量的赋值

由此实例，我们就可以知道，用const声明的值，智能读他的值，但是没有办法进行对他的值进行改变。

二、变量解构赋值

数组的解构赋值

这个操作是通过从数组中提取出这个数组的值得，按照对应的位置对变量进行赋值。

 
let [a,b,c] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);
//输出的结果：1,2,3,

这个例子左右边的数组元素都是相等的，所以代码执行的时候，该语句实现从数组[1,2,3]中以此提取数值，可以等价于
let a = 1;let b= 2; let c = 3;
运行结果

对象的解构赋值

因为我们知道，对象这个定义属性是没有次序的，所以在解构赋值的过程中，要确保变量和属性名同名，不然就取不到对象里面的值。

例子：

let {name，age，telphone} = {name:'xiaoming',age:'23',tel:'1571274****'};
console.log(name);
console.log(age);
console.log(telphone);
//输出结果：xiaoming;23;undefined;

运行结果:

因为变量telphone在右边的对象中没有对应的属性名，所以输出的值就是undefined未定义。

四、箭头函数

先简单了解一下箭头函数:

在ES6语法中，是被允许使用箭头来进行函数的定义的，这种方法更加的简介，可以把ES5中的function进行省略，一般的语法格式可以是:（参数a,参数b）=>{函数体}，箭头的左边部分，我们一般称为前面部分是这个函数的参数，而右边（后面）这个部分称为函数体的代码块。箭头函数和别的普通函数除了在写法上面有所不一样之外，其功能上也要有所注意，以下列出几点后续需要注意的点；

第一：函数体内的this对象就是定义是所在的对象，而不是使用的时候所在的对象

五、模板字符串

ES6可以允许使用反引号“`”来进行创建模板字符串‘string’，这个不仅可以可以当做普通的字符串使用，还可以用作加强型的字符串。这个模板字符串有什么好处呢，它将我们读字符的拼接实现了简化，从而代替了传统的单双引号、“+”来进行字符拼接。我们还是通过我们的代码来解释我们这句话：

  let firstname = "我是一个变量"
  let lastname = ` 模板字符串是这样使用的 '${firstname}'`;
  console.log(lastname)

六、模块（Module）语法

ES6实现了模块的功能，可以将一个大的工程程序拆分成很多小的功能模块实现主要使用export和import 命令，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。如果你使用的功能模块主动输出，外部模块就可以获取该模块输出的数据，则该模块必须使用 export命令定义对外接口，导出该数据;

如要该模块使用其他模块中的数据，则可使用import命令导入其他模块提供的数据。

导出与导入写法，我们可以归纳为：

在定义变量时直接导出，就是在定义变量的前面加速export命令

使用时为 import{变量1，变量2，...} from模块标识符2）

使用一条export命令一次输出多个已定义好的变量，语法:

export{变量1，变量2，...} 导入时使用命令: import{变量1，变量2，...}from模块标识符

上述两种方法在导入时需要知道导出的变量名或函数名，否则无法导入，而用exportdefault 默认导出。 export default命令可直接输出一个对象，导入时用一个对象来接收即可。导入时使用命令: import对象名from模块标识符。注意，每一个功能模块，只允许使用一次export default命令。

五分钟，看懂ES6常用语法

前言

前言