ES6基础教程（第一节）——let和const

这期教程我们开始学习es6语法，这期将会对es6的大部分（最常用的）API进行讲解，除了纯理论的讲解外还参杂了本人在工作中时机遇到的问题以及解决方案和个人理解，希望大家喜欢。

客套话就不说了，我们这节课的学习内容是let和const，这两个是es6的定义变量和常量的方法，它们和js前版本的var有什么区别呢？其实主要的区别就是这两个定义的是有块级作用域的概念，学前端的同学都知道，js之前的版本只有全局作用域和函数作用域，在es6中引入了块级作用域的概念，块级作用域用一个非常简单的理解就是大括号（{}）包裹的内部是会形成一个作用域的，也就是let和const定义的变量常量拥有块级作用域。有了这个理论概念我们来开始学习let和const：

现代浏览器对es6的支持还是不够的，所以我们就直接在上一期vue项目文件中进行运行es6语法，因为vue脚手架可以自动识别es6语法并解析成浏览器可识别的语法进行页面绘制，当然我们也可以使用gulp之类的构建工具来实现es6代码的解析处理，这里因为是专门学习es6的其他的内容可以查看本人写的其他技术博客。以下是我在vue文件的代码结构：

初始结构代码.png

就是定义了一个函数，在页面加载时候执行函数，以后的代码都写在这个函数里面。

1. let——块级作用域实例：

   let块级作用域代码.png
   let块级作用域代码显示报错.png

   我们用let定义一个for循环的变量，当保存执行时候报错了，说i是没有定义，因为i是for循环里面的变量，块级作用域的存在，使得它在for循环外面是不能访问到的，这也证实了es6中块级作用域的存在。

2. let——变量不能重复定义：

   let不可重复定义.png
   let不可重复定义报错.png

   代码中可以看出，我们重复用let定义了变量a，然后执行时候直接就报错了，证实了let定义变量时候是不能重复定义的。

3. const——定义和赋值需要一起完成：

   const定义赋值需要一起.png
   const定义赋值需要一起报错.png

   从代码可以看出，我们先定义变量a，然后给a进行赋值时候出错了，因为const是定义常量的方法，这个方法需要定义和赋值同时进行才不会报错。

4. const——赋值不可变：

   const定义赋值不可变.png
   const定义赋值不可变显示.png

   我们先定义a为3.14，然后再赋值为5.20时候，解析报错，原因是const为定义常量的方法，常量是不能更改的。

5. const——为址赋值：

   const定义赋值为址赋值.png
   const定义赋值为址赋值显示.png

   大家看到这个地方是不是有点蒙了，刚才不是说定义常量不能更改吗？现在更改了怎么还是能够执行成功呢？其实const定义时候是指针赋值，也就是浏览器会划分出一块内存来存储这个值，我们现在写的代码是给a新增了一个属性，并没有改变其内存位置，所以并不会报错，这个需要重点理解，这是址赋值和值赋值的区别，const为址赋值，内存地址不变不报错。

   好了，这节课就学到这里，熟悉我的朋友都知道，我的原则是只学有用的，希望这节课对你也有用，谢谢大家的观看。

   
   
   公众号