带你重学ES6 | var、let和const的区别

一、var

在没出现 let 和 const 以前，咱们定义变量只能用 var。可是用 var 定义变量一般有不少的问题，就是咱们常说的变量提高，例如：

if (false) {
 var a = 1; } console.log(a); 复制代码

若是初学者第一次看这段代码的时候，确定会以为段代码会报错，由于 if 中的条件是 false，并无执行 var a = 1，因此最后应该报 a 没有定义的错误，可是实际最后却输出了 undefined，这就是变量提高。 什么是变量提高： MDN 是这么说的：变量提高（Hoisting）被认为是， Javascript 中执行上下文 （特别是建立和执行阶段）工做方式的一种认识。在 ECMAScript® 2015 Language Specification 以前的 JavaScript 文档中找不到变量提高（Hoisting）这个词。不过，须要注意的是，开始时，这个概念可能比较难理解，甚至恼人。 这就没了？对这就没了！当看到的时候一样有这个疑问，因此我在var 描述中找到了这么一句话：变量声明，不管发生在何处，都在执行任何代码以前进行处理。 因此以上代码能够被翻译成这样：

var a;
if (false) {  a = 1; } console.log(a); 复制代码

二、let

咱们先看一下 let 的几大特性：

一、没有声明提高

咱们经过代码来看一下：

if (false) {
 let a = 1; } console.log(a); 复制代码

执行结果

欣喜若狂终于获得了咱们想要的结果，报错，a 没有被定义。

二、重复声明报错

var a = 1;
let a = 2; 复制代码

执行结果

哇塞，报错了，显示 a 已经被定义过了，这简直是太友好了，终于不会一不当心就改变了全局变量，也终于避免了重复命名的危险。

三、不绑定全局做用域

let a = 1;
console.log(window.a); // undefined 复制代码

根本没有定义到全局上，主要仍是由于 let 是块级做用域不是全局做用域。

三、const

在开发中 const 咱们通常是来定义常量，即不可更改的量，它的基本特性和 let 是差很少的。

const a = 1;
a = 3; 复制代码

执行上述代码时，会报错，由于 const 定义的是常量，没法进行修改。可是当 const 定义的是引用数据类型时：

const a = {
 value: 1, }; a.value = 2; console.log(a); // {value: 2} 复制代码

感受有些打脸，但确实如此，这是由于 const 定义的实际是引用地址，它判断是的引用地址是否发生变化，虽然改变了引用数据中的数据，可是它的引用地址并无发生变化，因此就能够更改，可是这种方式仍是不提倡的。

后语

相关文章：

• 带你重学ES6 | var、let和const的区别
• 带你重学ES6 | Promsie
• 带你重学ES6 | Generator
• 带你重学ES6 | Async和Await
• 带你重学ES6 | Set和Map
• 带你重学ES6 | Symbol(不只仅只是一个新的数据类型)
• 带你重学ES6 | Exprort(谨记输出的都是变量)
• 带你重学ES6 | proxy和defineProperty

以为还能够的，麻烦走的时候能给点个赞，你们一块儿学习和探讨！

还能够关注个人博客但愿能给个人github上点个Start，小伙伴们必定会发现一个问题，个人全部用户名几乎都与番茄有关，由于我真的很喜欢吃番茄❤️！！！

想跟车不迷路的小伙还但愿能够关注公众号 前端老番茄 或者扫一扫下面的二维码👇👇👇。

我是一个编程界的小学生，您的鼓励是我不断前进的动力，😄但愿能一块儿加油前进。

本文使用 mdnice 排版