看过ES6代码的小伙伴肯定已经发现，在ES6中声明变量的方式多了两种，分别是 let 和 const
在ES6之前，javascript并不像别的语言一样有多重声明变量的方式，所以我们只能够使用 var ，但是现在我们有了更多的方式
那么 let 、 const 和 var 之间又有什么区别于联系呢？别急，我们慢慢来看
var 命令与作用域
var
var 是我们最常用的一种声明变量的方式，通常我们会这样写：
var a;
var b = 1;
var c = 'test';
也可以同时声明多个变量，用逗号隔开：
var a,
b = 1,
c = 'test';
var 声明的变量在全局环境下，会自动变成全局变量，而全局变量在浏览器中又是顶层对象 window 的一个属性，这就很容易导致该变量污染我们的环境，比如我在 test1.js 中声明了变量a，页面中先后引入了 test1.js 和 test2.js ，这时由于a是全局变量，那么我在 test2.js 中就可以访问到 a 并且改变 a 的值。而此时 test1.js 在值改变后使用了 a ，那么就会导致结果与我们预想的不一样
/** test1.js */
var a = 1; // 全局变量a window.a
function addOne () {
return a + 1; // 预期输出 2
}
/** test2.js */
var a = 10; // 再次声明会覆盖原来的a
function minesOne () {
return a - 1; // 预期输出 9
}
/** 先后引入 test1.js 和 test2.js */
minesOne(); // 实际返回 9
addOne(); // 实际返回 11 与预期不符
为了避免这种情况，一般会使用立即执行函数，将业务主体代码使用 ( function () {…} () ) 包裹，这样函数内部声明的变量的作用域就会限制在该立即执行函数中，不会泄露到外部环境中来
( function () {
var innerA = 'a';
console.log(innerA); // a
} () )
console.log(innerA); // ReferenceError
如何使立即执行函数中的局部变量成为全局变量？
某些情况下，我们需要将一个变量抛出成为全局变量，这时只需要省略掉 声明变量的关键字 var ，这个变量就会自动成为全局变量
作用域
js的作用域有全局和局部两种，大部分语言的局部作用域有两种：函数作用域 和 块级作用域，而ES6之前的 js 却只有函数作用域
什么是函数作用域？
函数体内部定义的变量只在函数内起作用，外部无法访问的作用域
什么是块级作用域？
代码块中定义的变量只在代码块中起作用，简单来说就是 {} 之间的作用域
从上面可以看出来，js代码块中声明的变量在代码块外也是可以访问到的
function test() {
if (true) {
var temp = 520;
}
console.log(temp); // 520 无块级作用域 {} 内部声明的变量可访问
}
test();
console.log(temp); // ReferenceError 外部无法访问函数内部声明的变量
ES6 中新增的 let 和 const 命令使 javascript 拥有了块级作用域
let / const 命令
let 和 const 声明的变量的作用域都是块级作用域，也就是在 {} 之外无法访问，下面先说说两者相同的地方
if (true) {
let m = 'block scope';
const n = 'block scope 2';
var k = 'global scope';
console.log(m); // block scope
console.log(n); // block scope 2
console.log(k); // global scope
}
console.log(m); // ReferenceError
console.log(n); // ReferenceError
console.log(k); // global scope
上面这个例子， let 和 const 声明的变量作用域只在 {} 中，外面无法访问，而 var 声明的变量却不具有块级作用域
let / const 声明的变量在整个作用域中只可以声明一次
let i = 1;
let i = 2; // SyntaxError 报错提示：该变量已声明
全局环境下声明的变量是全局变量，但不是顶层对象的属性
var 声明的变量全局环境下会自动挂载到浏览器顶层对象window下，除了可以直接访问外，也可以通过 window 的属性进行访问；但是 let 和 const 声明的全局对象却不会挂载到 window 下，只能通过变量名进行访问
var testA = 1;
let testB = 2;
const testC = 3;
console.log(testA, window.testA); // 1 1
console.log(testB, window.testB); // 2 undefined
console.log(testC, window.testC); // 2 undefined
不存在变量提升
什么是变量提升？
javascript 中使用 var 声明的变量具有变量提升的特性，在该变量声明前就已经可以使用该变量，而不会抛出错误导致代码停止运行，因为 javascript 引擎会将所有的变量声明提前到顶端。但是需要注意的是，即使变量被提升，但是变量的赋值却不会被提升，如果提前使用，值是 undefined
console.log(testD); // undefined
var testD = 4;
console.log(testD); // 4
// 以上代码等价于
var testD;
console.log(testD); // undefined
testD = 4; // 提升的只是声明 赋值并不会被提升
console.log(testD); // 4
let / const 声明的变量不具有变量提升的特性，也就是说在该变量声明前，我们是没办法使用的，这也更符合我们编写代码的常识，先声明后使用，给我们开发调试带来了方便
console.log(testE); // ReferenceError
let testE = 5;
console.log(testE); // 代码抛出错误停止运行
const testF = 6;
console.log(testF); // 6
警惕！暂时性死区 TDZ
var testG = 7;
if (true) {
console.log(testG); // 7
var testG = 0;
}
var testH = 8;
if (true) {
console.log(testH); // ReferenceError
let testH = 0;
}
var testI = 9;
if (true) {
console.log(testI); // ReferenceError
const testI = 0;
}
上文说过，let / const 声明的变量在未声明前是无法使用的，像上面这两个例子，在 {} 内重新使用 var 申明 testG 并不会影响到上一行代码输出 testG，而使用 let / const 重新声明则会导致抛错，并没有先输出 {} 外声明的同名变量，这是为什么呢？
let / const 会使其声明的变量“绑定”到该作用域。即使在该作用域外已经存在这个变量，如果作用域内需要使用 let / const 再次声明，则必须提前，否则无法使用，直到声明后才可以使用。这种特性叫做——暂时性死区（TDZ）
由于这种特性， {} 内使用 typeof来检测变量类型也就变得不安全
var testJ = 10;
if (true) {
typeof testJ; // ReferenceError
let testJ = 0;
}
var testK = 11;
if (true) {
typeof testK; // ReferenceError
const testK = 0;
}
var testL = 12;
if (true) {
typeof testL; // number
var testL = 0;
}
let 与 const 的区别
let 用来声明一个变量，而 const 则是用来声明常量
常量的赋值必须与其声明同时进行，并且之后无法修改它的值
const testM = 13;
testM = 0; // TypeError 报错提示：常量的值不可变
const testN; // SyntaxError 报错提示：常量为初始化（赋值）
testN = 14;
以上就是 ES6 新增命令 let 和 const 使用过程中需要注意的问题啦！尤其是要特别小心 TDZ 的存在，这就更提醒我们要记住一句话——所有的变量使用前都需要先声明，虽然不能帮我们避免所有的坑，但能少踩一点是一点嘛！
PS：最怕的就是起变量名了，项目中有实际意义还好，这边。。。小伙伴们还是原谅我随意的变量名吧。。。捂脸狂奔~~~
网友评论