ES6之"let"能替代"var"吗?

简介: 译者按:使用let的确会比var安全很多。原文:Why You Shouldn’t Use ‘var’ Anymore译者:Fundebug为了保证可读性,本文采用意译而非直译。

译者按:使用let的确会比var安全很多。

原文:Why You Shouldn’t Use ‘var’ Anymore

译者:Fundebug

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

我已经使用ES2015(ES6)的语法编写JavaScript程序很久了,并且喜欢上它提供的新特性带来的优雅和简洁。我最习惯的就是不再使用var,而是let/const。我想当然的以为let仅仅是var的替代者,而事实上let还为我们提供了更加精细的作用域。

我大多数时候使用的变量都是用const来声明,因为如果尝试对使用const声明的变量进行修改,将会报错。这可以避免不小心将一个不该修改的常量值修改。但是,我们还是需要可以声明可以被修改的变量,比如在循环里面的计数器,我们需要不断地对改变了加1。可是为什么我们使用let而不是var呢?

最简单的答案就是let提供块作用域(block-scoping),这会比var提供的以函数为作用域有更加精细化的控制。为了便于理解,我来用一个经典的前端工程师面试的问题来描述两者的区别。

问题: 在下面的例子中,请说出控制台的打印结果。

varcallbacks = [];

(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]。

varcallbacks = [ ];

(function(){

var i;

for(var 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,就可以很简单解决问题:

varcallbacks = [ ];

(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还是很有用的。

读者提到的两个问题:

const声明的变量不是完全不可更改。比如:

constmyNotQuiteImmutableObject = {

thisCanBeChanged:"not immutable"

};

myNotQuiteImmutableObject.thisCanBeChanged ="see I changed it.";

但是,使用const声明可以阻止一些基本的更改,比如:

constimmutableString ="you can't change me";

immutableString ="D'OH!";// error

如果你想要完全的不可更改,可以使用Facebook提供的Immutable库。

老版本的浏览器不支持let。不仅如此,而且有些最新的浏览器也还没有支持let。我们可以使用Babel来避免这个问题,Babel允许你使用所有最新的JavaScript功能,然后将其翻译到甚至IE8都能支持的代码。

欢迎加入我们FundebugJavaScript技术交流群: 622902485


img_441138c7e03a0081638eee3852d91b5a.jpe

版权声明:

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/05/04/why-you-should-not-use-var/

目录
相关文章
|
1月前
ES6中的var,let,const
ES6中的var,let,const
|
3月前
|
安全 JavaScript 前端开发
ES6 中 let 与 const命令
ES6 中 let 与 const命令
|
5月前
|
资源调度
Cannot find module ‘\node_modules\ejs\postinstall.js
Cannot find module ‘\node_modules\ejs\postinstall.js
39 0
|
8月前
|
JavaScript 前端开发 安全
ES6(let和const命令)
ES6(let和const命令)
47 0
node Express.js node:internal/modules/cjs/loader:988 throw err; ^ Error: Cannot find module ‘
node Express.js node:internal/modules/cjs/loader:988 throw err; ^ Error: Cannot find module ‘
1005 0
node Express.js node:internal/modules/cjs/loader:988 throw err; ^ Error: Cannot find module ‘
|
10月前
|
自然语言处理 JavaScript 前端开发
每天3分钟,重学ES6-ES12(二)var let const的选择
每天3分钟,重学ES6-ES12(二)var let const的选择
65 0
|
JavaScript 前端开发
ES6——let、const
ES6——let、const
91 0
|
JavaScript 前端开发
【ES6】 let与const详解
【ES6】 let与const详解