更新時間:2022-10-31 來源:黑馬程序員 瀏覽量:
let是ES6中新增的用于聲明變量的關(guān)鍵字。在ES6之前,使用var關(guān)鍵字來聲明變量。與var關(guān)鍵字相比,let關(guān)鍵字有一些新的特性,下面針對這些新特性進行講解。
使用let關(guān)鍵字聲明的變量具有塊級作用域。塊級作用域有以下兩個作用:①防止代碼塊內(nèi)層變量覆蓋外層變量;②防止循環(huán)變量變成全局變量。為了讓讀者更好地理解,下面將詳細講解塊級作用域這兩個作用的使用場景。
(1)防止代碼塊內(nèi)層變量覆蓋外層變量,示例代碼如下。
< script > if (true){ let a = 10; console.log(a); //輸出結(jié)果:10 } console.log(a): //報錯,a未定義 < /script>
上述代碼中,第3行代碼使用lt關(guān)鍵字在if語句的大括號內(nèi)聲明了一個變量a,此時if語句的大括號內(nèi)就是變量a的塊級作用域范圍。第4行代碼輸出變量a,結(jié)果為10。第6行代碼在let關(guān)鍵字所處的塊級作用域之外輸出變量a,結(jié)果是瀏覽器會在控制臺中報錯,錯誤信息為ais nt defined(a未定義)。這說明let關(guān)鍵字聲明的變量只在所處的塊級作用域內(nèi)有效,也就是說變量a只能在if語句的大括號中被訪問。
(2)防止循環(huán)變量變成全局變量,示例代碼如下。
<script> for (let i = 0; i < 2; i++) { } console.log(i);//報錯,i未定義 </script>
上述代碼中,第2行代碼在for循環(huán)的小括號中使用let關(guān)鍵字聲明了變量i,該變量是與for循環(huán)進行綁定的,只能在for循環(huán)的小括號內(nèi)和大括號內(nèi)訪問。由于在for循環(huán)的外面是訪問不到變量;的,所以第3行代碼嘗試輸出變量i會報錯,錯誤信息為iis not defined(i未定義)。
使用JavaScript中的var關(guān)鍵字聲明變量時,變量可以先使用后聲明,這種現(xiàn)象稱為變量提升。但在其他大多數(shù)編程語言中,變量只有聲明后才可以使用。vau關(guān)鍵字的變量提升很容易給開發(fā)人員帶來困擾。在ES6中,變量的使用規(guī)范更加嚴格,使用let關(guān)鍵字聲明的變量只能在聲明之后才可以使用,否則就會報錯。
下面通過代碼演示let關(guān)鍵字聲明的變量不存在變量提升的現(xiàn)象,示例代碼如下。
<script> console.log(a);//報錯,無法在初始化之前訪問a let a = 10; </script>
上述代碼中,第2行代碼在使用變量a時,因為變量a沒有被定義,所以變量a是不存在的,這時若是使用它,就會報錯誤信息Cannot access' before initialization(無法在初始化之前訪問a)。這表明使用let關(guān)鍵字聲明的變量a不會發(fā)生變量提升。
使用let關(guān)鍵字聲明的變量具有暫時性死區(qū)特性。let關(guān)鍵字聲明的變量不存在變量提升,其作用域都是塊級作用域,在塊級作用域內(nèi)使用let關(guān)鍵字聲明的變量會被整體綁定在這個塊級作用中形成封閉區(qū)域,不再受外部代碼影響,這種特性就稱為“暫時性死區(qū)”。
下面通過代碼演示let關(guān)鍵字聲明的變量的暫時性死區(qū)特性,示例代碼如下。
<script> var num = 10; if (true) { console.log(num); //報錯,無法在初始化之前訪問num let num = 20; } </script>
上述代碼中,第2行代碼在全局作用域下使用var關(guān)鍵字聲明了一個變量mum,賦值為10;第5行代碼在if語句的大括號內(nèi)使用let關(guān)鍵字聲明了相同名字的變量mum,這兩個變量之間是毫無關(guān)系的。根據(jù)let關(guān)鍵字暫時性死區(qū)的特性,第4行代碼在聲明變量num前使用變量mum會出錯。上述代碼執(zhí)行后,在瀏覽器控制臺會看到Cannot access 'num' before initialization(無法在初始化之前訪問num)的錯誤信息。