初探ECMAScript 6

xiaotianyi 發布于2019-08-23 15:36 / 1720人閱讀

摘要：變量用命令聲明，不會發生變量提升。報錯不報錯塊級作用域實際上為新增了塊級作用域。這表示外層代碼塊不受內層代碼塊的影響。以下兩行都會報錯聲明變量的六種方法只有兩種聲明變量的方法命令和命令。之中，頂層對象的屬性與全局變量是等價的。

let 與 cost

1.使用 let 關鍵字聲明變量，與使用 var 關鍵字聲明變量書寫方式一致；

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代碼在代碼塊之中，分別用 let 和 var 聲明了兩個變量。然后在代碼塊之外調用這兩個變量，結果let聲明的變量報錯，var聲明的變量返回了正確的值。這表明，let聲明的變量只在它所在的代碼塊有效。

通過一個簡單的循環來初步了解使用 let 關鍵字聲明變量 與 傳統的 var 關鍵字聲明變量的區別

      var a = [];
      for (var i = 0; i < 10; i++) {
        a[i] = function() {
          console.log(i);
        };
      }
      a[6](); // 10

上面代碼中，變量i是var命令聲明的，在全局范圍內都有效，所以全局只有一個變量i。每一次循環，變量i的值都會發生改變，而循環內被賦給數組a的函數內部的console.log(i)，里面的i指向的就是全局的i。也就是說，所有數組a的成員里面的i，指向的都是同一個i，導致運行時輸出的是最后一輪的i的值，也就是 10。

      var a = [];
      for (let i = 0; i < 10; i++) {
        a[i] = function() {
          console.log(i);
        };
      }
      a[6](); // 6

而這段代碼中，變量i是let聲明的，當前的i只在本輪循環有效，所以每一次循環的i其實都是一個新的變量，所以最后輸出的是6。你可能會問，如果每一輪循環的變量i都是重新聲明的，那它怎么知道上一輪循環的值，從而計算出本輪循環的值？這是因為 JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算。

2.不存在變量提升

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

上面代碼中，變量foo用var命令聲明，會發生變量提升，即腳本開始運行時，變量foo已經存在了，但是沒有值，所以會輸出undefined。變量bar用let命令聲明，不會發生變量提升。這表示在聲明它之前，變量bar是不存在的，這時如果用到它，就會拋出一個錯誤。

3.暫時性死區

在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時性死區”（temporal dead zone，簡稱 TDZ）

if (true) {
  // TDZ開始
  tmp = "abc"; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ結束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上面代碼中，存在全局變量tmp，但是塊級作用域內let又聲明了一個局部變量tmp，導致后者綁定這個塊級作用域，所以在let聲明變量前，對tmp賦值會報錯

4.不允許重復聲明

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

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函數內部重新聲明參數。

function func(arg) {
  let arg;
}
func() // 報錯

function func(arg) {
  {
    let arg;
  }
}
func() // 不報錯

5.塊級作用域

let實際上為 JavaScript 新增了塊級作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函數有兩個代碼塊，都聲明了變量n，運行后輸出 5。這表示外層代碼塊不受內層代碼塊的影響。如果兩次都使用var定義變量n，最后輸出的值才是 10

6.const

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值

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

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

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

const聲明的常量，也與let一樣不可重復聲明。

var message = "Hello!";
let age = 25;

// 以下兩行都會報錯
const message = "Goodbye!";
const age = 30;

ES6 聲明變量的六種方法
ES5 只有兩種聲明變量的方法：var命令和function命令。ES6 除了添加let和const命令;還有import命令和class命令（這兩與本文關系不大，了解即可）

7.頂層對象的屬性

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

window.a = 1;
a // 1

a = 2;
window.a // 2

上面代碼中，頂層對象的屬性賦值與全局變量的賦值，是同一件事。
ES6 為了改變這一點，一方面規定，為了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；另一方面規定，let命令、const命令、class命令聲明的全局變量，不屬于頂層對象的屬性
而在ES6（ECMAScript 6 以下簡稱 ES6）語法中，就會報錯

var a = 1;
let b = 1;
window.b // undefined

上面代碼中，全局變量a由var命令聲明，所以它是頂層對象的屬性；全局變量b由let命令聲明，所以它不是頂層對象的屬性，返回undefined。

GPU云服務器云服務器 ECMAScript 6 ECMAScript ECMAScript6 初探webrtc

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

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

ES6初探

摘要：可以直譯為古怪到有魅力。里面基本上這些是被弱化了的，或者說是被隱藏起來了。而之前的的語法使得入門的門檻變高了。但是，于此同時，作為語言的獨特魅力被削弱了。應該說，理解這些傳統的語法對也很有意義。因為畢竟這些只是被隱藏，而不是被剔除。這兩天在看React的一些東西。接觸到了ES6。談談一些粗淺的看法。 ES6其實是個簡稱。這東西學名叫做ECMAScript 2015，或者ES 2015...

tianyu 2019-08-19 18:10 評論0 收藏0
node初探以及與瀏覽器的差異

摘要：當發出一個請求的時候，如果這個請求需要等待，那就會被放入隊列中，如果有別的請求發出，并且無需等待則立刻做出處理，之后，再調用該請求的回調。差異相對于瀏覽器而言是沒有對象的也沒有瀏覽器安全級別的限制也不具備只能運行 node初體驗 1、node環境 node 是一個服務端JavaScript解析器，node中this指向global，而在瀏覽器中this指向window 所以unde...

Caicloud 2019-08-22 11:15 評論0 收藏0
this 初探

摘要：經濟基礎決定上層建筑。以下暫不考慮嚴格模式。在全局執行下，無論是否在嚴格模式下，指向全局對象。在其他函數內部的箭頭函數，這些箭頭函數的保留。當一個用于在的事件監聽中，指向這個元素。經濟基礎決定上層建筑。我來了學習，記錄，備忘。感謝參考過的所有資料的作者。嗯，能看源碼的就不要看文檔，能看英文文檔的就不要看中文文檔，能自己上手驗證的就不要僅僅參考。請保持質疑。深有所感。 t...

weij 2019-08-23 10:25 評論0 收藏0
React初探

摘要：綁定事件后的返回值。設置屬性，將要設置的新屬性，該狀態會和當前的合并，可選參數，回調函數。方法與類似，但它會刪除原有強制更新參數說明，可選參數，回調函數。判斷組件掛載狀態返回值或，表示組件是否已掛載到中方法用于判斷組件是否已掛載到中。 React 特點聲明式設計 ?React采用聲明范式，可以輕松描述應用。高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。靈活...

張金寶 2019-08-20 14:45 評論0 收藏0
Android Flutter實踐內存初探

摘要：摘要實踐內存初探閑魚技術匠修我們想使用來統一移動開發并做了一些實踐。將內存管理分為新生代和老年代。在標記階段，所有線程參與并發的完成對回收對象的標記，降低標記階段耗時。的首幀渲染耗時較高，在版本有明顯感受，大概會黑屏秒，版本會好很多。摘要： Android Flutter實踐內存初探閑魚技術-匠修我們想使用Flutter來統一移動App開發并做了一些實踐。移動設備上的資源有限，通常...

dabai 2019-08-16 12:38 評論0 收藏0