ES6中變量聲明的方式有哪些

小編給大家分享一下ES6中變量聲明的方式有哪些，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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

1. let

1.1 塊級(jí)作用域

let聲明的變量的作用域是塊級(jí)作用域（這個(gè)特性有點(diǎn)類似于后臺(tái)語(yǔ)言），ES5 并沒有塊級(jí)作用域，只有函數(shù)作用域和全局作用域。

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

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

那么let的塊級(jí)作用域有什么好處呢？

let非常適合用于 for循環(huán)內(nèi)部的塊級(jí)作用域。JS中的for循環(huán)體比較特殊，每次執(zhí)行都是一個(gè)全新的獨(dú)立的塊作用域，用let聲明的變量傳入到 for循環(huán)體的作用域后，不會(huì)發(fā)生改變，不受外界的影響?？匆粋€(gè)常見的面試題目：

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注冊(cè)回調(diào)函數(shù)到異步的宏任務(wù)隊(duì)列。
    console.log(i);        // 執(zhí)行此代碼時(shí)，同步代碼for循環(huán)已經(jīng)執(zhí)行完成
  }, 0);
}
// 輸出結(jié)果
10   （共10個(gè)）
// 這里變量為i的for循環(huán)中，i是一個(gè)全局變量，在全局范圍內(nèi)都有效，所以每一次循環(huán)，新的i值都會(huì)覆蓋舊值，導(dǎo)致最后輸出的是最后一輪i的值，即i的最終結(jié)果為10，實(shí)際上都是console.log(10)。涉及的知識(shí)點(diǎn)：JS的事件循環(huán)機(jī)制，setTimeout的機(jī)制等

把 var改成 let聲明：

for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //當(dāng)前的i僅在本輪的循環(huán)中有效，就是說(shuō)每一次循環(huán)，i其實(shí)都是一個(gè)新產(chǎn)生的變量。                          //用 let 聲明的變量 i 只作用于循環(huán)體內(nèi)部，不受外界干擾。
  }, 0);
}
// 輸出結(jié)果：
0  1  2  3  4  5  6  7  8 9

1.2 暫時(shí)性死區(qū)（Temporal Dead Zone）

在一個(gè)塊級(jí)作用域中，變量唯一存在，一旦在塊級(jí)作用域中用let聲明了一個(gè)變量，那么這個(gè)變量就唯一屬于這個(gè)塊級(jí)作用域，不受外部變量的影響，如下面所示。

var tmp = 'bread and dream';
if(true){
    tmp = 'dream or bread';   //ReferenceError
    let tmp;
}

這個(gè)例子中tmp = 'dream or bread'的賦值會(huì)報(bào)錯(cuò)，因?yàn)樵趇f塊中的let對(duì)tmp變量進(jìn)行了聲明，導(dǎo)致該tmp綁定了這個(gè)作用域，而let臨時(shí)死區(qū)導(dǎo)致了并不能在聲明前使用，所以在聲明前對(duì)變量賦值會(huì)報(bào)錯(cuò)。

暫時(shí)性死區(qū)的本質(zhì)就是，只要一進(jìn)入當(dāng)前作用域，所要使用的變量就已經(jīng)存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現(xiàn)，才可以獲取和使用該變量。

暫時(shí)性死區(qū)的意義也是讓我們標(biāo)準(zhǔn)化代碼，將所有變量的聲明放在作用域的最開始。

1.3 不允許重復(fù)聲明

(1) 在相同的作用域內(nèi)，用let聲明變量時(shí)，只允許聲明一遍，但 var是可以多次聲明的。大家都知道ES5 多次聲明會(huì)造成變量覆蓋而且不會(huì)報(bào)錯(cuò)，這就給調(diào)試增加了難度，而let能夠直接扼殺這個(gè)問(wèn)題在搖籃之中，因?yàn)闀?huì)直接報(bào)錯(cuò)。

// 不報(bào)錯(cuò)
function demo() {
  var a = 'bread and dream';
  var a = 'dream or bread';
}
 
// 報(bào)錯(cuò)，Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  var a = 'dream or bread';
}

// 報(bào)錯(cuò),Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  let a = 'dream or bread';
}

(2) 不能在函數(shù)內(nèi)部重新聲明參數(shù)：

function demo1(arg) {
  let arg; // 報(bào)錯(cuò)
}
demo1()
function demo2(arg) {
  {
    let arg; // 不報(bào)錯(cuò)
  }
}
demo2()

2. const

2.1 用于聲明常量

const聲明的常量是不允許改變的，只讀屬性，這意味常量聲明時(shí)必須同時(shí)賦值， 只聲明不賦值，就會(huì)報(bào)錯(cuò)，通常常量以大寫字母命名。

