ES6深入理解之“l(fā)et”能替代”var“嗎?

前言

我已經使用ES2015(ES6)的語法編寫JavaScript程序很久了，并且喜歡上它提供的新特性帶來的優(yōu)雅和簡潔。我最習慣的就是不再使用var,而是let/const。我想當然的以為let僅僅是var的替代者，而事實上let還為我們提供了更加精細的作用域。

我大多數(shù)時候使用的變量都是用const來聲明，因為如果嘗試對使用const聲明的變量進行修改，將會報錯。這可以避免不小心將一個不該修改的常量值修改。但是，我們還是需要可以聲明可以被修改的變量，比如在循環(huán)里面的計數(shù)器，我們需要不斷地對改變了加1?？墒菫槭裁次覀兪褂胠et而不是var呢？

最簡單的答案就是let提供塊作用域(block-scoping)，這會比var提供的以函數(shù)為作用域有更加精細化的控制。為了便于理解，我來用一個經典的前端工程師面試的問題來描述兩者的區(qū)別。

問題: 在下面的例子中，請說出控制臺的打印結果。

var callbacks = [];
(function() {
 for (var i = 0; i < 5; i++) {
 callbacks.push( function() { return i; } );
 }
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

我們將for循環(huán)執(zhí)行五次，每次將一個函數(shù)push到callbacks數(shù)組中。最后callbacks數(shù)組里面的每一個函數(shù)的執(zhí)行結果打印出來。

一個新手工程師經過深思熟慮可能會回答[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將變量提升到函數(shù)定義的頂部，經過整個for循環(huán)，callbacks里面存儲的5個函數(shù)指向的同一個變量i的值已經是5。所以最終打印出來的值都為5。

在以前要通過各種奇淫技巧來解決這個問題，并成功返回[0, 1, 2, 3, 4], 現(xiàn)在我們有了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不會被提升到函數(shù)頂部，i的作用域在for循環(huán)， 就會每次循環(huán)有獨立的值。

那我們是不是應該不要使用var了呢？如果你想要一個變量擁有函數(shù)作用域，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

為了保證可讀性，本文采用意譯而非直譯。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。