ES6深入理解之“let”能替代”var“吗?


Posted in Javascript onJune 28, 2017

前言

我已经使用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

为了保证可读性,本文采用意译而非直译。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jQuery的倒计时实现代码
May 30 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 #Javascript
JavaScript中常见的八个陷阱总结
Jun 28 #Javascript
通过构造函数实例化对象的方法
Jun 28 #Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 #Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 #Javascript
Node.js 8 中的重要新特性
Jun 28 #Javascript
You might like
为查询结果建立向后/向前按钮
2006/10/09 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
js类式继承的具体实现方法
2013/12/31 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
js脚本实现数据去重
2014/11/27 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
python魔法方法-自定义序列详解
2016/07/21 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python计算IV值的示例讲解
2020/02/28 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
Ruby如何定义一个类
2012/10/08 面试题
活动邀请函范文
2014/01/19 职场文书
生产部管理制度
2014/01/31 职场文书
安全月宣传标语
2014/10/07 职场文书
门市房租房协议书
2014/12/04 职场文书
党员个人党性分析材料
2014/12/18 职场文书
介绍信模板
2015/01/31 职场文书
学生会辞职信
2015/03/02 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript