一篇文章带你彻底弄懂 var let const 的区别

不是鱼
412 阅读3分钟

在我们现今使用的es6中，新增了let和const两种声明变量和常量的关键字，旨在解决var关键字的一些局限性，与var相比，let和const提供了更加严格以及更符合预期的行为，那他们具体都有一些什么特点呢？

var和let的区别

众所周知，var和let都是声明变量的关键字，他们的区别主要有以下几种：

变量提升和暂时性死区

在javascript中，使用var声明变量会受到变量提升的影响，用var声明的变量都会被提升至其所在作用域的顶部，但要注意只是声明会提升，初始化则不会，所以如果你在初始化var前就访问它那么就会返回undefined:

var i;  //相当于这样
console.log(i);  // undefined
var i = "奶龙";

如果是先初始化再访问的话那就可以正常输出了。

使用let声明的变量也会提升至其所在作用域的顶部，但是与var不同的是，let声明的变量会在初始化之前进入一个暂时性死区，此时访问的话则会导致RefereneceError:

console.log(i);  //ReferenceError: Cannot access 'i' before initialization
let i = 1;

同样先初始化再访问就可以了：

let i = 1;
console.log(i);  //输出1

作用域的不同

JavaScript中变量的作用域有三种：全局作用域、函数作用域和块级作用域，其中函数作用域和快据作用域属于局部作用域。

var关键字只能在全局作用域和声明其的函数作用域中使用，如果在外部访问的话则会报错：

function study(){
    var i = 1;
    console.log(i);  
}
//study();  //输出1

console.log(i);  //ReferenceError: i is not defined

let声明的变量具有块级作用域，只能在块级内部被使用，如果在外部使用则会返回ReferenceError:

if(true){
    let i = 1;
    //console.log(i);  //输出1
}
console.log(i);  //ReferenceError:i is not defined

其他不同

var在作用域内能冗余声明：

var i = 1;
var i = 2;
var i = 3;
console.log(i);

image.png 而let不能冗余声明，多次声明将会报错：

let i = 1;
let i = 2;
console.log(i);

image.png

const的使用

与var和let不同的是，const关键字是用来声明一个常量的，在声明时必须将其初始化，且赋值之后不能二次修改。

    const STUDY = 1;
    const STUDY = 2;
    const STUDY = "sleep"

image.png

const和let一样同样支持块级作用域，在块级作用域外访问将会报错

if(true){
    const xm = {
    name:"study",
    age:18,
    hobbies:["吃饭","睡觉","打豆豆"]
    }
    //console.log(study)  //输出study
}
console.log(study)  //ReferenceError: study is not defined

我们上面说到const被赋值之后不可以再被修改，但是有特殊情况，就是当你用const声明的是一个复杂的数据类型如上面的对象xm，那么就可以改变对象中某一个属性的值：

const xm = {
    name:"study",
    age:18,
    hobbies:["吃饭","睡觉","打豆豆"]
}
study.age = 20;  //改变age属性的值

console.log(study);

输出study之后发现age变成了20 image.png 但仅限于修改已经声明的键值对中的值，并不能增加或减少属性，也不能将属性值的类型改变。

小结

在JavaScript中这三种关键词都是我们频繁使用到的，更早了解其中的细微差异，掌握它们的使用，距离成为前端大佬又更进一步。

avatar
文章
阅读
粉丝