ES6 一文弄懂 var let const 三剑客区别 吊打面试题

写在开头

本文将带你弄懂var let const 这三个声明的区别，也是面试常考的一个点。

后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！

推荐阅读：来自 菜鸟 的 前端实习面经 大厂 春招实习生

变量与常量的区别

在认识那三个变量之前，简单来说一说变量与常量区别

• 变量： 随时都可以变
• 常量：一旦定义了，就不能改变了

提出问题1

我们来看一下下面这个栗子：

A用var定义了一个变量 time ，然后自己写了一个方法，后来实习生C来了，也用var定义了一个time，那么会出bug吗？

//author A
var time = null;
doucument.onclick = function(
	time=set...
)
//author C
var time =function(){
	//
}

显然，两个人同时用var会导致覆盖问题，此时A就会出bug，自己程序可能就跑不起来了

引入let声明

我们想想，为什么ES6要引入 let 呢？当然是解决之前的问题啊（这不是废话嘛 ）ok，从上面那个栗子我们知道了var是可以重复声明的，那么let可以吗？（测试一下）

let a = 59;
let a = 60;
console.log(a);

果不其然，控制台报错了，那么我们现在就知道了 let 它是不允许重复申明的

不过let是可以重复赋值的，我们不妨执行下面代码

let a = 59;
a = 60;
console.log(a);

引入块级作用域

什么？你还不知道块级作用域这东西？ 那这篇文章一定对于有所帮助。

我们先简单提一下作用域，在ES6之前，我们常见的就是下面这种情况：

这就是一个简单作用域，外部访问不到我们函数内部的变量a

function f(){
	var a=6;
}

那么，块级作用域是啥意思？

{
	console.log(666);
}

会不会觉得很神奇呢？没错，就这是块级作用域！

变量泄露问题

在ES6之前，我们或许听说过变量泄露问题，来，举个栗子，猜猜下面结果：

for(var i=0;i<10;i++){
	
}
console.log(i);

显然，我们外部居然访问到了我们的 i 变量的值

但，如果我们用 let 来声明这个变量呢？

for(let i=0;i<10;i++){
	
}
console.log(i);

那么，我们用 let 声明的话，外边是拿不到变量的

进一步验证：

for(let i=0;i<10;i++){
	console.log(i);
}
console.log(i);

引入const声明

学习了 let 之后，我们知道了 let 不可以重复声明，可以重新赋值，还可以防止变量泄露

那么，我们简单讲讲const把

const a = 10;
a=20;
console.log(a);

我们发现，const 就是定义了一个常量，相当于定s，不允许重复声明，不允许重新赋值，但const 是不能防止变量泄露的，因为值已经定住了。

const 的应用呢，要说的话比如写node的时候，会有如下代码，简单提一下：

const fs = require('fs');

总结

let - 变量 不允许重复声明 允许重复赋值 可以防止变量泄露
const - 常量 不允许重复声明，也不允许重复赋值

学如逆水行舟，不进则退