let的介紹
let是ES6新增的指令。
作用:聲明變量。
類似于:var。
與var的差別:使用let聲明的變量,隻在其所在的代碼塊内有效。
定義回顧
聲明變量:可以用var,也可以不用var。
是否允許變量提升:允許。
是否允許重複聲明同一個變量:允許。
變量的作用域:全局作用域、函數作用域。
在全局作用域中,無論是否使用var,定義的變量都是全局變量。
在函數作用域中,使用var定義函數局部變量,不使用var定義全局變量。
全局變量全局可用,函數局部變量在函數内可用。
代碼塊:用{}栝起來的代碼片段。
基本文法
let聲明的變量,隻在其所在其所在的代碼塊内有效。
let不存在變量提升。
let不允許重複聲明。
let不允許在函數的一級作用域内重新聲明參數。
let存在的塊級作用域,它聲明的這個變量或“綁定”這個區域,形成“暫時性死區”,使其不再受外部影響。
就是說,一個變量,無論其在外部是否聲明,隻要在某個塊級作用域内使用let重新聲明了,那麼在這個塊級作用域内該變量在聲明前是不可以使用的。
使用場景
for循環的計數器
let聲明的循環變量i隻在本輪循環有效,每一次循環的i都是一個新變量。特别的JavaScript引擎内部會記住上一輪循環的值,初始化本輪的變量i時,是在上一輪循環的基礎上進行計算。
另外,for循環設定循環變量的那部分是一個父作用域,而循環體内部是一個單獨的自作用域。
代碼片段
part 1:var聲明變量回顧
<script type="text/javascript">
var a = 1;
console.log(a); // 1
b = 2;
console.log(b); // 2
console.log(c); //undefined
var c = 3;
var a = 4;
function showA(){
console.log(a);
d = 5;
console.log(d);
}
showA(); // 4,5
console.log(d); //5
function showB(){
console.log(b);
var e = 6;
console.log(e);
}
showB(); //2,6
console.log(e); //報錯
</script>
part 2:let聲明的變量時局部變量
<script type="text/javascript">
{
var a = 1;
let b = 2;
}
console.log(a); //1
console.log(b); //報錯
</script>
part 3:for循環中使用var定義循環參數,該參數會變味全局參數
<script type="text/javascript">
var a = [];
for(var i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[6](); //10
</script>
part 4:for循環中使用let定義循環參數,改參數是塊級作用域内的參數
<script type="text/javascript">
for(let i = 0; i < 10; i++){
}
console.log(i); //報錯
</script>
part 5:對比part3,用var定義循環變量
<script type="text/javascript">
var a = [];
for(let i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[6](); // 6
</script>
part 6:for循環中,外層是一個父作用域,裡面的每層循環是一個自作用域,互不影響
<script type="text/javascript">
for(let i = 0; i < 3; i++){
let i = 'abc';
console.log(i); //abc,abc,abc
}
</script>
part 7:let聲明的變量不允許變量提升
<script type="text/javascript">
console.log(a); //報錯
let a = 1;
</script>
part 8:塊級作用域中用let聲明的變量會形成【暫時性死區】,即使在全局聲明了該變量,也不能在let聲明前調用
<script type="text/javascript">
let a = 1;
console.log(a); //1
{
a = 2;
let a;
console.log(a); // 報錯
}
</script>
part 9:let聲明的變量不允許重複聲明
<script type="text/javascript">
let a = 1;
console.log(a); // 1
let a = 2;
console.log(a); //報錯
</script>
part 10:不允許在函數的一級作用域内使用let重新聲明參數
<script type="text/javascript">
function showName(name){
let name = 'sunny';
console.log(name);
}
showName('lily'); // 報錯
</script>
part 11:可以在函數的二級或三級等作用域内使用let重新聲明參數,且與一級作用域中的參數互不影響
<script type="text/javascript">
function showName(name){
console.log(name);
{
let name = 'sunny';
console.log(name);
}
}
showName('lily'); //lily,sunny
</script>