好家伙,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/529980.html

標籤：JavaScript

上一篇：記錄--uniapp map 制作一個簡單的地圖導航

下一篇：Vue Router

第一百零六篇:變數的不同宣告(var,let和const的不同)

1.變數

2.var宣告

2.1.var宣告作用域

2.2.var宣告提升

3.let宣告

3.1.對宣告冗余(重復宣告同一變數)報錯不會因混用let和var影響

3.2.暫時性死區

3.3.全域宣告

4.const 宣告

5.for回圈中的let和var