ES2015入門系列2-let和const

godiscoder 發布于2019-08-20 17:37 / 1684人閱讀

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

ES2015 新增了兩個變量修飾關鍵字:

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 中運行后，獲得結果:

ok
undefined

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

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

對于初次接觸JavaScript的后端程序員來說，會覺得非常奇怪，在傳入false的時候為什么得到的statusLabel是undefined而不是變量未定義？而嘗試輸出abc就能得到變量未定義的錯誤呢？

這是因為在JavaScript中使用var定義的變量會被預先提升到作用域最開始的地方(這里就是這個function), 在這個例子中也就是if位置的上面, 代碼就可以寫成:

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

這是JavaScript獨有的, 所以之前定義變量的好的習慣就是在所有可能會使用的地方之前定義好，如此，才不會產生各種奇怪奇怪的問題。

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);

這樣的到的結果就是我們設想的，true的時候是ok， false的時候拋出變量不存在的錯誤，如果false的時候想要輸出undefined, 那么就要手動定義在 if 的上面:

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

const

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

const PI = 3.1415926;
PI = 2.0; //報錯，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"]; //報錯，Uncaught TypeError: Assignment to constant variable.

那如何決定該使用哪種關鍵詞呢？

這個目前社區沒有統一的規范，不過本人比較喜歡下面這種，即：

優先使用let

常量用const, 如常規常量, 導入的模塊等等。

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

GPU云服務器云服務器 es6-系列入門系列課程深度學習入門系列課程 spark入門實戰系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83731.html

es6快速入門

摘要：快速入門簡介以下簡稱是語言的下一代標準，已經在年月正式發布了。而且聲明后必須立即初始化賦值，不能后面賦值。方法默認返回實例對象即，可以指定返回另外一個對象。參數搭配的變量是一個數組，該變量將多余的參數放入數組中。 es6快速入門 showImg(https://segmentfault.com/img/remote/1460000008519223?w=560&h=314); ES6簡...

liujs 2019-08-20 14:39 評論0 收藏0
ES2015入門系列5-解構賦值

摘要：用過的同學肯定見過類似下面的代碼這就是為帶來的另一個新的語法解構賦值。解構賦值是用來讓我們從數組或者對象中提取數據賦值給不同的變量。解構賦值操作不會拋錯，如果沒有找到，將會用賦值過去。用過ReactNative的同學肯定見過類似下面的代碼: import { Text, View } from react-native; 這就是ES2015為JavaScript帶來的另一個新的語法：...

chuyao 2019-08-20 17:40 評論0 收藏0
[ ES6 ] 快速掌握常用 ES6 （一）

摘要：常量變量先說說常量和變量的概念吧，常量是說那種進行一次賦值后不會更改的值，比如說游戲賬戶的，變量是說賦值后有更改的需求的，比如游戲名，游戲密碼。常用實例交換變量的值提取數據解構賦值對提取對象中的數據，尤其有用。本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》學習 20% 的知識完成 80% 的工作關于 ...

ispring 2019-08-23 14:01 評論0 收藏0
2017-06-29 前端日報

摘要：前端日報精選如何在非項目中使用知乎專欄編碼規范最常被遺忘的性能優化瀏覽器緩存個人文章譯統一樣式語言掘金新的開發者提及最多的個視頻眾成翻譯中文第期在中使用譯統一樣式語言掘金前端現狀答題救不了前端新人相學長懟前端歲以 2017-06-29 前端日報精選如何在非 React 項目中使用 Redux - 知乎專欄Javascript編碼規范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 評論0 收藏0
帶你入門 JavaScript ES6 (一)

摘要：是國際組織于年月日發布的第六版，正式名為通常被成為或。二模版字面量提供一種簡單實現表達式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實現字符串拼接操作。本文同步帶你入門 JavaScript ES6 (一)，轉載請注明出處。 ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 評論0 收藏0