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

xavier 发布于2019-08-21 17:55 / 1809人阅读

摘要：我们一起看一下和的引入对现有的编码方式会带来哪些影响。和的引入同样改变了这种现象作用域变量和对象属性分得清清楚楚。和引入后，每次循环都会创建特定于当次循环作用域的局部变量。

块级作用域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的使用尽量减少使用。

混合云专线服务租用idc机房解决的问题和带来的效益改变世界的编程语言 js 中 let js的引入视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90209.html

弄懂JavaScript的作用域和闭包

摘要：关于本书，我会写好几篇读书笔记用以记录那些让我恍然大悟的瞬间，本文是第一篇弄懂的作用域和闭包。作用域也可以看做是一套依据名称查找变量的规则。声明实际上是根据你传递给它的对象凭空创建了一个全新的词法作用域。《你不知道的JavaScript》真的是一本好书，阅读这本书，我有多次哦，原来是这样的感觉，以前自以为理解了（其实并非真的理解）的概念，这一次真的理解得更加透彻了。关于本书，我会写好...

everfly 2019-08-22 10:45 评论0 收藏0
从JS对象开始，谈一谈“不可变数据”和函数式编程

摘要：下面，我就从基本对象说起，聊一聊不可变数据和的一切。可变和共享是万恶之源不可变数据其实是函数式编程相关的重要概念。相对的，函数式编程中认为可变性是万恶之源。针对于此，我推荐一款已经大名鼎鼎的类库来处理不可变数据。作为前端开发者，你会感受到JS中对象(Object)这个概念的强大。我们说JS中一切皆对象。最核心的特性，例如从String，到数组，再到浏览器的APIs，对象这个概念无处不...

Batkid 2019-08-20 15:17 评论0 收藏0
前端面试之ES6篇（高产似母猪）

摘要：这也是前端面试经常询问的问题，经常问你出现了哪些新的特性，平时又使用过那些。这也是前端面试经常询问的问题，经常问你es6出现了哪些新的特性，平时又使用过那些。在编写此教程的时候，第一句话往往就是面试常常问到的地方，然后后面就是他的详细解释，面试要求的内容我会用*标记出来。写技术文档是真的累啊，虽然是看别人的文档，但是你得看很多，而且还得自己总结啊。所以说要是觉得对你有用还是帮我点个s...

BlackMass 2019-08-01 17:40 评论0 收藏0
前端面试之ES6篇（高产似母猪）

摘要：这也是前端面试经常询问的问题，经常问你出现了哪些新的特性，平时又使用过那些。这也是前端面试经常询问的问题，经常问你es6出现了哪些新的特性，平时又使用过那些。在编写此教程的时候，第一句话往往就是面试常常问到的地方，然后后面就是他的详细解释，面试要求的内容我会用*标记出来。写技术文档是真的累啊，虽然是看别人的文档，但是你得看很多，而且还得自己总结啊。所以说要是觉得对你有用还是帮我点个s...

seal_de 2019-08-21 16:44 评论0 收藏0