ES6深入理解之“let”能替代”var“吗?
作者:daisy 发布时间:2024-05-28 15:41:33
前言
我已经使用ES2015(ES6)的语法编写JavaScript程序很久了,并且喜欢上它提供的新特性带来的优雅和简洁。我最习惯的就是不再使用var,而是let/const。我想当然的以为let仅仅是var的替代者,而事实上let还为我们提供了更加精细的作用域。
我大多数时候使用的变量都是用const来声明,因为如果尝试对使用const声明的变量进行修改,将会报错。这可以避免不小心将一个不该修改的常量值修改。但是,我们还是需要可以声明可以被修改的变量,比如在循环里面的计数器,我们需要不断地对改变了加1。可是为什么我们使用let而不是var呢?
最简单的答案就是let提供块作用域(block-scoping),这会比var提供的以函数为作用域有更加精细化的控制。为了便于理解,我来用一个经典的前端工程师面试的问题来描述两者的区别。
问题: 在下面的例子中,请说出控制台的打印结果。
var callbacks = [];
(function() {
for (var i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
我们将for循环执行五次,每次将一个函数push到callbacks数组中。最后callbacks数组里面的每一个函数的执行结果打印出来。
一个新手工程师经过深思熟虑可能会回答[0, 1 , 2, 3, 4], 然而却掉入了JavaScript的”hoisting陷阱”。
只有当你理解了hoisting, 才能给出正确的答案[5, 5, 5, 5, 5]。
var callbacks = [];
(function() {
var i;
for (i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
注意:上面的代码,JavaScript将变量提升到函数定义的顶部,经过整个for循环,callbacks里面存储的5个函数指向的同一个变量i的值已经是5。所以最终打印出来的值都为5。
在以前要通过各种奇淫技巧来解决这个问题,并成功返回[0, 1, 2, 3, 4], 现在我们有了let,就可以很简单解决问题:
var callbacks = [];
(function() {
for (let i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
因为let拥有块作用域,所以使用let声明的变量i不会被提升到函数顶部,i的作用域在for循环, 就会每次循环有独立的值。
那我们是不是应该不要使用var了呢?如果你想要一个变量拥有函数作用域,var还是很有用的。
读者提到的两个问题:
1、const声明的变量不是完全不可更改。比如:
const myNotQuiteImmutableObject = {
thisCanBeChanged: "not immutable"
};
myNotQuiteImmutableObject.thisCanBeChanged = "see I changed it.";
但是,使用const声明可以阻止一些基本的更改,比如:
const immutableString = "you can't change me";
immutableString = "D'OH!"; // error
如果你想要完全的不可更改,可以使用Facebook提供的Immutable库。
2、老版本的浏览器不支持let。不仅如此,而且有些最新的浏览器也还没有支持let。我们可以使用Babel来避免这个问题,Babel允许你使用所有最新的JavaScript功能,然后将其翻译到甚至IE8都能支持的代码。
原文: Why You Shouldn't Use ‘var' Anymore
译者: Fundebug
为了保证可读性,本文采用意译而非直译。
来源:https://blog.fundebug.com/2017/05/04/why-you-should-not-use-var/


猜你喜欢
- jquery基本入门 第一天:选择器相关 1.html()与.text() .html()取得第一个匹配元素的html内容。会带有标签,.t
- 问题最近在Laravel项目中用到了百度编辑器,插入到数据库我保存的是原始的html标签代码,没有进行实体转义。然后在修改的时候,需要读取到
- 数据准备假设我们目前有两个数据表: ① 一个数据表是关于三个人他们的id以及其他的几列属性信息import pandas as pdimpo
- 近来,打开微信群发消息,就会秒收到一些活跃分子的回复,有的时候感觉对方回答很在理,但是有的时候发现对方的回答其实是驴唇不对马嘴,仔细深究发现
- Harris 角点检测算法1. 角点角点是水平方向、垂直方向变化都很大的像素。角点检测算法的基本思想:
- 前言这一期我们继续完善我们的魔塔小游戏。废话不多说,让我们愉快地开始吧~开发工具Python版本: 3.7.4相关模块:cpgam
- Mysql简易索引一、没有索引的时候如何查找先忽略掉索引这个概念,如果现在直接要查某条记录,要如何查找呢?在一个页中查找如果表中的记录很少,
- Zeroc Ice简介 Zeroc ICE(Internet Communications Engine ,互联网通信引擎)是目前功能比较
- 但是有时候,可以视看处进逻辑程度,可以把三者写成一个触发器,只是在其中稍作判断而已。 你可以根据从下面方法判断触发器是是处理了插入,删除还是
- 背景最近在写一个echarts数据看板,要在一个页面中展示多张图表,所以留给每张图表的尺寸就很小。这也就使得图表x轴的刻度文字全部挤到一起了
- 单例模式概念单例模式:“保证一个类仅有一个实例,并提供一个访问它的在这里插入代码片全局访问点。单例模式会阻止其他对象实例化其自己的单例对象的
- Python自动化测试 Eclipse+Pydev 搭建开发环境C#之所以容易让人感兴趣,是因为安装完Visual Studio, 就可以很
- reduce() 函数在 python 2 是内置函数, 从python 3 开始移到了 functools 模块。官方文档是这样介绍的re
- 在登陆界面中,通常,最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是,在载入页面时自动聚焦到第一个提供用户输入的表单框,让用户不
- 一、关系型数据库设计规则遵循ER模型和三范式E entity 代表实体的意思 对应到数据库当中的一张表R relationship 代表关系
- 我就废话不多说了,直接上代码吧:package mainimport ("flag""fmt"&qu
- 要真说出来哪一个函数能够做得到,还真难。但我们可用下面的代码来进行识别,返回“假”即偶数,返回“真”则奇数: function&n
- 本文实例分析了AJAX使用get与post模式的区别。分享给大家供大家参考。具体分析如下:如果是get 模式的请求,则将传递参数通过URL
- 上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,
- 一般来说,我们为了得到更完整的结果,我们需要从两个或更多的表中获取结果,我一般都是用select xxx,xxx from 表1,表2 wh