這篇文章主要介紹了ECMAScript6塊級作用域及新變量聲明(let) 的相關資料,需要的朋友可以參考下

很多語言中都有塊級作用域，但JS沒有，它使用var聲明變量，以function來劃分作用域，大括號“{}” 卻限定不了var的作用域。用var聲明的變量具有變量提升(declaration hoisting)的效果。

ES6里增加了一個let，可以在{}， if， for里聲明。用法同var，但作用域限定在塊級，let聲明的變量不存在變量提升。

示例1: 塊級作用域 if

1. function getVal(boo) { 
2. if (boo) { 
3. var val = 'red' 
4. // ... 
5. return val 
6. } else { 
7. // 這里可以訪問 val 
8. return null 
9. } 
10. // 這里也可以訪問 val 
11. } 

變量val在if塊里聲明的，但在else塊和if外都可以訪問到val。

把var換成let，就變成這樣了

1. function getVal(boo) { 
2. if (boo) { 
3. let val = 'red' 
4. // ... 
5. return val 
6. } else { 
7. // 這里訪問不到 val 
8. return null 
9. } 
10. // 這里也訪問不到 val 
11. }　 

示例2: 塊級作用域 for

1. function func(arr) { 
2. for (var i = 0; i < arr.length; i++) { 
3. // i ... 
4. } 
5. // 這里也可以訪問到i 
6. } 

變量i在for塊里聲明的，但在for外也能訪問到。

把var換成let，for外就訪問不了i

1. function func(arr) { 
2. for (let i = 0; i < arr.length; i++) { 
3. // i ... 
4. } 
5. // 這里訪問不到i 
6. } 

示例3: 變量提升(先使用后聲明)

1. function func() { 
2. // val先使用后聲明，不報錯 
3. alert(val) // undefined 
4. var val; 
5. } 

變量val先使用后聲明，輸出undefined，也不報錯。

把var換成let，就報錯了

1. function func() { 
2. // val先使用后聲明，報語法錯 
3. alert(val) 
4. let val; 
5. }　 

示例4: 變量提升(先判斷后聲明)

1. function func() { 
2. if (typeof val == 'undefined') { 
3. // ... 
4. } 
5. var val = '' 
6. } 

使用typeof判斷時也可以再var語句的前面

但把var換成let，if處報語法錯

1. function func() { 
2. if (typeof val == 'undefined') { 
3. // ... 
4. } 
5. let val = ''; 
6. } 

ES6規定，如果代碼塊中存在let，這個區塊從一開始就形成了封閉作用域。凡是在聲明之前就使用，就會報錯。即在代碼塊內，在let聲明之前使用變量都是不可用的。語法上有個術語叫“暫時性死區”(temporal dead zone)，簡稱TDZ。當然TDZ并沒有出現在ES規范里，它只是用來形象的描述。

let的注意事項

1. 不能重復聲明

1. // var和let重復聲明 
2. var name = 'Jack'; 
3. let name = 'John'; 
4.  
5. // 兩個let重復聲明 
6. let age = 24; 
7. let age = 30; 

執行時報語法錯

2. 有了let后，匿名函數自執行就可以去掉了

1. // 匿名函數寫法 
2. (function () { 
3. var jQuery = function() {}; 
4. // ... 
5. window.$ = jQuery 
6. })(); 
7.  
8. // 塊級作用域寫法 
9. { 
10. let jQuery = function() {}; 
11. // ... 
12. window.$ = jQuery; 
13. } 

以上所述就是本文的全部內容了，希望大家能夠喜歡。