《红宝书》 |var、let和const的区别

概念

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

共通

定义多个变量，逗号隔开

var message="hi",found=false,age="29";

声明与赋值

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同样适用于函数作用域。

if(true){
    var age=19;
    console.log(age)//19
}
console.log(age)//19

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
  }