var、let和const的区别

391 阅读3分钟

概念

变量是一个用于保存任意值的命名占位符。

声明与赋值

var和let允许先声明后赋值;const不允许,它声明变量时必须同时初始化变量。

var message;	//undifined
message='hi';	//hi
let message;	//undifined
message='hi';	//hi

const age;	//SyntaxError

修改变量

var和let允许修改变量的值与类型;而const不允许。

//改变值
var massage1='hi';
massage1='hello';

//改变类型
var age=1;
age='hello';
const age=19;
age=32	//TypeError
age='one'//TypeError

如果const声明的是引用值(对象)。这时不可改变变量的引用,但可以修改这个对象内部的属性:

const person={};
person={a:1} //TypeError
person.name='xiaoming'

如果同时要限制键的修改,可以使用Object.freeze()

声明提升

var定义的变量的声明会提升;let和const不会。

function foo(){
    console.log(age)
    var age=26
}
foo()//undefined

等价于

function foo(){
    var age
    console.log(age)
    age=26
}
foo()//undefined

因此,var可以反复定义同一个变量而let和const不可以:

function foo(){
    var age=18
    var age=26
    console.log(age)
}
foo()//26
//由于声明提升,相当于在函数顶部声明了age,后面的定义相当于重新赋值

声明提升:声明的变量会提升到函数作用域顶部

重复声明

var允许重复声明;let和const不允许。

var name;
var name;
let name;
let name;//SyntaxError:name已被定义过
const name;
const name;//SyntaxError:name已被定义过

声明作用域

var声明的是函数作用域;let和const声明的是块级作用域。

function test(){
    var age=2;
}
test()
console.log(age) //ReferenceError

函数作用域:在函数内定义变量,该变量会成为函数的局部变量,变量会在函数退出时被销毁。

块级作用域({})是函数作用域的子集,所以let和const同样适用于函数作用域。

//块级作用域
//1.对于var,外部可访问
if(true){
    var age=19;
    console.log(age)//19
}
console.log(age)//19

//2.对于let,外部不可访问
if(true){
    let age=19;
    console.log(age)//19
}
console.log(name)//ReferenceError:age没有定义

全局声明

var在全局作用域中声明的变量会成为window对象的属性;let和const不会。

var name='lihua';
console.log(window.name)//lihua

let name='lihua';
console.log(window.name)//undefined

如果变量前没有关键词,表示创建了全局变量:

function test(){
    age=2;
}
console.log(age)//2
console.log(window.age)//2

全局作用域:直接编写在 script 标签之中或单独的JS文件中的JS代码,都是全局作用域;全局作用域在页面打开时创建,页面关闭时销毁;

暂时性死区

由于let的变量不会在作用域中提升,所以let不能引用未声明的变量,在let声明之前的执行瞬间被称为“暂时性死区”,在此阶段引用任何后面才声明的变量都会抛出ReferenceError

console.log(age);//ReferenceError:age没有定义
let age=18;

for循环中的变量声明

  • 对于var

    循环定义的迭代变量会渗透到循环体外部。

    for(var i=0;i<5;i++){
      //...
    }
    console.log(i)//5
    
  • 对于let

    循环定义的迭代变量不会渗透

    for(let i=0;i<5;i++){
      //...
    }
    console.log(i)//ReferenceError:i没有定义
    
  • 对于const

    不能用来声明迭代变量

    for(const i=0;i<5;i++){
      console.log(i)//TypeError:给常量赋值
    }
    

    除非这个变量不会修改

    for(const j=7;i<5;i++){
      console.log(j)//7,7,7,7,7
    }
    for(const key in {a:1,b:2}){
      console.log(key)//a,b
    }
    for(const value of [1,2,3,4,5]){
      console.log(value)//1,2,3,4,5
    }