ES6 - let和const 1.var let和const的特性:

1.var

特點有三:

  • 變量生命提升
  • 可重複定義同一個名字的變量不報錯
  • 全局變量掛載到window

let和const的特性:

  • 沒有變量生命提升
  • 不能重複聲明同一個變量,即使是var過的變量,甚至是行參也不行。
  • 聲明的變量不會掛載到window上
  • 有塊級作用域的特點
  • 在大括號{}裏邊會形成臨時死區
  • 可解決閉包問題。
  • [const特殊] var和let定義變量,const定義常量
console.log(a) //undefined a 變量提升到前面,相當於 var a
var a=10;

這裏曾經出現過一個笑話

console.log(name)//10
var name=10
//這裏我毫不猶豫想的肯定是undefined ,其實打印的是10,因爲name是JavaScript內置的對象。
//name不是關鍵字,是window下自有的屬性。所以一般不會用name當做變量名使用

let 和 const 聲明的變量沒有變量提升。

console.log(a);//報錯 Cannot access 'a' before initialization
//變量無法提升;
let a = 10;

console.log(b);//報錯 Cannot access 'b' before initialization
//變量無法提升;
const b = 10;

var 能重複聲明。

var a = 10;
var a = 20;
console.log(a)//20

let 和 const 不能重複聲明。

let a = 10;
let a = 20;//報錯Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 10;
const b = 20;//報錯 'b' has already been declared

var 和 let 聲明時可以不用設置初始值。

var a,let b;
a = 10;
b = 20;
console.log(a,b)//10,20

const 聲明時必須設置初始值,不能使用 null 佔位。

const a;
a = 20;//報錯 Missing initializer in const declaration

var 沒有塊級作用域

for(var i=0;i<3;i++){
  console.log(i);//0,1,2
}
console.log(i);//3,沒有塊級作用域,外層也能訪問

if(true){
  var a = 10;
}
console.log(a);//10

let 和 const 有塊級作用域

for(let i=0;i<3;i++){
  console.log(i);//0,1,2
}
console.log(i);//報錯 i is not defined,有塊級作用域,外層不能訪問

if(true){
  let a = 10;
}
console.log(a);//報錯 a is not defined

if(true){
  const b = 10;
}
console.log(b);//報錯 b is not defined

var 不存在暫時性死區

 var a = 10;
 if(true){
    console.log(a);//10
    var a = 20;
  }

let 和 const 存在暫時性死區

var a = 10;
if(true){
      console.log(a);//報錯 Cannot access 'a' before initialization
      let a = 20;
 }
 
var b = 10;
if(true){
      console.log(b);//報錯 Cannot access 'b' before initialization
      const b = 20;
 }


常見面試題

function sayHi() {
  console.log(name)
  console.log(age)
  var name = 'Lydia'
  let age = 21
}

sayHi() //undefined 和 ReferenceError
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

// 0 1 2 和 3 3 3
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章