let和const
首先先了解一下let和const把,
let和const是在es6中新引入了兩種方式來申明變數的關鍵字，雖然我們仍然可以使用廣為傳誦的var變數（然而你不應該繼續使用它了，繼續閱讀來了解其中原因），但是現在我們有了兩種更牛的工具去使用：let和const，
首先 let
let和var非常的相似，在使用方面，我們可以使用完全相同的方式來宣告變數
示例
let myLetName= "林江濤";
var myVarName= "林江濤";
console.log(myLetName); //林江濤
console.log(myVarName); // 林江濤
效果
但是實際上，他們之間有幾處明顯的不同，他們不僅僅是關鍵字變了，而且實際上它還讓會簡化我們的一些作業，防止一些奇怪的bug，其中這些不同點是：
-
let是塊狀作用域（是的JavaScript終于支持塊狀作用域了），而var是函式作用域，
-
let不能在定義之前訪問該變數（var是可以的，它確實是js世界中許多bug和困擾的源頭），
-
let不能被重新定義，
在我們講解這些不同點之前，首先我們看一個更酷的變數：const1,也就是,常量
const和let非常像（跟var相比來說，他們之間有許多相同點），但是他們有一個主要的不同點：let可以重新賦值，但是const不能，因此const定義的變數只能有一個值，并且這個值在宣告的時候就會被賦值，因此我們來看下下面的例子，
示例
let myLetStrName= "林江濤";
const myConstStrName= "林江濤";
console.log(myLetStrName); //林江濤
console.log(myConstStrName); // 林江濤
myLetStrName="JiuMei";
console.log(myLetStrName); //JiuMei
myConstStrName="JiuMei";
console.log(myConstStrName); // VnXRW9N:17 Uncaught TypeError: Assignment to constant variable.
效果
但是const并非是完全不可變的
有一個常見的問題：雖然變數不能被重新賦值，但是也不能讓他們真正的變為不可變的狀態，如果const變數有一個陣列或者物件作為其值的話，你可能會像下面的代碼一樣改變它的值，
示例
const myConstObject = {name: "林江濤"};
// myConstObject = {}; - TypeError
myConstObject.name = "JiuMei"; //ok
console.log(myConstObject.name); // JiuMei
const myConstArray = [1];
// myConstArray = []; - TypeError
myConstArray.push(2) //ok
console.log(myConstArray); // [1, 2]
效果
可以看到物件的name屬性被我們改變了,陣列的長度和成員都被改變了
當然我們不能用原始資料型別的值，比如string，number，boolean等，因為這些資料型別他們本質上是不可變的，
真正的不可變
如果想讓我們的變數真正的不可變的話，可以使用Object.freeze(), 它可以讓你的物件保持不可變，
const myConstNestedObject = {
name:"林江濤"
};
Object.freeze(myConstNestedObject);
myConstNestedObject.name = "jiumei"; // won't change
console.log(myConstNestedObject)
效果
可以看到,雖然我們給物件myConstNestedObject的name屬性重新賦值了,但是并沒卵用
雖然Object.freeze(), 能使物件不能改變,但很不幸的是，他僅僅是淺不可變，如果你物件里嵌套著物件的話，它依然是可變的，
示例
const myConstNestedObject = {
name:"林江濤",
immutableObject:{name:"林江濤"}
};
Object.freeze(myConstNestedObject);
myConstNestedObject.name = "jiumei"; // won't change
console.log(myConstNestedObject);
//將myConstNestedObject里面的immutableObject屬性的name屬性更改為jiumei
myConstNestedObject.immutableObject.name="jiumei";
console.log(myConstNestedObject)
效果
可以看到immutableObject物件的name屬性被改變了
變數的作用域
在介紹了一些基礎知識以后，在我們進入下一個更高級的話題前, 我們首先恭喜JavaScript終于支持塊級作用域了,可喜可賀
注意:因為let和const的作用域完全一樣,所以這里就只拿let舉例
全域變數和函式作用域變數2
在js中，變數的作用域決定了變數的可用位置，從不同的角度來看，可以說作用域是你可以在特定區域內使用的那些變數（或者是函式）的宣告，作用域可以是全域的（因此在全域作用域中定義的變數可以在你代碼中任何部分訪問）或者是區域的，(小聲逼逼:如果你會c#,java之類的編程語言,這個是很容易理解的)
很顯然，區域作用域只能在內部訪問，在ES6以前，它僅僅允許一種方式來定義區域作用域 - function也就是 函式的閉包.，咱們來看一下下面的例子：
示例
var myName = "林江濤";
function functionWithVariable() {
// local scope
var myAge = 18;
console.log(myName); // 林江濤
console.log(myAge); // 15
}
functionWithVariable();
//global scope again
console.log(myName); // 林江濤
console.log(myAge); // Uncaught ReferenceError: myAge is not defined
效果
上面的例子中，變數myName 是全域變數，所以它可以在我們代碼中的函式內或者是其他區域內被訪問到，但是變數myAge定義在函式內，所以它只在函式內可訪問，
ps:這里有一個例外,那就是在JavaScript里你不使用關鍵字宣告時,這個變數是默認全域的,但我這里并不打算介紹它,因為這篇文章主要是介紹let和const的
因此，所有在函式內創建的內容都可以在函式內被訪問到，包括函式內部里所有的嵌套函式（可能會被嵌套多層），在這里可能要感謝閉包了，但是在這篇文章里我并不打算介紹它，因為我已經在別的文章里寫過了 JavaScript函式詳解.
提升
簡單來說，提升是一種吧所有的變數和函式宣告“移動”到作用域的最前面的機制，讓我們看一下下面的例子，
示例
function func() {
console.log(localVariable); // undefined
var localVariable = 5;
console.log(localVariable); // 5
}
func();
效果
它為什么依然會正常作業呢？我們還沒有定義這個變數，但是它依然通過console.log()列印出了undefined，為什么不會報出一個變數未定義的錯誤呢？讓我們再仔細看一下，
編譯變數
Javascript決議器要遍歷這個代碼兩次，第一次被稱為編譯狀態，這一次的話，代碼中定義的變數就會提升，在他之后，我們的代碼就變成類似于下面的這樣子的（我已經做了一些簡化，只展示出相關的部分）
function func() {
var localVariable = undefined;
console.log(localVariable); // undefined
localVariable = 5;
console.log(localVariable); // 5
}
func();
我們看到的結果是，我們的變數localVariable已經被移動到func函式的作用域的最前面，嚴格來說，我們變數的宣告已經被移動了位置，而不是宣告的相關代碼被移動了位置，我們使用這個變數并列印出來，它是undefined是因為我們還沒有定義它的值，它默認使用的undefined，
提升的例子 - 會出什么問題
來讓我們看一個令人討厭的例子，我們的作用域范圍對于我們來說，是弊大于利的，也不是說函式作用域是不好的，而是說我們必須要警惕一些由于提升而引起的一些陷進，我們來看看下面的代碼：
注意:callbacks.push(() => console.log(m));是箭頭函式3
var callbacks = [];
for (var i = 0; i < 4; i++) {
callbacks.push(() => console.log(i));
}
callbacks[0]();
callbacks[1]();
callbacks[2]();
callbacks[3]();
你認為輸出的值是多少呢？你猜可能是0 1 2 3，是嗎？如果是的話，對于你來說，可能會有一些驚喜，
效果
實際上，他真實的結果是4 4 4 4，等等，它到底發生了什么？我們來“編譯”一下代碼，代碼現在看起來就像這樣：
var callbacks;
var i;
callbacks = [];
for (i = 0; i < 4; i++) {
callbacks.push(() => console.log(i));
}
callbacks[0]();
callbacks[1]();
callbacks[2]();
callbacks[3]();
你看出問題所在了嗎？變數i在整個作用域下都是可以被訪問到的，它不會被重新定義，它的值只會在每次的迭代中不斷地被改變，然后呢，當我們隨后想通過函式呼叫列印它的值得時候，他實際上只有一個值 - 就是在最后一次回圈賦給的那個值，
這個問題可以通過JavaScript函式的閉包來解決但是那樣很麻煩(主要是不易于理解)
var callbacks = [];
for (var i = 0; i < 4; i++) {
(function(m){
callbacks.push(() => console.log(m));
}(i));//通過IIFE產生閉包
}
callbacks[0]();
callbacks[1]();
callbacks[2]();
callbacks[3]();
效果
IIFE的詳細介紹請查看前端筆記 JavaScript函式詳解
我們只能這樣了嗎？不是的
es6除了定義變數的新方式以外，還引入了一種新的作用域：塊級作用域，塊就是由花括號括起來的所有的內容，所以它可以是if，while或者是for宣告中的花括號，也可以是單獨的一個花括號甚至是一個函式（對，函式作用域是塊狀作用域），let和const是塊作用域，意味著無論你在塊中無論定義了什么變數，什么時候定義的，它都不會跑到塊作用域外面去，我們來看一下下面的例子：
function func() {
// function scope
let localVariable = 5;
var oldLocalVariable = 5;
if (true) {
// block scope
let nestedLocalVariable = 6;
var oldNestedLocalVariable = 6;
console.log(nestedLocalVariable); // 6
console.log(oldNestedLocalVariable); // 6
}
// those are stil valid
console.log(localVariable); // 5
console.log(oldLocalVariable); // 5
// and this one as well
console.log(oldNestedLocalVariable); // 6
// but this on isn't
console.log(nestedLocalVariable); // ReferenceError: nestedLocalVariable is not defined
能看出來差別嗎？能看出來怎么使用let來解決早些時候提出問題的嗎？我們的for回圈包含一組花括號，所以它是塊作用域，所以如果在定義回圈變數的時候，使用的是let或者是const來代替var的話，代碼會轉為下面的形式，注意：我實際上已經簡化了很多，不過我確定你能理解我的意思，
let callbacks = [];
for (let i = 0; i < 4; i++) {
//, 1, 2, 3
callbacks.push(() => console.log(i));
}
callbacks[0]();
callbacks[1]();
callbacks[2]();
callbacks[3]();
如上代碼所示,現在的每一次回圈都有它自己的變數定義，所以變數不會被重寫,這樣我們就可以拋棄那個不易于理解的IIFE了
效果
和IIFE閉包效果完全一樣
這是這一部分結束的例子，但是我們再看一下下面的例子，我相信你明白列印出來的值的原因，以及對應的表現是什么，
function func() {
var functionScopedVariable = 10;
let blockScopedVariable = 10;
console.log(functionScopedVariable); // 10
console.log(blockScopedVariable); // 10
if (true) {
var functionScopedVariable = 5;
let blockScopedVariable = 5;
console.log(functionScopedVariable); // 5
console.log(blockScopedVariable); // 5
}
console.log(functionScopedVariable); // 5
console.log(blockScopedVariable); // 10
}
func();
let和const的新的提升方式
新的宣告方式（let，const）較之之前的宣告方式（var），還有一個區別，就是新的方式不允許在變數宣告之前就使用該變數，但是var是可以得，請看下面的代碼，下面這個代碼是可以正常運行的：
function func() {
console.log(varStrName); // undefined
var varStrName= "林江濤";
console.log(varStrName); // 5
}
func();
但是這種卻不可以
function func() {
console.log(letStrName); // ReferenceError: localVariable is not defined
let letStrName= 10;
console.log(letStrName); // 10
}
func();
等下，我上面曾經介紹了一個叫“提升”的概念，它會吧所有的變數定義在作用域的最前面，這是否意味著如果我不在實際的定義之前使用變數，然后就不會有提升了呢？答案是否定的，提升依然會有，并且適用于所有型別的變數型別，但是const和let卻不是這樣的，
首先，我們看一下var關鍵字是怎么作業的，規范對其是這樣進行的描述的，
var宣告定義了在正在運行的執行背景關系（running execution
context）作用域內的變數環境（VariableEnvironment中）的變數，var變數在當包含的詞法環境（Lexical
Environment）初始化時被創建，在創建的時候被賦值為undefined，[…]
在執行VariableDeclaration時，由帶有Initializer的VariableDeclaration定義的變數被賦其設定項的Initializer’s
AssignmentExpression的值，
規范中有許多的細節，讓我們簡單的來看一下：
-
當你進入到一個作用域中，在內部被定義的所有的變數都會被創建，
-
所有存在的變數，都可以被訪問，并且會把undefined賦值給該變數，
-
當代碼（執行時）到達初始化時，會被分配給一個實際的值，
我們來再看一下規范中對let和const的表述：
let和const宣告是定義在當前執行背景關系作用域中的詞法環境中的變數，當包含的詞法環境被初始化的時候，變數被創建，但是在變數的詞法系結時被計算之前是不允許通過任何方式來訪問的，當詞法系結計算時而不是在變數被創建的時候，由詞法系結定義的變數的初始值被被賦予賦值運算式的值（也就是“=”右邊的運算式），當詞法系結被計算的時候，如果let宣告中沒有初始化的值的時候（也就是“let
a;”這樣的形式），會被賦值為undefined，
說人話就是：
-
如果你進入到了指定的作用域中，它里面定義的所有的變數都會被初始化，這一點和var很像，
-
這里有一個不同點：像var一樣，所有的變數都會存在，但是他們目前還不能被訪問（里面沒有值，甚至是undefined），
-
如果let變數在相同的地方被定義和初始化，他們會被賦予合適的值，反之，變數就是undefined，const變數必須在定義的時候初始化，
光說不練很難理解,我們來看一些例子，
示例一:
臨時死區
實際上，這種描述引出了我們的另一個定義，他很讓人可怕，因為他叫：臨時死區（TDZ），這個屬于明確了一個我們無法訪問我們的變數的代碼的區域，我們來看一下下面的代碼和相關聯的注釋，來簡單的解釋一下TDZ是什么，
function func() {
// Start of TDZ for deadVariable
// we can still do something here, just our deadVariable is not available yet
const exampleVariable = 5;
console.log(exampleVariable); // 5
// End of TDZ for deadVariable
let deadVariable = 10;
console.log(deadVariable); // 10
}
func();
有一件事情值得去提醒，就是對于名字的建議，這是一個臨時死區，意思這個區域是由時間定義的，而不是位置，因此當運行代碼的時候，你的宣告在被JS決議器決議之前是不能被訪問的，因此你把使用的變數的位置放在哪里并不重要，只要是在宣告執行后訪問該變數就可以，所以看下面的代碼：
function func() {
return deadOrAlive;
}
let deadOrAlive = 'alive!'
console.log(func()); // alive!
效果
這樣做是可行的,他并不會報錯
這是運行代碼的步驟：
-
函式被宣告
-
變數deadOrAlive被宣告，并且初始化了一個值“alive”
-
呼叫我們的函式func，
-
由于變數deadOrAlive已經被宣告，是可訪問的，因此會列印出正確的結果 “alive”，
但是下面的例子卻會報錯
示例
function func() {
return deadOrAlive;
}
console.log(func()); // ReferenceError: deadOrAlive is not defined
let deadOrAlive = 'dead!'
效果
思考一下原因，(注意上面說的let和const的特殊提升方式)
答案揭曉
這是JavaScript為了避免因先使用后宣告而導致的一些詭異的bug而出現的一個很好機制（具體看“提升”相關內容），我們不需要去額外做什么事情，就是記住永遠不要在變數宣告之前使用這個變數，即使我們這樣做了，我們也會得到一個很好的報錯資訊，只有一個條件-你必須使用let或者是const來替換掉var，
雙定義
上面說過var和let，const的另一個區別是 - 后者僅僅可以被定義一次，而對于var的話，如果被同時定義多次，程式也依然會很好的運行，
var doubledVariable = 5;
var doubledVariable = 6;
console.log(doubledVariable); // 6
但是現在，當你用let和const來做同樣的事情，就會得到一個語法錯誤：
let doubledVariable = 5;
let doubledVariable = 6; // SyntaxError: Identifier 'doubledVariable' has already been declared
但是，在嵌套的塊級作用域中，使用相同名字的變數依然會很好的作業的，這個我想大家已經清楚了，就不用過多解釋了吧，
let doubledVariable = 5;
if (true) {
let doubledVariable = 6;
console.log(doubledVariable); // 6
}
console.log(doubledVariable); // 5
不能重復定義這個功能實際上是很有用的，可以組織很多bug的發生，比如說你曾經在一個函式內，在不同地方用var定義了多個相同名稱的變數，此時之前定義的變數可能會被覆寫，這樣對于代碼來說無疑是一個隱患，也就是因為這樣，這個特性實際上是一個簡單的，開箱即用的解決方案，
總結
總結一下，在ES6中有兩種新方法來宣告變數：通過let和const關鍵字，除此之外，兩者都是塊級作用域，并且在宣告之前不能訪問該變數，與之前的var相比是一個主要的升級，并且會消除你很多的困擾，我提出了幾個例子，可能會幫助你節省了不少除錯的時間，但是還有更多，如果你感興趣的話，可以在網上簡單的搜索一下，很久之前，我個人曾建議停止使用var關鍵字，所以現在我的代碼里充滿了let和const，我建議你也是這樣，在以后當你想改變變數的值，就使用let和const，不要再使用var了，
const關鍵字是constant的縮寫，通常翻譯為常量、常數等 常量是塊級范圍的，非常類似用 let 陳述句定義的變數，但常量的值是無法（通過重新賦值）改變的，也不能被重新宣告， ??
塊級作用域定義：是一個陳述句，將多個操作封裝在一起，通常是放在一個大括號里，沒有回傳值，為何需要塊級作用域?
在ES6之前，函式只能在全域作用域和函式作用域中宣告，不能在塊級作用域中宣告，沒有塊級作用域導致很多場景不合理： ??箭頭函式:箭頭函式運算式的語法比函式運算式更簡潔，并且沒有自己的this，arguments，super或new.target，箭頭函式運算式更適用于那些本來需要匿名函式的地方，并且它不能用作建構式， ??
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/168706.html
標籤：其他
上一篇：五個最佳FTP客戶端工具
下一篇：淺談 Hooks