在JavaScript中var和let都是用于声明变量的关键字，但它们在作用域规则、变量提升、重复声明等方面存在显著差异。下面详细介绍它们的主要区别：

1. 作用域不同

  • var声明的变量：具有函数作用域（function scope），在函数内声明的var变量在整个函数内都可访问。

  • let声明的变量：具有块级作用域（block scope），只在声明它的代码块（{}内）或子代码块中可访问。

function test() {
    if (true) {
        var a = 10;  // 函数作用域
        let b = 20;  // 块级作用域
    }
    console.log(a);  // 输出: 10 (可以访问，因为a是函数作用域)
    console.log(b);  // 报错: ReferenceError: b is not defined (b只在if块内可用)
}

2. 变量提升（Hoisting）

  • var声明的变量：会被提升到其作用域的顶部，即变量可以在声明前使用（值为undefined）。

  • let声明的变量：不会被提升，存在"暂时性死区"（Temporal Dead Zone）。

console.log(x);  // 输出: undefined (var被提升了)
var x = 5;

console.log(y);  // 报错: ReferenceError (let没有被提升)
let y = 10;

3. “重复声明”

  • var声明的变量：允许在同一作用域内“重复声明”同一个变量。

  • let声明的变量：不允许在同一作用域内“重复声明”同一个变量。

var a = 10;
var a = 20;  // 允许，不会报错，a的值被覆盖为20

let b = 30;
let b = 40;  // 报错: SyntaxError: Identifier 'b' has already been declared

4. 全局对象属性

  • var声明的全局变量：会成为全局对象（如浏览器中的window对象）的属性。

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

var globalVar = 10;
let globalLet = 20;

console.log(window.globalVar);  // 输出: 10 (var声明的全局变量成为window的属性)
console.log(window.globalLet);  // 输出: undefined (let声明的全局变量不是window的属性)

5. 暂时性死区（Temporal Dead Zone）

  • var声明的变量：不存在暂时性死区。

  • let声明的变量：存在暂时性死区，在变量声明前引用该变量会报错。

// let的暂时性死区示例
if (true) {
    // 这里是y的暂时性死区开始
    console.log(y);  // 报错: ReferenceError
    let y = 5;  // 死区结束
    console.log(y);  // 输出: 5
}

6. 在循环中的行为

在循环中使用var和let声明变量，行为差异尤为明显：

// 使用var的情况
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  // 输出5个5，因为i是函数作用域，共享同一个变量
    }, 100);
}

// 注意此示例
for (var i = 0; i < 5; i++) {
    console.log(i); // 输出0, 1, 2, 3, 4，因为每次循环j都是新的变量
}

// 使用let的情况
for (let j = 0; j < 5; j++) {
    setTimeout(function() {
        console.log(j);  // 输出0, 1, 2, 3, 4，因为每次循环j都是新的变量
    }, 100);
}

总结

在现代JavaScript开发中，推荐使用let而不是var，因为let提供了更严格的作用域规则，减少了变量泄漏和意外覆盖的风险，使代码更加安全和可预测。只有在需要兼容旧版JavaScript环境时，才考虑使用var。