1. 程式人生 > 實用技巧 >Js變數:var,let,const三個關鍵字的區別

Js變數:var,let,const三個關鍵字的區別

var在ECMAScript的所有版本中都可以使用,而const和let只能在ES6及更晚的版本中使用。

var,let,const三個關鍵字的區別

var:

1)宣告作用域:在函式內部,使用var定義一個變數(區域性變數),在函式被呼叫完之後,該變數會被立即銷燬。在定義變數時如果省略var,就會建立一個全域性變數(不建議在區域性作用域中定義全域性變數,難維護,而且在嚴格模式下,會導致丟擲ReferenceError)。

2)宣告提升:把所有變數宣告都拉到函式作用域的頂部。

function foo(){ console.log(age); var age = 18;}

等價於

function foo(){

var age; console.log(age); age = 18;}foo();//undefined

3)可以反覆多次使用var宣告同一個變數。

function foo(){var age = 16;var age = 1;var age = 2;console.log(age);}foo();//2

4)全域性宣告:使用var在全域性作用域中宣告的變數會成為window物件的屬性。

var age = 18;console.log(window.age);//18

let:

1)宣告作用域:let宣告的是塊作用域,而var宣告的是函式作用域。塊作用域是函式作用域的子集,所以var作用域的限制同時也適用於let。

//varif(true){ var age = 18; console.log(age);//18}console.log(age);//18
//letif(true){ let age = 18; console.log(age);//18}console.log(age);//ReferenceError:age沒有定義

2)宣告提升:let宣告的變數不會在作用域中被提升

3)不可以在一個塊中反覆多次使用let宣告同一個變數

let age;let age;//SyntaxError,識別符號age已經宣告過了

4)全域性宣告:使用let在全域性作用域中宣告的變數不會成為window物件的屬性,但是var宣告的變數會。

let age = 18;console.log(window.age);//undefined

5)條件宣告:在使用var宣告變數時,由於宣告會被提升,js會自動將多餘的宣告在作用域頂部合併為一個宣告。而因為let的作用域是塊,所以不可能檢查前面是否已經使用let宣告過同名變數。因此對於let,不能依賴條件宣告模式。

6)for迴圈中的let宣告:在用let宣告迭代變數時,js在後臺會為每個迭代變數宣告一個新的迭代變數,每個setTimeout引用的都是不同的迭代變數。for-in 和for-of都適用。

for(var i=0;1<5;i++){}console.log(i); //5
for(let i=0;1<5;i++){}console.log(i); //ReferenceError:i沒有定義

for(var i=0;1<5;i++){ setTimeout(()=>console.log(i),0);}//會輸出5,5,5,5,5
for(let i=0;1<5;i++){ setTimeout(()=>console.log(i),0);}//會輸出0,1,2,3,4

const:

1)const的行為和let基本相同,唯一的區別是const它宣告變數時必須同時初始化變數,且嘗試修改const宣告的變數會導致執行時錯誤(TypeError)。

2)不允許重複宣告

3)作用域也是塊

4)const宣告的限制只適用於它指向的變數的引用。換句話說,如果const變數引用的是一個物件,那麼修改這個物件內部的屬性並不違反const的限制。

const person = {};person.name = "QiuYing";

5)不能用const宣告迭代變數,因為迭代變數會自增。但是可以宣告一個不會被修改的for迴圈變數。這對for-in 和for-of迴圈特別有意義。

宣告風格及最佳實踐:先使用const,let次之,不使用var。