第一百零六篇:變數的不同聲明(var,let和const的不同)
- 2022 年 11 月 8 日
- 筆記
好傢夥,JS基礎接著學,
本篇內容為《JS高級程式設計》第三章學習筆記
1.變數
ECMAScript 變數是鬆散類型的，意思是變數可以用於保存任何類型的數據。
(確實鬆散,不像C或C++那樣,分int,float,char等等…,一個變數可以用來保存任何類型的數據)
每個變數只不過是一個用於保存任意值的命名佔位符。有3個關鍵字可以聲明變數：
var、const 和let
其中，var 在 ECMAScript的所有版本中都可以使用，而const和1et只能在ECMAScript 6及更晚的版本中使用。
2.var聲明
用var聲明的變數可以保存任何類型的值
在不進行初始化的情況下,變數會保存一個特殊值undifined
var panghu;
console.log(panghu);
看圖:
2.1.var聲明作用域
function test(){
var panghu = "panghu";
}
test();
console.log(panghu);
看圖:
在函數內忽略var聲明變數,可以聲明一個全局變數
function test(){
panghu = "panghu";
}
test();
console.log(panghu);
看圖:
至此,我們可以得出:
使用var操作符定義的變數會成為包含它的函數的局部變數
(人話翻譯:在函數內使用var聲明變數,那麼該變數的作用域在該函數內)
2.2.var聲明提升
使用var關鍵字聲明的變數會自動提升到函數作用域的頂部
(僅僅是聲明提升,不包含賦值操作)
(程式碼拿前面的掉一下順序就好了)
在這裡我們可以看到,panghu在console.log(panghu);前就已經被聲明了,
再看一個例子
兩次輸出內容不同
由此,我們知道
function test(){
var panghu = "panghu";
console.log(panghu);
}
test();
與
function test(){
var panghu;
console.log(panghu);
panghu = "panghu";
}
test();
兩者等價
這便是”變數提升”了
3.let聲明
let和var的作用差不多,但也有所區別,
區別1:var聲明的範圍是函數作用域,而let聲明的範圍是塊作用域,
舉例子:
if(1){ var panghu = "panghu"; console.log("第一次輸出"+panghu); } console.log("第二次輸出"+panghu); if(1){ let kunkun = "kunkun"; console.log("第三次輸出"+kunkun); } console.log("第四次輸出"+kunkun);
看圖
一個例子很好的說明了,
let聲明的變數,到了塊作用域外就寄了
而var聲明的變數,依舊好好活著
這兩個關鍵字聲明的並不是不同類型的對象,
他們只是指出變數在相關作用域如何存在
3.1.對聲明冗餘(重複聲明同一變數)報錯不會因混用let和var影響
(四個排列組合告訴你,不要重複聲明變數)
3.2.暫時性死區
區別二:let沒有”變數提升”
console.log(panghu);
var panghu;
console.log(kunkun);
let kunkun;
(let聲明的變數,寄)
在let聲明之前執行的瞬間被稱為”暫時性死區”,
在此階段引用任何後面才聲明的變數都會報錯:ReferenceError
3.3.全局聲明
區別三:
補充:
3.4.條件聲明
我們知道,var可以多次聲明,而let多次聲明會報錯,因此,let是更為嚴謹的
4.const 聲明
const的行為基本與let相同,兩者作用域同樣為”塊”
但仍有區別(怎麼可能會沒有區別)
聲明變數時必須同時初始化變數,
且const聲明的變數無法修改,
有趣的是,如果const變數引用的是一個對象,
那麼修改這個對象內部的屬性並不違反const的”禁止修改”
const panghu ={}; panghu.age = 20; console.log(panghu.age);
看圖:
這樣的寫法是完全可行的
5.for循環中的let和var
我們用let和var聲明的變數分別來跑一次for循環
一切正常;
然後我們改一下
for(var i=0;i<8;i++){ setTimeout(()=>console.log(i),0); } for(let j=0;j<8;j++){ setTimeout(()=>console.log(j),0); }
看圖:
之所以會這樣，是因為在退出循環時，迭代變數保存的是導致循環退出的值：8。
在之後執行超時邏輯時，所有的i都是同一個變數，因而輸出的都是同一個最終值。
而在使用let聲明迭代變數時，JavaScript引擎在後台會為每個迭代循環聲明一個新的迭代變數。
)每個setTimeout 引用的都是不同的變數實例，所以console.log輸出的是我們期望的值，
也就是循環執行過程中每個迭代變數的值。
(神奇的JS)
That’s all.
