ECMAScript 之 Let

栏目: JavaScript · 发布时间: 5年前

内容简介：ECMAScript 2015 是 JavaScript 歷史上最重要的一次升級，也讓 JavaScript 終於趕上主流程式語言的高度，若要明顯的分辨 ES5 與 ES6，最明顯的方式的方式就是看有沒有使用ECMAScript 2015宣告變數於 block

ECMAScript 2015 是 JavaScript 歷史上最重要的一次升級，也讓 JavaScript 終於趕上主流程式語言的高度，若要明顯的分辨 ES5 與 ES6，最明顯的方式的方式就是看有沒有使用 let 與 const 。

Verson

ECMAScript 2015

Let

宣告變數於 block {} 、statement 或 expression 內。

var 宣告變數於 function 內或 function 外 (global)

Scope

scope01.js

function varTest() {
  var x = 1;

  if (true) {
    var x = 2;
    console.log(x);
  }

  console.log(x);
}

varTest();
// 2
// 2

ES5 與 ES6 都可執行。

實際執行為

function varTest() {
  var x;
  x = 1;

  if (true) {
    x = 2;
    console.log(x);
  }

  console.log(x);
}

varTest();
// 2
// 2

因為 Hoisting， var x 被移到最上層，scope 為 function 內，因此離開 if (true) 仍然為 2 。

scope02.js

function letTest() {
  let x = 1;

  if (true) {
    let x = 2;
    console.log(x);
  }

  console.log(x);
}

letTest();
// 2
// 1

ES5 沒有 let 無法執行。

第 4 行

if (true) {
  let x = 2;
  console.log(x);
}

使用 let 後，其 scope 為 block {} ，只有在 {} 為 2 ，離開 {} 就變回 1 。

以主流程式語言而言，變數的 scope 都是 block {} ，而非 function，因此 ECMAScript 的 let 較符合大家的習慣，如此就可如 C# 一樣，將變數宣告在程式碼要用的地方，而不是宣告在 function 最前面，因此 TC39 建議全面使用 let 取代 var

scope03.js

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11;
  let b = 22;

  console.log(a);
  console.log(b); 
}

console.log(a);
console.log(b);
// 11
// 22
// 11
// 2

第 9 行

console.log(b);  // 22

因為 let b = 22 ，為 block level。

13 行

console.log(b); // 2

因為 var b = 2 ，為 global level。

scope04.js

function foo(cnt) {
  for(var i = 0; i < cnt; i++) {
  }
  console.log(i);
}

foo(5);
// 5

var 為 function level，因此 for loop 執行完還存在。

scope05.js

function foo(cnt) {
  for(let i = 0; i < cnt; i++) {
  }
  console.log(i);
}

foo(5);
// ReferenceError

let 為 block level，超出 for loop 就抓不到了。

for loop 應全面使用 let 避免 Side Effect

Redeclaration

redeclaration01.js

var x = 2;
console.log(x);

var x = 3;
console.log(x);
//2
//3

ES5 與 ES6 都可以執行。

var 允許對變數重複宣告。

redeclaration02.js

let x = 2;
console.log(x);

let x = 3;
console.log(x);
// SyntaxError

ES5 與 ES6 都無法執行。

let 不允許對變數重複宣告。

redeclaration03.js

function foo(x) {
  switch(x) {
    case 0:
      var y = 2;
      console.log(y);
      break;
    case 1:
      var y = 3;
      console.log(y);
      break;
  }
}

foo(1);
// 3

ES5 與 ES6 都可執行。

實際執行時

function foo(x) {
  var y;
    
  switch(x) {
    case 0:
      y = 2;
      console.log(y);
      break;
    case 1:
      y = 3;
      console.log(y);
      break;
  }
}

foo(1);
// 3

因為 var 會 Hoisting，所以允許 redeclaration。

redeclaration04.js

function foo(x) {
  switch(x) {
    case 0:
      let y = 2;
      console.log(y);
      break;
    case 1:
      let y = 3;
      console.log(y);
      break;
  }
}

foo(1);

若將 var 改成 let ，則 ES5 與 ES6 都無法執行。

因為 let 認 {} 為 scope，不允許 redeclaration。

redeclaration05.js

function foo(x) {
  switch(x) {
    case 0: {
      let y = 2;
      console.log(y);
      break;
    }
    case 1: {
      let y = 3;
      console.log(y);
      break;
    }
  }
}

foo(1);

在每個 case 加上 {} ，則可以 redeclaration。

Conclusion

var 為 function level 或 global level；而 let 為 block level

Sample Code

完整的範例可以在我的 GitHub 上找到

Reference

MDN JavaScript , let

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

ECMAScript 之 Let

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Sexy Web Design

Elliot Stocks / SitePoint / 2009-03-28 / $39.95

Description A guide to building usable, aesthetically pleasing interfaces for web sites and web applications by applying timeless principles of user-centered design. This book focuses on practical ......一起来看看《Sexy Web Design》这本书的介绍吧!

码农工具