ECMAScript 之 Let
栏目: JavaScript · 发布时间: 6年前
内容简介: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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
技术领导之路(中英文对照)
Gerald M.Weinberg / 余晟 / 电子工业出版社 / 2009-12 / 69.00元
《技术领导之路:全面解决问题的途径(中英文对照)》内容简介:搞定技术问题并不简单,但与人打交到也并非易事。作为一个技术专家,你是否在走上管理岗位时遇到了各种不适“症状”?《技术领导之路:解决问题的有机方法》一书将帮助你成为一个成功的解决问题的领导者。书中温伯格从一个反思者的角度阐述了要成为一个成功的解决问题的领导者必备的3个技能——MOI,即激励(Motivation)、组织(Organizati......一起来看看 《技术领导之路(中英文对照)》 这本书的介绍吧!