分析 es6 新增的声明类关键词 const 和 let（以及全局变量污染的概念）

es6 新增了两个声明类关键词 const 和 let

现在来分析一下 这两个声明类关键词与 var 的区别

const 是区别最大的一个：

const 代表常量与变量不同的是 常量定义之后无法修改,变量是可以的.

var boy = 'sjy'

console.log(boy)

boy = 'tom'

console.log(boy)

const girl = 'Alisa'

console.log(girl)
​

常量 无法修改

var boy = 'sjy'

console.log(boy)

boy = 'tom'

console.log(boy)

const girl = 'Alisa'

console.log(girl)
	
//这样是无法通过编译的，有兴趣的朋友可以去试一下
girl = 'Abby'
	
console.log(girl)
​

let 与 var 非常相似也是定义变量

通常使用 var 定义一个变量后会造成 全局变量污染,打个比方我想修改 一个div 的背景颜色我在样式中这么写

div {
  background-color: #000
}
​

这样确实可以改变这个 div 的背景颜色，但是会导致其他所有 div 背景颜色都改变，这就是全局污染

解决办法很简单给这个 div 一个 id 或者 class <div class="a1"></div>

.a1 {
  background-color: #000
}
​

在 css 中我们这样就可以解决了

JavaScript 中的变量污染：

var i = 'sjy'
console.log(i)
for(var i=0; i<=3; i++) {
  console.log(i)
}
console.log(i)
​

运行效果：

一开始定义 i="sjy" 中间放入一段 for 循环之后 i=4！ EXM？ 不是等于 sjy 吗？瞬间懵逼了，倘若变量一多想都不敢想。。。

使用 let：

if(true) {
  var varTest = 'sjy'
  let letTest = 'sjy'
}
//可以访问
console.log(varTest)
//不可访问
console.log(letTest)
​

运行效果：

因为 let 定义的变量是块级的变量 let 只对它所在的最内侧块内有效，而 var 的范围至少是一个函数之内。

所以写 let 非常适搭配 if for 这些语句来使用，减少变量污染

希望大家可以养成良好的代码书写习惯，有效的减少 bug 缩短开发时间！