let和const的引入会对js编程带来哪些改变？

块级做用域let&const

js给人的感受每每是用起来比较简单，语法上宽松。这给开发者带来便利的同时也形成了一些违反思惟习惯的别扭之处。es6一些新的特性的引入，能够认为试图纠正或补齐js最初设计的缺陷。

咱们一块儿看一下let和const的引入对现有的编码方式会带来哪些影响。

变量声明提高

众所周知，变量声明提高是js中很是最重要的特性之一。也是面试中常被问到的点。但对于js新人来讲可能以为难以理解，甚至违反直觉。变量没有声明以前不该该能访问啊！

console.log(v1)// undefined
var v1 = 1
console.log(v1) // 1

上面这段代码对于新手来讲，undefined的结果是难以理解的。（心想不该该报错么？）

console.log(v1) // Uncaught ReferenceError: v1 is not defined
let v1 = 1
console.log(v1) // 1

使用let以后从逻辑上是符合开发者的思惟习惯的 未声明以前使用就是会报引用错误，在声明以后访问变量的值正常返回变量值。

let和const声明的变量是不会被提高的，真正实现了使用前声明，声明后再使用。

全局变量不会变成window的属性

之前在全局做用域下声明变量时，全局变量天然而然的成为了全局对象的属性如：

var a = 1
console.log(window.a === a) // true

对于这种状况前端开发工程师早已烂熟于心了。let和 const的引入一样改变了这种现象：

let a = 1
console.log(window.a) // undefined
console.log(a) // 1
window.a = 2
console.log(window.a) //2
console.log(a) // 1

做用域变量和对象属性分得清清楚楚。

for循环没有陷阱

看下这个前端圈用滥的面试题：

for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i)
    }, 0)
}
console.log(i)

这题当然难不倒老鸟们。但新手们十有八九会答错。0 1 2 3 4 5。

是的，从常理来讲就应该是这样的，只不过js中缺乏块级做用域的概念，var声明的变量天然而然从for循环的代码块外溢。

let和const引入后，每次循环都会建立特定于当次循环做用域的局部变量。换句话说每次循环都有与之绑定的i值。执行完成以后即销毁。不会外溢到外层做用域。下面的代码是符合预期的：

for(let i = 0; i<5; i++){
    setTimeout(function(){
        console.log(i) //0 1 2 3 4
    }, 0)
}
console.log(i) //  ReferenceError: i is not defined

最佳实践

为了不代码中出现意外惊喜，平常coding中首先是使用const，能够有效避免变量被意外修改。若是变量有被修改的需求首选使用 let。var的使用尽可能减小使用。