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

你們好，很久不見，通過上次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 = '張三';
}

• 四、不可重複聲明同一個變量，這點跟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 babel-core@5，而後回車，這裏要稍等片刻：
# 看到下面的界面就是表示你安裝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能執行的代碼了。