为什么要用 const 和 let，而不是 var？

JavaScript 中有三种方式声明变量：var、let 和 const。其中，var 是早期版本的 JavaScript 中的标准，但随着 ECMAScript 6（ES6）引入了 let 和 const，var 的种种问题也显现出来。今天，我们将探讨为什么你应该避免使用 var，而优先选择 const 和 let。

var 的问题

1. 作用域问题

var 的最大问题之一是作用域是 函数作用域 ，而不是 块级作用域 。这意味着，在 if 或 for 这样的代码块内使用 var 声明的变量，仍然可以在整个函数内访问。

举个例子：

function test() {
    if (true) {
        var name = 'John';
    }
    console.log(name);  // 'John'
}
test();

尽管 name 变量是在 if 语句内部声明的，但由于 var 的作用域是整个函数，所以 name 在 if 语句外部也能访问。

2. 变量提升

var 声明的变量会被"提升"到函数或全局作用域的顶部，这会导致一些难以察觉的错误。

function test() {
    console.log(age);  // undefined，而不是报错
    var age = 26;
}
test();

这里，虽然你期望 age 在声明前不可访问，但实际上它被提升到了函数顶部，只是没有值而已，导致打印的是 undefined。

3. 多次声明不会报错

你可以在同一作用域内多次使用 var 声明相同的变量，JavaScript 也不会报错。

var age = 30;
var age = 40;  // 没有错误
console.log(age);  // 40

这种行为可能会导致不可预测的结果。

let 和 const 的优势

1. 块级作用域

let 和 const 解决了 var 作用域的问题，它们都使用 块级作用域。这意味着它们的作用域仅限于它们被声明的代码块。

if (true) {
    let name = 'Alice';
    console.log(name);  // 'Alice'
}
console.log(name);  // ReferenceError: name is not defined

在这个例子中，name 仅在 if 语句块内部可用，外部无法访问。

2. 避免提升和暂时性死区

let 和 const 不会像 var 那样被提升，它们会进入 暂时性死区（TDZ），即在声明之前访问会抛出错误。

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

3. 常量值

const 用来声明常量，一旦赋值就不能修改。这对避免意外修改变量值非常有用。

const age = 30;
age = 40;  // TypeError: Assignment to constant variable.

何时使用 let 和 const？

• const 优先 ：如果变量的值不会改变，使用 const。它可以帮助你清晰地表达意图，同时避免了修改的错误。
• let ：只有当你知道变量的值将来会发生变化时，才使用 let。

for 循环中的使用

在 for 循环中，let 和 var 的行为大不相同。使用 let，每次迭代都会创建一个新的作用域，避免了 var 的问题。

// 使用 var
for (var i = 0; i < 5; ++i) {
    setTimeout(() => console.log(i), 0);
}
// 输出 5, 5, 5, 5, 5

// 使用 let
for (let i = 0; i < 5; ++i) {
    setTimeout(() => console.log(i), 0);
}
// 输出 0, 1, 2, 3, 4

总结

• 避免使用 var ：var 具有不直观的作用域和提升机制，容易引发错误。
• 优先使用 const ：当变量值不会改变时，使用 const，它能清晰表达你的意图并避免修改错误。
• 使用 let ：当变量值需要改变时，使用 let，它提供了块级作用域。