好家伙,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.全域宣告
區別三:
與var關鍵字不同，使用let 在全域作用域中宣告的變數不會成為window 物件的屬性（var宣告的變數則會）var panghu ="panghu"; console.log(window.panghu);
let kunkun ="kunkun"; console.log(window.kunkun);
補充:
3.4.條件宣告
在使用var 宣告變數時，由于宣告會被提升，JavaScript引擎會自動將多余的宣告在作用域頂部合并為一個宣告， 因為let的作用域是塊，所以不可能檢查前面是否已經使用let宣告過同名變數，同時也就不可能在沒有宣告的情況下宣告它，我們知道,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.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529994.html
標籤：其他