var、const、let的区别

---

目录

一、作用域

二、变量提升（Hoisting）

三、重复声明

四、 赋值和重新赋值

五、全局对象属性

六、使用场景

七、声明和赋值的数据类型

---

一、作用域

var 声明的变量在函数作用域内有效，如果在函数外声明，它将成为全局变量。

let 和 const 声明的变量在块级作用域内有效，例如在 {} 内。这可以防止变量泄漏到外部作用域。

function fun1() {
    if (true) {
        var i1 = 1;
    }
    console.log("fun1:" + i1)   // 输出 "fun1:1"，因为 var 具有函数级作用域，i1 在整个函数内可见
}

function fun2() {
    if (true) {
        let i2 = 2;
    }
    console.log("fun2:" + i1)   // 报错，因为 i2 在块级作用域内，无法在块之外访问
}

function fun3() {
    if (true) {
        const i3 = 3;
    }
    console.log("fun3:" + i3)   // 报错，因为 i3 在块级作用域内，无法在块之外访问
}

二、变量提升（Hoisting）

var 声明的变量会被提升到它所在函数或全局作用域的顶部，但初始化的值不会提升，会是 undefined。

let 和 const 声明的变量也会被提升，但在初始化之前访问会导致暂时性死区（Temporal Dead Zone），不能访问它们。

function fun4() {
    console.log(i4); // 输出 "undefined"
    var i4 = 4;
    console.log(i4); // 输出 "4"
    
    console.log('--------------------------------------');
    console.log(i5); // 报错
    let i5 = 5;
    console.log(i5); // 报错

    console.log('--------------------------------------');
    console.log(i6); // 报错
    const i6 = 6;
    console.log(i6); // 报错
}

三、重复声明

在同一作用域内，var 允许重复声明同一个变量。

let 和 const 不允许在同一作用域内重复声明同一个变量。

function fun5(){
    var i7 = 7;
    var i7 = 77;    //合法的重复声明，i7 的值变为 77
    console.log(i7) //输出77
    console.log('--------------------------------------');

    let i8 = 8;     //编译报错
    let i8 = 88;    //编译报错

    const i9 = 9;   //编译报错
    const i9 = 99;  //编译报错
}

四、 赋值和重新赋值

var 和 let 可以被赋值和重新赋值。

const 声明的变量一旦赋值就不能再次赋值，它们是常量。

function fun6() {
    var i10 = 10;
    i10 = 100;  // 合法，var 可以重新赋值
    console.log(i10);   //输出100
    console.log('--------------------------------------');

    let i11 = 11;
    i11 = 111;  // 合法，let 可以重新赋值
    console.log(i11);   //输出111
    console.log('--------------------------------------');

    const i12 = 12;
    i12 = 122;  //编译报错 const 声明的变量不能重新赋值
}

五、全局对象属性

var 声明的全局变量会成为全局对象（例如 window）的属性。

let 和 const 声明的变量不会成为全局对象的属性。

var i13 = 13;
let i14 = 14;
const i15 = 15;
function fun7() {
    console.log(window.i13);    // 输出 "13"，var 变量成为全局对象的属性
    console.log('--------------------------------------');

    console.log(window.i14);    // 输出 "undefined"，let 变量不会成为全局对象的属性
    console.log('--------------------------------------');

    console.log(window.i15);    // 输出 "undefined"，const 变量不会成为全局对象的属性
}

六、使用场景

推荐使用 let 和 const，因为它们提供了更可控的作用域和避免了一些常见的问题，如变量提升和重复声明。

使用 const 来声明常量，使用 let 来声明需要重新赋值的变量。

function fun8() {
    var i16 = 16;
    i16 += 16;
    console.log(i16);   //输出 32，i16 被重新赋值

    let i17 = 17;
    i17 += 17;
    console.log(i17);   //输出 34，i17 被重新赋值

    const i18 = 18;
    i18 += 18;          //编译报错，const常量不可重新赋值
    console.log(i18);
}

七、声明和赋值的数据类型

var、let 和 const 都可以用来声明并赋值各种JavaScript数据类型 ：

1. 基本数据类型：

   • 字符串（String）

   • 数字（Number）

   • 布尔值（Boolean）

   • 空（null）

   • 未定义（undefined）

2. 引用数据类型：

   • 对象（Object）

   • 数组（Array）

   • 函数（Function）

   • Map

   • Set 

                等......

这些关键字可以用于声明和操作各种数据类型的变量。可以用来声明字符串、数字、数组、对象等等。例：

var name = "John"; // 字符串
let age = 30; // 数字
const fruits = ["apple", "banana", "cherry"]; // 数组
const person = { firstName: "John", lastName: "Doe" }; // 对象

---