var，let，const的区别

JS中变量的定义方式有四种

不写var，let，const--直接定义变量

a = 10;

使用var关键字定义

var a = 10;

使用let关键字定义

let a = 10;

使用const关键词定义

const a = 10;

var

var定义的变量可以重新声明和修改

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

作用域

• 在函数外部使用var关键字定义的变量是全局变量--在函数内部定义的var变量是局部变量
• 未使用任何关键字定义的变量是全局变量

//在函数外部使用var关键字声明一个变量var1
var var1 = '变量1';
//定义一个函数test1
function test1() {
    //在函数内部不使用关键字定义一个变量var2
    var2 = '变量2';
    //在函数内部使用var关键字声明一个变量var3
    var var3 = '变量3';//局部变量
}
//调用函数
test1();
console.log(var1);//变量1
console.log(var2);//变量2
console.log(var3);//报错--未定义

var声明的全局变量与局部变量重名

//在函数外部使用var关键字定义变量var1
var var1 = '函数外';
function test1() {
  //在函数内部使用var定义变量var1
    var var1 = '函数内';
    //函数内输出var1
    console.log(var1);
}
//调用函数
test1();
//全局作用域输出var1
console.log(var1);

• 函数内部输出的var1是函数内部的局部变量覆盖函数外部的全局变量的结果
• 全局作用域输出为--函数执行完毕--局部变量失效--输出全局变量

块作用域

//使用关键字var声明全局变量a
var a = 1;
//判断a是否和1全等
if (a === 1) {
    //若全等--使用var关键字声明块作用域变量b
    var b = 2;
}
//使用var关键字声明块作用域变量i
for (var i = 0; i < 5; i++) {
    document.write(i);
}
//输出块作用域变量b和i
console.log(b); //2
console.log(i); //5

• 在if块和循环体内部使用var谷关键字定义的变量--是全局变量

变量提升

var变量声明会被提升到其作用域的顶部--并且会使用undefined值对其进行初始化

//在函数外使用var关键字声明变量test_var
var test_var = "函数外的test_var";
//定义函数testFun
function testFun() {
    //打印输出test_var
    console.log(test_var);  //undefined
    //函数内使用var关键字定义的test_var
    var test_var = "函数内的test_var";
    //再次打印输出test_var
    console.log(test_var);  //函数内的test_var
}
//函数执行
testFun();

上述代码执行顺序

//在函数外使用var关键字声明变量test_var
var test_var = "函数外的test_var";
//定义函数testFun
function testFun() {
    //声明被提升到顶部
    var test_var;
    //打印输出test_var
    console.log(test_var);
    //函数内使用var关键字定义的test_var
    test_var = "函数内的test_var";
    //再次打印输出test_var
    console.log(test_var);
}
//函数执行
testFun();

• 代码执行前--变量和函数声明会移至其作用域的顶部
• 变量提升只提升声明部分--不提升赋值部分

let

• let声明的变量可以被修改但不能重新声明

let a = 1;
let a = 3;
console.log(a);`//报错

块作用域

• let关键字有块作用域--块是由{ }界定的代码块--大括号内的任何内容都包含在一个块级作用域中--let声明的函数尽在该块中使用

//在函数外使用let关键字声明变量test_var
let test_var = "函数外的test_var";
//定义函数testFun
function testFun() {
    //打印输出test_var
    console.log(test_var);  //报错
    //在函数内使用let关键字声明变量test_var
    let test_var = "函数内的test_var"
    //打印输出test_var
    console.log(test_var);
}
//函数执行
testFun();

变量提升

• let声明也会被提升到作用域的顶部
  • let声明的变量会被提升到作用域的顶部--但不会对值进行初始化
  • 在声明前使用let变量会报错

//循环体
for (let v = 0; v < 5; v++) {
    //在循环体内输出v
    console.log(v);  //01234
}
//在循环体外输出v
console.log(v);  //报错--未定义

• let关键字声明的变量有块作用域--循环体外不能访问在循环体内部定义的变量

const

• const声明与let声明一样--只能在声明它们的块级作用域内访问
• const不能被修改--也不能被重新声明

const a = 10;
a = 20;  //报错

• const声明必须在声明时进行初始化
• const与let一样--声明会被提升到顶部--但没有初始化

var，let，const的区别

• var声明的变量可以重新声明，可以修改；let声明的变量不能重新声明，但可以修改；const声明的变量不能重新声明也不能修改
• var的作用域是全局作用域或函数作用域，无块级作用域；let和const有块级作用域
• var声明的变量会被提升至作用域的顶部，并赋初始值为undefined；let和const声明的变量会被提升至顶部，但不会赋初始值