const Person;   // 錯(cuò)誤，必須初始化 
const Person = 'bread and dream';// 正確

const Person2 = 'no'; 
Person2 = 'dream or bread'; //報(bào)錯(cuò),不能重新賦值

這樣做的兩個(gè)好處：一是閱讀代碼的人立刻會(huì)意識(shí)到不應(yīng)該修改這個(gè)值，二是防止了無(wú)意間修改變量值所導(dǎo)致的錯(cuò)誤。比如我們使用nodejs的一些模塊的時(shí)候，我們只是使用對(duì)應(yīng)的模塊（如http模塊），但是并不需要修改nodejs的模塊，這個(gè)時(shí)候就可以聲明成const，增加了代碼的可讀性和避免錯(cuò)誤。

2.2 支持塊級(jí)作用域

const和let類似，也是支持塊級(jí)作用域.

if (true) {
  const MIN = 5;
}

MIN // Uncaught ReferenceError: MIN is not defined

2.3 不支持變量提升，有暫時(shí)性死區(qū)

const聲明的常量也是不提升，同樣存在暫時(shí)性死區(qū)，只能在聲明的位置后面使用。

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

2.4 特殊情況

如果聲明的常量是一個(gè)對(duì)象，那么對(duì)于對(duì)象本身是不允許重新賦值的，但是對(duì)于對(duì)象的屬性是可以賦值的。

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

實(shí)際上const能保證的，并不是變量的值不得改動(dòng)，而是變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)。

對(duì)于簡(jiǎn)單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址，因此等同于常量。

但對(duì)于復(fù)合類型的數(shù)據(jù)（主要是對(duì)象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針。

至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了。因此，將一個(gè)對(duì)象聲明為常量必須非常小心。

如果要徹底將對(duì)象凍結(jié)（不可修改其屬性），應(yīng)該使用Object.freeze(obj)方法。同理，數(shù)組也是一樣的。

3. import

ES6采用import來(lái)代替node等的require來(lái)導(dǎo)入模塊。

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

$對(duì)象就是jquery中export暴露的對(duì)象。

如果想為輸入的變量重新取一個(gè)名字，import命令要使用as關(guān)鍵字，將輸入的變量重命名。

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

注意，import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。

4. class

ES6引入了類的概念，有了class這個(gè)關(guān)鍵字。類的實(shí)質(zhì)還是函數(shù)對(duì)象。

先定義一個(gè)類：

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

constructor方法，就是構(gòu)造方法，也就是ES5時(shí)代函數(shù)對(duì)象的主體，而this關(guān)鍵字則代表實(shí)例對(duì)象。

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

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

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

其實(shí)，大多數(shù)類的特性都可以通過(guò)之前的函數(shù)對(duì)象與原型來(lái)推導(dǎo)。

生成類的實(shí)例對(duì)象的寫法，與ES5通過(guò)構(gòu)造函數(shù)生成對(duì)象完全一樣，也是使用new命令。

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

在類的實(shí)例上面調(diào)用方法，其實(shí)就是調(diào)用原型上的方法，因?yàn)轭惿系姆椒ㄆ鋵?shí)都是添加在原型上。

Class其實(shí)就是一個(gè)function，但是有一點(diǎn)不同，Class不存在變量提升，也就是說(shuō)Class聲明定義必須在使用之前。

5.總結(jié)

在ES6之前，JavaScript是沒有塊級(jí)作用域的，如果在塊內(nèi)使用var聲明一個(gè)變量，它在代碼塊外面仍舊是可見的。ES6規(guī)范給開發(fā)者帶來(lái)了塊級(jí)作用域，let和const都添加了塊級(jí)作用域，使得JS更嚴(yán)謹(jǐn)和規(guī)范。

let 與 const 相同點(diǎn)：

塊級(jí)作用域
有暫時(shí)性死區(qū)
約束了變量提升
禁止重復(fù)聲明變量

let 與 const不同點(diǎn)：

const聲明的變量不能重新賦值，也是由于這個(gè)規(guī)則，const變量聲明時(shí)必須初始化，不能留到以后賦值。

合理的使用ES6新的聲明方式，不管是面試還是工作中都有實(shí)際的應(yīng)用，尤其是工作中，大家一定要盡量的多使用新的聲明方式，不但可以讓代碼更規(guī)范，更可以避免不必要的bug，浪費(fèi)調(diào)試時(shí)間，進(jìn)而提高工作效率。

看完了這篇文章，相信你對(duì)ES6中變量聲明的方式有哪些有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！