大家好，好久不見，經過上次ES6的介紹和let聲明後，小編繼續給大夥帶來更精彩的ES6。

關鍵字const 的作用

const是constant（常量）的縮寫，const和 let一樣，也是用來宣告變數的，但是const是專門用於宣告一個常量的，顧名思義，常量的值是不可改變的。

常量的特點

• 不可修改

const Name = '張三';
Name = '李四';//錯誤，企圖修改常量Name

• 只在塊級作用域起作用，這點與let關鍵字一樣。

if(1){
  const Name = '張三';
}
alert(Name);//錯誤，在程式碼塊{ }外，Name失效

• 不存在變數提升，必須先聲明後使用，這點也跟let關鍵字一樣。

if(1){
  alert(Name);//錯誤，使用前未宣告
  const Name = '張三';
}

• 4、不可重複宣告同一個變數，這點跟let也一樣。

var Name  = '張三';
const  Name = '李四';//錯誤，宣告一個已經存在的變數Name

• 聲明後必須要賦值

const NAME; //錯誤，只宣告不賦值

如果常量是一個物件呢？

const Person = {"name":"張三"};
Person.name = "李四";
Person.age = 20;
console.log(Person);
//結果：正常輸出{name: "李四", age: 20}
 

咦？怎麼常量Person好像被修改了，name改成了“李四”，而且還添加了age屬性，值為20；怎麼沒有報錯，還正常輸出，不是說好了常量不可修改嗎，友誼小船說翻就翻了，說好的常量說變就變，別怕，友誼還是很牢固的。

傳址賦值

我們先引入一個概念：在賦值過程中，我們可以分為傳值賦值和傳址賦值。這裡我們用到了傳址賦值，什麼叫傳址賦值？

傳址：在賦值過程中，變數實際上儲存的是資料的地址（對資料的引用），而不是原始資料或者資料的拷貝。

• 具體程式碼演示

var student1 = {"name":"張三"};
var student2 = student1;
student2.name = "李四";
console.log(student1);
//結果：輸出 {name: "李四"}
console.log(student2);
//結果：輸出 {name: "李四"}
​
//為什麼student2的name改成了“李四”，student1的那麼也變成了“李四”呢？這就是傳址賦值！
怎麼理解傳址賦值？就好比，你預約了一個裝修工（張師傅）到你家進行裝修，你把你家的地址告訴了他，他順著地址來到你家，按照你的要求，把你家的門弄成紅色。
​
僅僅過了兩天，你覺得不好看，你又找了另一個裝修工（王師傅），你也把地址告訴他，王師傅來到後也是按照你的要求，把門弄成了綠色。
​
最後，不管是張師傅還是王師傅，通過這個地址來到你家的時候，看到的門肯定是綠色的，因為最後一次修改是改成綠色。
​
//張師傅把你家的門改成紅色
var Zhang = {"door":"red"};
//次日，你把地址也告訴了王師傅
var Wang = Zhang;
//王師傅按照地址，去到後把門改成綠色
Wang.door = "green";
​
//最後不管是張師傅還是王師傅來到你家，看到門都是綠色的
console.log(Wang); //結果：輸出 {door: "green"}
console.log(Zhang); //結果：輸出 {door: "green"}
 

講完傳址賦值，回到我們的const關鍵字，用const來宣告一個物件型別的常量，就是傳址賦值。而不可修改的是物件在記憶體中的地址，而不是物件本身（不可變的是你家的地址，而不是你家的門）。

因為修改的只是Person本身，修改的是name屬性和增加一個屬性age，而地址沒變，也不可變，所以並沒有違背常量不可修改的約定。

• 如果這樣寫呢，就會報錯

const Person = {"name":"張三"};
Person.age = 20;
Person = {}; 
//錯誤，企圖給常量Person賦新值（新地址）

const總結

• const關鍵字，大部分特性都跟let的相同，但記住宣告一個物件作為常量的時候要小心。此外附帶講解了傳址賦值的概念，裝修工的例子還算貼切，圖文並茂，比較形象地描述傳址賦值。
• const也是用於宣告一個常量，並必須賦值，聲明後不可修改，跟let一樣，只在塊級作用域起作用，不可重複宣告同一個變數，不會變數提升，宣告引用型別的常量時，要注意是傳址賦值。

瀏覽器相容ES6特性

• 為什麼ES6會有相容性問題？

由於廣大使用者使用的瀏覽器版本在釋出的時候也許早於ES6的定稿和釋出，而到了今天，我們在程式設計中如果使用了ES6的新特性，瀏覽器若沒有更新版本，或者新版本中沒有對ES6的特性進行相容，那麼瀏覽器肯定無法識別我們的ES6程式碼，好比瀏覽器根本看不懂我寫的let和const是什麼東西？

• 如何在瀏覽器相容ES6的特性

針對ES6的相容性問題，很多團隊為此開發出了多種語法解析轉換工具，把我們寫的ES6語法轉換成ES5，相當於在ES6和瀏覽器之間做了一個翻譯官。比較通用的工具方案有babel，jsx，traceur，es6-shim等。
​
此外，瀏覽器自身也加快速度相容ES6的新特性，其中對ES6新特性最友好的是Chrome和Firefox瀏覽器。

• 各大轉換工具、javascript解析引擎對ES6的支援程度情況，可以參檢視這個地址：

http://kangax.github.io/compat-table/es6/

使用轉換工具babel

• 步驟1：製作ES6.html

<script>
  const Name = '張三';//使用新增的關鍵字：const宣告常量
  alert(Name);
</script>

• 步驟2：測試const相容性

我們在chrome瀏覽器（版本不能太低）執行ES6.html，會正常執行，彈出"張三"
​
下來我們執行在IE 9，會看到這樣的情況："語法錯誤"

• 用Babel來相容它

我們可以使用npm來安裝babel，npm是隨同Nodejs一起安裝的包管理工具，新版的nodejs已經繼承了npm，我們只要安裝nodejs即可。

• 步驟3：安裝node
• 步驟4：檢測node是否安裝成功

# 安裝結束後，我們檢測是否安裝成功：
# 點選 “開始”-> “執行”-> 輸入“cmd”-> 進入命令提示符視窗，輸入“node --version”來檢測當前node的版本。
# 出現：v4.4.5就表示安裝成功，因為我們下載的就是v4.4.5LTS。

• 步驟5：用npm安裝babel

# node安裝好了，也就是它整合的npm包管理工具也安裝好了，接下來，我們利用npm來安裝我們最想要的babel。
# 同樣我們啟動命令提示符視窗並且輸入：npm install [email protected]，然後回車，這裡要稍等片刻：
# 看到下面的介面就是表示你安裝babel成功，你會在電腦盤中找到這樣的目錄：C:\Users\Lenovo\node_modules\babel-core（babel安裝地方）

• 步驟6：使用babel

<script src="browser.min.js"></script>
<script type="text/babel">
    const Name = '張三';//使用新增的關鍵字：const宣告常量
    alert(Name);
</script>
​
# 我們把browser.min.js引入（檔案位置的路徑要確保正確）。並且設定第二個script標籤的type為”text/babel”。

• 步驟7：讓const執行在IE9瀏覽器上

這個時候IE9能正常執行我們的ES6新特性了，也就是babel轉換起作用了，將const轉換成IE9能執行的程式碼了。

更多資深講師相關課程資料、學習筆記請入群后向管理員免費獲取，更有專業知識答疑解惑。入群即送價值499元線上課程一份。

QQ群號：560819979

敲門磚（驗證資訊）：陽光三疊