ES2015入門系列2-let和const

godiscoder 發(fā)布于2019-08-20 17:37 / 1679人閱讀

摘要：新增了兩個(gè)變量修飾關(guān)鍵字它們都是塊級別的，那什么是塊簡單的來說，塊就是一組花括號中間的部分。全局變量使用基本上可以不用了

ES2015 新增了兩個(gè)變量修飾關(guān)鍵字:

let

const

它們都是塊級別的，那什么是塊？簡單的來說，塊就是一組花括號中間的部分。

Var

為了理解let我們先從var說起，如下代碼:

function checkStatus(status) {
  if (status) {
    var statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}
checkStatus(true);
checkStatus(false);

在 Chrome Console 中運(yùn)行后，獲得結(jié)果:

ok
undefined

我們在false條件中加入一行代碼：

function checkStatus(status) {
  if (status) {
    var statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
    console.log(abc);//執(zhí)行后會(huì)輸出: Uncaught ReferenceError: abc is not defined(…)
  }
}
checkStatus(true);
checkStatus(false);

對于初次接觸JavaScript的后端程序員來說，會(huì)覺得非常奇怪，在傳入false的時(shí)候?yàn)槭裁吹玫降膕tatusLabel是undefined而不是變量未定義？而嘗試輸出abc就能得到變量未定義的錯(cuò)誤呢？

這是因?yàn)樵贘avaScript中使用var定義的變量會(huì)被預(yù)先提升到作用域最開始的地方(這里就是這個(gè)function), 在這個(gè)例子中也就是if位置的上面, 代碼就可以寫成:

function checkStatus(status) {
  var statusLabel;
  if (status) {
    statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}

這是JavaScript獨(dú)有的, 所以之前定義變量的好的習(xí)慣就是在所有可能會(huì)使用的地方之前定義好，如此，才不會(huì)產(chǎn)生各種奇怪奇怪的問題。

Let

let就是新的 var，和var不同的是它是塊級的，將上面的代碼中的var換成let

function checkStatus(status) {
  if (status) {
    let statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}
checkStatus(true);
checkStatus(false);

這樣的到的結(jié)果就是我們設(shè)想的，true的時(shí)候是ok， false的時(shí)候拋出變量不存在的錯(cuò)誤，如果false的時(shí)候想要輸出undefined, 那么就要手動(dòng)定義在 if 的上面:

function checkStatus(status) {
  let statusLabel;
  if (status) {
    statusLabel = "ok"
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}
checkStatus(true);
checkStatus(false);

const

const 和 let 一樣是塊級, 從名字上看是用來常量的，其實(shí)不然，正確的說法是 single-assignment, 也就是說只能對其進(jìn)行一次賦值并且只能在定義的時(shí)候賦值，后面如果再想對其進(jìn)行賦值操作就會(huì)報(bào)錯(cuò)。

const PI = 3.1415926;
PI = 2.0; //報(bào)錯(cuò)，Uncaught TypeError: Assignment to constant variable.

但是，這不代表const定義的就不可以改變的(immutable), 如下代碼:

const animals = ["rabbit", "monkey"];
console.log(animals); //["rabbit", "monkey"]
animals.push("donkey");
console.log(animals);//["rabbit", "monkey", "donkey"]
animals = ["bird"]; //報(bào)錯(cuò)，Uncaught TypeError: Assignment to constant variable.

那如何決定該使用哪種關(guān)鍵詞呢？

這個(gè)目前社區(qū)沒有統(tǒng)一的規(guī)范，不過本人比較喜歡下面這種，即：

優(yōu)先使用let

常量用const, 如常規(guī)常量, 導(dǎo)入的模塊等等。

全局變量使用var (基本上可以不用了?)