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