必经之路 Var、Let、Const 三兄弟

738 阅读2分钟

JS中的变量提升

在JS中有一个变量提升的机制,简单来说就是函数或变量的声明都会提升到变量的最顶端。

    console.log(a);   //undefined
    var a =1
    //在JS的变量提升后相当于
    
    var a;
    console.log(a);
    a =1;

在函数中也会对变量进行提升。

 function fun(){
    console.log(b);
    if(!!b){
        var b = 1;
    }else {
        console.log('b没有被赋值')
    }
 }
 fun();             //undefined   b没有被赋值;
 
 //变量提升后为
 function fun(){
    var b;
    console.log(b);
    if(!!b){
        b =1;
    }else {
        console.log('b没有被赋值')
    }
 }

由于存在变量提升,在JavaScript中甚至可以在使用后才声明,也就是先使用之后在声明变量。

    c =1;
    console.log(c);
    var c;
    //var 会提升在顶部     
    

var的缺点

由于存在变量提升这一机制,我们声明的变量会变成全局变量,从而污染了我们得全局作用域,有时我们更希望变量能在范围内有效,尤其在for循环中,更是希望用完对变量进行销毁,免得引起不必要的麻烦。而ES6中的let和const完美解决了这一问题。

来看一下for和let的区别

    for(var i=0 ; i<7; i++){
        //do something();
    }
    console.log(i);     
    //打印结果是7, 此时i已经成为全局变量,我们更希望他只在for循环中起作用。
    ·········································································
    for(let j=0 ; j<7; j++){
        if(j== 6){
            console.log('只让j在这部分起作用')
        }
    }
    console.log(j)
    //ReferenceError: j is not defined
    //用let声明变量,声明的变量只存在于块级。
    

Let和Const的区别

虽然let和const都是创建块级作用域,但const 经常用来声明一个常量,生命之后值不可改变,也不可再次声明,而且声明的变量必须进行初始化(即对其进行赋值)

虽然const 声明的变量不能更改,但当const声明一个对象时候,对象内部的值是可以进行更改的

const weather ={
    city: 'JiNan',
    temperature: '15'
}
wether.city = 'BeiJing';
console.log(weather);
//  {city: "BeiJing", temperature: "15c"} 

若有不足,欢迎指正