ECMAScript6塊級作用域及新變量聲明（let）
很多語言中都有塊級作用域，但JS沒有，它使用var聲明變量，以function來劃分作用域，大括號“{}” 卻限定不了var的作用域。用var聲明的變量具有變量提升（declaration hoisting）的效果。
ES6里增加了一個let，可以在{}， if， for里聲明。用法同var，但作用域限定在塊級，let聲明的變量不存在變量提升。
示例1: 塊級作用域 if
function getVal(boo) {
if (boo) {
var val = 'red'
// ...
return val
} else {
// 這里可以訪問 val
return null
}
// 這里也可以訪問 val
}
變量val在if塊里聲明的，但在else塊和if外都可以訪問到val。
把var換成let，就變成這樣了
function getVal(boo) {
if (boo) {
let val = 'red'
// ...
return val
} else {
// 這里訪問不到 val
return null
}
// 這里也訪問不到 val
}
示例2: 塊級作用域 for
function func(arr) {
for (var i = 0; i < arr.length; i++) {
// i ...
}
// 這里也可以訪問到i
}
變量i在for塊里聲明的，但在for外也能訪問到。
把var換成let，for外就訪問不了i
function func(arr) {
for (let i = 0; i < arr.length; i++) {
// i ...
}
// 這里訪問不到i
}
示例3: 變量提升（先使用后聲明）
function func() {
// val先使用后聲明，不報錯
alert(val) // undefined
var val;
}
變量val先使用后聲明，輸出undefined，也不報錯。
把var換成let，就報錯了
function func() {
// val先使用后聲明，報語法錯
alert(val)
let val;
}
示例4: 變量提升（先判斷后聲明）
function func() {
if (typeof val == 'undefined') {
// ...
}
var val = ''
}
使用typeof判斷時也可以再var語句的前面
但把var換成let，if處報語法錯
function func() {
if (typeof val == 'undefined') {
// ...
}
let val = '';
}
ES6規(guī)定，如果代碼塊中存在let，這個區(qū)塊從一開始就形成了封閉作用域。凡是在聲明之前就使用，就會報錯。即在代碼塊內(nèi)，在let聲明之前使用變量都是不可用的。語法上有個術語叫“暫時性死區(qū)”（temporal dead zone），簡稱TDZ。當然TDZ并沒有出現(xiàn)在ES規(guī)范里，它只是用來形象的描述。
let的注意事項
1. 不能重復聲明
// var和let重復聲明 var name = 'Jack'; let name = 'John'; // 兩個let重復聲明 let age = 24; let age = 30;
執(zhí)行時報語法錯
2. 有了let后，匿名函數(shù)自執(zhí)行就可以去掉了
// 匿名函數(shù)寫法
(function () {
var jQuery = function() {};
// ...
window.$ = jQuery
})();
// 塊級作用域寫法
{
let jQuery = function() {};
// ...
window.$ = jQuery;
}
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關文章
本文主要介紹了js實現(xiàn)文字超過顯示寬度每間隔1s自動向左滾動顯示的跑馬燈效果，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
prototype 是在 IE 4 及其以后版本引入的一個針對于某一類的對象的方法，而且特殊的地方便在于：它是一個給類的對象添加方法的方法！2010-05-05
Promise是ES6最重要的特性之一，今天小編就來帶大家一起系統(tǒng)且細致的研究一下Promise的用法以及原理，感興趣的小伙伴可以學習一下哦2023-03-03
js實現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法
這篇文章主要介紹了js實現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法,是非常實用的js窗口效果,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript中使用數(shù)組方法匯總的相關資料,需要的朋友可以參考下2016-02-02
js ondocumentready onmouseover onclick onmouseout 樣式
下面都是一些上面的事件觸發(fā)的事先定義的代碼。2010-07-07
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術,下面這篇文章主要給大家介紹了關于原生Ajax與JQuery?Ajax的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了原生js如何實現(xiàn)表單驗證功能，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
JavaScript使用前綴樹(trie樹)實現(xiàn)文本高亮
這篇文章主要為大家詳細介紹了JavaScript如何使用前綴樹(trie樹)實現(xiàn)文本高亮效果,文中的示例代碼講解詳細,有需要的小伙伴可以參考下2024-04-04
不同的排序算法，執(zhí)行效率有著天壤之別，本腳本用JavaScript演示了各種常見的排序算法，包括：冒泡排序、選擇排序、插入排序、謝爾排序、快速排序(遞歸)、快速排序(堆棧)、歸并排序、堆排序2014-09-09