大家好，好久不見，經過上次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的支援程度情況，可以參檢視這個地址：

使用轉換工具babel

步驟1：製作ES6.html

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 babel-core@5，然後回車，這裡要稍等片刻：

# 看到下面的介面就是表示你安裝babel成功，你會在電腦盤中找到這樣的目錄：C:UsersLenovonode_modulesbabel-core（babel安裝地方）

步驟6：使用babel

const Name = '張三';//使用新增的關鍵字：const宣告常量

alert(Name);

</script>

# 我們把browser.min.js引入（檔案位置的路徑要確保正確）。並且設定第二個script標籤的type為”text/babel”。

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

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

const的使用和lES6的相容處理|-ES6連載2

相關文章