js中var、let和const的区别

1.var声明

•  存在变量提升，声明时如果不初始化会默认赋值为undefined，不会报错

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

等价于

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

• 可以重复声明相同的变量名
• 可以跨块访问，但不能跨函数块返回

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

function add(){
    var b = 6
} 

console.log(b)   //b is not define

• 全局作用域中声明的变量会变成windows对象的属性

 var a = 1;
 console.log(window.a);   // 1

 

2.let声明

• let声明的范围是块级作用域，在块（即{}）使用let定义后，对块的外部无影响

 let c = 3;
 console.log('函数外let定义c：' + c);//输出c=3
 function change(){
 let c = 6;
 console.log('函数内let定义c：' + c);//输出c=6
 } 
 change();
 console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3

 

• let声明的变量不会在作用域中被提升

console.log(age)  //ReferenceError:age 没有定义

let age = 26

//这种情况被称为“暂时性死区”

• 使用let在全局作用域中声明的变量不会成为window对象的属性，但相应的变量会在页面的生命周期内存续

let age = 26

console.log(window.age)  //undefined

3.const声明

• 声明的变量不可以修改，而且必须初始化，如果声明的是一个引用类型，则不能改变它的内存地址
• const声明的作用域也是块

 const b = 2;//正确
 // const b;//错误，必须初始化 
 console.log('函数外const定义b：' + b);//有输出值
 // b = 5;
 // console.log('函数外修改const定义b：' + b);//无法输出
 const c = {
      name:'Tom'
  }
 c.name = 'Jerry'     //success
 c = {name: 'Jerry' }  //Uncaught TypeError : Assignment to constant variable 

4.声明方式风格及最佳实践

• 不使用var

       限制自己只使用let和const有助于提升代码质量，因为变量有了明确的作用域、声明位置以及不变的值

• const优先，let次之

​​​​​​​      使用const声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。因此，很多的开发者认为应该优先使用const来声明变量，只在提前知道未来会有修改时，再使用let。这样可以让开发者更有信心推断某些变量的值永远不会变， 同时也能迅速发现因意外赋值导致的非预期行为