ES6中const怎么用

這篇文章給大家分享的是有關ES6中const怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

關鍵字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 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能執行的代碼了。

感謝各位的閱讀！關于“ES6中const怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！