【JavaScript】--- let 和 var 的区别

在 ES6 之前，JavaScript 只有两种作用域：全局作用域 和 局部作用域 ，在 ES6 中新增了关键字 let ，它引入了块级作用域。

块级作用域

{
    var a = 1;
}
//这里可以使用 a

{
    let b = 1;
}
//这里不可以使用 b

全局变量

在函数体外或代码块外使用 var 和 let 类似，二者的作用域都是全局的。

var a = 1;    //全局作用域
let b = 1;    //全局作用域

局部变量

在函数体内使用 var 和 let 类似，二者的作用域都是局部的。

function myFunc1() {
    var a = 1;    //局部作用域
}

function myFunc2() {
    let a = 1;    //局部作用域
}

重新声明变量

var a = 1;
{
    var a = 2;
}
//这里输出 a 为 2

var b = 1;
{
    let b =2;
}
//这里输出 b 为1

循环作用域

var i = 5;
for(var i = 0; i < 10; i++) {
    //...
}
//循环后i为10

let i = 5;
for(let i = 0; i< 10; i++) {
    //...
}
//循环后i为5

使用 var 声明的全局变量是 window 对象的属性，let 不是。

var a = 1;    //可以使用 window.a 访问变量a
let b = 1;    //不可以使用 window.b 访问变量b

重置变量

//var 声明的变量，可以在任何地方修改
var a = 1;
var a = 2;    //合法


//在相同的作用域中，不能使用 let 来重置 var 声明的变量
var a = 1;
let a = 2;    //不合法

{
    var b = 1；
    let b = 2;    //不合法
}


//在相同的作用域中，不能使用 let 来重置 let 声明的变量
let a = 1;
let a = 2;    //不合法

{
    let b = 1;
    let b = 2;    //不合法
}


//在相同的作用域中，不能使用 var 来重置 let 声明的变量
let a = 1;
var a = 2;    //不合法

{
    let b = 1;
    var b = 2;    //不合法
}


//let 在不同的作用域中，可以进行重置
let a = 1;
{
    let a = 2;    //合法
}

变量提升

使用 var 声明的变量，可以先使用再声明，但 let 不可以。

a = 2;
b = 2;    //不合法

var a = 1;
let b = 1;

笔者寄语：点滴积累，成就梦想！