ES6中新的變數宣告方式介紹（附程式碼）

這篇文章帶給大家的內容是關於ES6中新的變數宣告方式介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在ES5中，變數宣告只有var和function以及隱式宣告三種，在ES6中則增加了let、const、import和class四種。

1. let

1.1 區塊級作用域

let宣告的變數的作用域是區塊級作用域（這個特性有點類似後台語言），ES5 並沒有區塊級作用域，只有函數作用域和全域作用域。

{
  let a = 'ES6';
  var b = 'ES5';
}

console.log(b)  // ES5 
console.log(a)  // ReferenceError: a is not defined.

那麼let的區塊級作用域有什麼好處呢？

let非常適合用於 for迴圈內部的區塊級作用域。 JS中的for迴圈體比較特殊，每次執行都是一個全新的獨立的區塊作用域，用let宣告的變數傳入到 for迴圈體的作用域後，不會改變，不受外界的影響。看一個常見的面試題目：

for (var i = 0; i <p>把var改成let宣告：</p><pre class="brush:php;toolbar:false">for (let i = 0; i <p>1.2 暫時性死區（Temporal Dead Zone）</p><p>在一個區塊層級作用域中，變數唯一存在，一旦在區塊級作用域中用let聲明了一個變量，那麼這個變數就唯一屬於這個區塊級作用域，不受外部變數的影響，如下面所示。 </p><pre class="brush:php;toolbar:false">var tmp = 'bread and dream';
if(true){
    tmp = 'dream or bread';   //ReferenceError
    let tmp;
}

這個例子中tmp = 'dream or bread'的賦值會報錯，因為在if區塊中的let對tmp變數進行了聲明，導致該tmp綁定了這個作用域，而let臨時死區導致了並不能在聲明前使用，所以在聲明前對變數賦值會報錯。

暫時性死區的本質就是，只要一進入目前作用域，所要使用的變數就已經存在了，但是不可獲取，只有等到宣告變數的那一行程式碼出現，才可以取得並使用該變數。

暫時性死區的意義也是讓我們標準化程式碼，將所有變數的宣告放在作用域的最開始。

1.3 不允許重複宣告

(1) 在相同的作用域內，用let宣告變數時，只允許宣告一遍，但 var是可以多次宣告的。大家都知道ES5 多次聲明會造成變數覆蓋而且不會報錯，這就給調試增加了難度，而let能夠直接扼殺這個問題在搖籃之中，因為會直接報錯。

// 不报错
function demo() {
  var a = 'bread and dream';
  var a = 'dream or bread';
}
 
// 报错，Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  var a = 'dream or bread';
}

// 报错,Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  let a = 'dream or bread';
}

(2) 無法在函數內部重新宣告參數：

function demo1(arg) {
  let arg; // 报错
}
demo1()
function demo2(arg) {
  {
    let arg; // 不报错
  }
}
demo2()

#2. const

2.1 用來宣告常數

#const聲明的常數是不允許改變的，只讀屬性，這意味著常數聲明時必須同時賦值， 只聲明不賦值，就會報錯，通常常量以大寫字母命名。

const Person;   // 错误，必须初始化 
const Person = 'bread and dream';// 正确

const Person2 = 'no'; 
Person2 = 'dream or bread'; //报错,不能重新赋值

這樣做的兩個好處：一是閱讀程式碼的人立刻會意識到不應該修改這個值，二是防止了無意間修改變數值所導致的錯誤。例如我們使用nodejs的一些模組的時候，我們只是使用對應的模組（如http模組），但並不需要修改nodejs的模組，這個時候就可以宣告成const，增加了程式碼的可讀性和避免錯誤。

2.2 支援區塊級作用域

const和let類似，也是支援區塊級作用域.

if (true) {
  const MIN = 5;
}

MIN // Uncaught ReferenceError: MIN is not defined

2.3 不支援變數提升，有暫時性死區

const宣告的常數也是不提升，同樣存在暫時性死區，只能在宣告的位置後面使用。

if (true) {
  console.log(MIN); // ReferenceError
  const MIN = 5;
}

2.4 特殊情況

如果聲明的常數是一個對象，那麼對於對象本身是不允許重新賦值的，但是對於對象的屬性是可以賦值的。

const obj = {};
obj.a = 'xiao hua';
console.log(obj.a);    //'xiao hua'

實際上const能保證的，並不是變數的值不得改動，而是變數指向的那個記憶體位址所保存的資料不得改動。

對於簡單類型的資料（數值、字串、布林值），值就保存在變數指向的那個記憶體位址，因此等同於常數。

但對於複合類型的資料（主要是物件和陣列），變數指向的記憶體位址，保存的只是一個指向實際資料的指標。

至於它所指向的資料結構是不是可變的，就完全不能控制了。因此，將一個物件聲明為常數必須非常小心。

如果要徹底凍結物件（不可修改其屬性），應該使用Object.freeze(obj)方法。同理，數組也是一樣的。

3. import

ES6採用import來取代node等的require來導入模組。

import {$} from './jquery.js'

$物件就是jquery中export暴露的物件。

如果想為輸入的變數重新取一個名字，import指令要使用as關鍵字，將輸入的變數重新命名。

import { JQ as $ } from './jquery.js';

注意，import指令具有提升效果，會提升到整個模組的頭部，首先執行。

4. class

ES6引進了類別的概念，有了class這個關鍵字。類別的實質還是函數物件。

先定義一個類別：

//定义类
class Animal {
  constructor(name, age) {
        this.name = name;
        this.age = age;
  }    
  setSex(_sex) {
        this.sex=_sex;
  }
}

constructor方法，就是建構方法，也就是ES5時代函數物件的主體，而this關鍵字則代表實例物件。

上面的類別也可以改成ES5的寫法：

function Animal(name, age){
        this.name = name;
        this.age = age;
}

Animal.prototype.setSex = function (_sex) {
        this.sex=_sex;
}

其實，大多數類別的特性都可以透過先前的函數物件與原型來推導。

生成类的实例对象的写法，与ES5通过构造函数生成对象完全一样，也是使用new命令。

class Animal {}
let dog = new Animal();

在类的实例上面调用方法，其实就是调用原型上的方法，因为类上的方法其实都是添加在原型上。

Class其实就是一个function，但是有一点不同，Class不存在变量提升，也就是说Class声明定义必须在使用之前。

5.总结

在ES6之前，JavaScript是没有块级作用域的，如果在块内使用var声明一个变量，它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域，let和const都添加了块级作用域，使得JS更严谨和规范。

let 与 const 相同点：

块级作用域
有暂时性死区
约束了变量提升
禁止重复声明变量

let 与 const不同点：

const声明的变量不能重新赋值，也是由于这个规则，const变量声明时必须初始化，不能留到以后赋值。

合理的使用ES6新的声明方式，不管是面试还是工作中都有实际的应用，尤其是工作中，大家一定要尽量的多使用新的声明方式，不但可以让代码更规范，更可以避免不必要的bug，浪费调试时间，进而提高工作效率。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

以上是ES6中新的變數宣告方式介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！