ECMAScript 6 入門學習-let、const

參考文檔:https://es6.ruanyifeng.com/#docs/let

一、ES6簡介

ES6 是 5.1 版以後的 JavaScript 的下一代標準,本書中提到 ES6 的地方,一般是指 ES2015 標準,但有時也是泛指“下一代 JavaScript 語言”。

Babel

Babel 是一個廣泛使用的 ES6 轉碼器,可以將 ES6 代碼轉爲 ES5 代碼,從而在老版本的瀏覽器執行。

二、let和const

  1. let 是塊級作用域, var 是函數作用域。

2、for循環使用let保證計數器只在循環體內有效,使用var運行結果可能會有差異

說明:

左例中的i是var聲明,全局範圍有效且只有一個變量i。此時result數組每一個元素中的i都是相同的。

右例中的i是let聲明,當前的i只在本輪循環有效,每一次循環的i其實都是一個新的變量

注意:for循環特別之處是設置循環變量的那部分是一個父作用域,而循環體內部是一個單獨的子作用域。

3、let不存在變量提升

var命令會發生“變量提升”現象,即變量可以在聲明之前使用,值爲undefined

4、暫時性死區(temporal dead zone,簡稱 TDZ)

只要塊級作用域內存在let命令,它所聲明的變量就“綁定”(binding)這個區域。

在代碼塊內,使用let命令聲明變量之前,該變量是不可用。

4、1注意:“暫時性死區”意味着typeof不再是一個百分之百安全的操作,不會報undefined!

typeof x; // ReferenceError
let x;

4、2隱蔽的死區

// 不報錯
var x = x;
// 報錯
let x = x;
// ReferenceError: x is not defined

5、不允許重複聲明:

let不允許在相同作用域內,重複聲明同一個變量。

注意:不能在函數內部重新聲明參數,但是在for循環中可以

6、塊級作用域

ES5 只有全局作用域和函數作用域,沒有塊級作用域,出現如下問題:

(1)內層變量可能會覆蓋外層變量

(2)var聲明的計數循環變量泄露爲全局變量

ES6的塊級作用域

任意嵌套、內層作用域可以定義外層作用域的同名變量

7、塊級作用域與函數聲明

ES5:函數只能在頂層作用域和函數作用域之中聲明,不能在塊級作用域聲明

非法聲明

{
  function a() {
  }
}

 ES6 :塊級作用域之中,函數聲明語句的行爲類似於let,在塊級作用域之外不可引用

8、ES6的瀏覽器實現有自己的行爲方式如下

  • 允許在塊級作用域內聲明函數。
  • 函數聲明類似於var,即會提升到全局作用域或函數作用域的頭部。
  • 同時,函數聲明還會提升到所在的塊級作用域的頭部。

 

 

const命令

1、const聲明一個只讀的常量。一旦聲明,常量的值就不能改變,所以必須在聲明時給初值。

const a;
//SyntaxError: Missing initializer in const declaration


const a = 1;
a = 2; 
//TypeError: Assignment to constant variable.

2、塊級作用域

const的作用域與let命令相同:只在聲明所在的塊級作用域內有效。

const命令聲明的常量也是不提升,同樣存在暫時性死區,只能在聲明的位置後面使用。

特殊:const實際上保證的,並不是變量的值不得改動,而是變量指向的那個內存地址所保存的數據不得改動。對於簡單類型的數據(數值、字符串、布爾值),值就保存在變量指向的那個內存地址,因此等同於常量。但對於複合類型的數據(主要是對象和數組),變量指向的內存地址,保存的只是一個指向實際數據的指針,const只能保證這個指針是固定的(即總是指向另一個固定的地址),至於它指向的數據結構是不是可變的,就完全不能控制了。

例1:

const a = {"a":1};
a.a = 2;
console.log(a);
//輸出:

{ a: 2 }

例2:

const a = {};
a = {};
TypeError: Assignment to constant variable.

3、將對象凍結,應該使用Object.freeze方法。

 

ES6聲明變量的6種方法:

varfunction、let、const、import、class

 

頂層對象的屬性

頂層對象,在瀏覽器環境指的是window對象,在 Node 指的是global對象。ES5 之中,頂層對象的屬性與全局變量是等價的。

從 ES6 開始,全局變量將逐步與頂層對象的屬性脫鉤。 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章