JavaScript中let、const、var 的區別
JavaScript中let、const、var 的區別
目錄:
1.是否存在變數提升?
2.是否存在暫時性死區?
3.是否允許重複宣告變數?
4.是否存在塊級作用域?
-
是否能修改宣告的變數?
在ES5中,宣告變數只有var和function兩種形式。但是因為var宣告的變數會有一定的缺點(內層變數可能覆蓋外層變數的問題以及用來計數的迴圈變數洩露為全域性變數,下面有介紹),ES6提出了使用let和const宣告變數,彌補了ES5中var的缺點。
1.是否存在變數提升?- var宣告的變數存在變數提升(將變數提升到當前作用域的頂部)。即變數可以在宣告之前呼叫,值為undefined。
- let和const不存在變數提升。即它們所宣告的變數一定要在宣告後使用,否 則報ReferenceError錯。
console.log(f) //undefined
var f = 1 ;
console.log(g) //ReferenceError: g is not defined
let g = 2;
console.log(h) //ReferenceError: g is not defined
const h = 2;
2.是否存在暫時性死區?
let和const存在暫時性死區。即只要塊級作用域記憶體在let命令,它所宣告的變數就“繫結”(binding)這個區域,不再受外部的影響。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
//以上程式碼if後面{}形成了塊級作用域,由於使用let宣告瞭tmp,則這個變數就繫結了塊區域,在宣告之前使用,會報錯。在這裡插入程式碼片
在這裡插入程式碼片
在程式碼塊內,使用let命令宣告變數之前,該變數都是不可用的。這在語法上,稱為“暫時性死區”
(temporal dead zone,簡稱 TDZ)。
總之,暫時性死區的本質就是,只要一進入當前作用域,所要使用的變數就已經存在了,但是不可獲取,只有等到宣告變數的那一行程式碼出現,才可以獲取和使用該變數。
3.是否允許重複宣告變數?
var
允許重複宣告變數。let
和const
在同一作用域不允許重複宣告變數。
var f = 4;
var f = 5;
console.log(5) //5
let g = 6;
let g = 7;
console.log(7) //SyntaxError: Identifier 'g' has already been declared
const h = 8;
const h = 9;
console.log(h) //SyntaxError: Identifier 'g' has already been declared
4.是否存在塊級作用域?
- var不存在塊級作用域。
- let和const存在塊級作用域。
什麼是塊級作用域:
ES5中作用域有:全域性作用域、函式作用域。沒有塊作用域的概念。因此也有一系列的問題。
//1,內層變數可能覆蓋外層變數的問題
var a = 2;
function fun(){
console.log(a) //undefined
if(false){
var a = 3;//變數提升帶來的,儘管存在塊級作用域,但是var宣告的變數會跨越這個域。
}
}
fun()
//2,用來計數的迴圈變數洩露為全域性變數。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5 i迴圈結束後,洩露成了全域性變數
ECMAScript 6(簡稱ES6)中新增了塊級作用域。塊作用域由{ }包括,if語句和for語句裡面的{ }也屬於塊作用域。
//1,解決內層變數可能覆蓋外層變數的問題
var b = 2;
function fun1(){
console.log(b) //2 訪問的外層變數
if(false){
let b = 3;//不存在變數提升,變數存在於塊級作用域之中。
}
}
fun1()
//2,解決用來計數的迴圈變數洩露為全域性變數。
var s1 = 'hello';
for (let j = 0; j < s1.length; j++) {
console.log(s1[j]); //j存在於塊級作用域之中,和其繫結
}
console.log(j); // 報錯 j is not defined
5. 是否能修改宣告的變數?
var
和let
可以。const
宣告一個只讀的常量。一旦宣告,常量的值就不能改變。const
宣告的變數不得改變值,這意味著,const
一旦宣告變數,就必須立即初始化,不能留到以後賦值。
const f = 10;
// f= 11;
// console.log(f) //報錯 不能進行重複宣告
const obj = {
name: '小明',
age: 18
}
obj.age = 20
console.log(obj) //{ name: '小明', age: 20 }
//const宣告常量,不允許對變數重新賦值。對於引用型別的值而言,只要在棧記憶體儲存的地址值不變即可。
相關文章
- JavaScript中的var、let 及 const 區別JavaScript
- let const var 區別
- var let const區別
- let,const,var區別
- var、const、let 的區別
- JavaScript 中的 Var,Let 和 Const 有什麼區別JavaScript
- JS中const、var 和let的區別JS
- var、let和const的區別
- var和let/const的區別
- 【前端面試】(四)JavaScript var let const的區別前端面試JavaScript
- ES6中var,let,const的區別
- ES6中var/let/const的區別
- var、let、const宣告變數的區別變數
- ES6中let和var和const的區別
- es6 let const與var 的區別
- JavaScript 高階—— ES6新增語法 const(let const var區別)JavaScript
- var與ES6中const、let宣告的變數的區別變數
- js中 let 與 var 的區別JS
- var、let、const變數宣告的區別及特點變數
- 【ES6】var、let、const三者的區別
- var、let和const三者有哪些區別?
- When to use var vs let vs const in JavaScriptJavaScript
- [譯] 在JavaScript中何時使用var、let及constJavaScript
- var 和 let 的區別
- let與var的區別
- js中var和let的快速區別JS
- ES5 和 ES6:let const var 區別
- 深入理解ES6之var,let,const區別
- 1分鐘帶你瞭解var let 和 const 的區別
- TypeScript let與var的區別TypeScript
- 變數和函式宣告提升,let和var const區別變數函式
- ES6中的let與var的區別
- let與const區別
- 淺談let和var的區別
- 教你理解let和var的區別
- var、let和const的知識點
- var與let宣告變數的區別變數
- var,let和const深入解析(一)