JavaScript 之 var、let 和 const

var、let 和 const 都是用来声明变量的关键字，但它们之间有一些重要的区别

1.作用域

• var：声明的变量具有函数作用域或全局作用域。
  在函数内部声明的变量只能在该函数内部访问，而在函数外部声明的变量则可以在整个代码文件中访问。
  但是，需要注意的是，var声明的变量存在变量提升（hoisting）现象，即变量声明会被提升到其所在作用域的顶部。

以下为“hoisting现象”的体现

console.log(myVariable); // 输出：undefined，因为变量声明被提升，但赋值没有  
  
var myVariable = 'Hello, world!';  
  
function anotherFunction() {  
    console.log(localVariable); // 输出：undefined，函数内部的变量声明也被提升  
    var localVariable = 'Inside function';  
    console.log(localVariable); // 输出：Inside function  
}  
  
anotherFunction();

• let 和 const：声明的变量具有块级作用域，这意味着它们只在其声明的代码块（例如if语句、for循环等）内有效。
  此外，let 和 const 不存在变量提升，它们在声明之前是不可访问的（会抛出错误）。

体现如下：

if (true) {  
    let blockScopedVariable = 'I am inside the if block';  
    console.log(blockScopedVariable); // 输出：I am inside the if block  
}  
  
// 这里尝试访问 blockScopedVariable 会导致 ReferenceError，因为它只在 if 块内有效  
// console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined  
  
for (let i = 0; i < 5; i++) {  
    // 在这里，变量 i 只在 for 循环的每次迭代中有效  
    console.log(i); // 输出：0, 1, 2, 3, 4  
}  
  
// 这里尝试访问 i 同样会导致 ReferenceError，因为 i 只在 for 循环的块内有效  
// console.log(i); // ReferenceError: i is not defined  
  
{  
    const constantBlockScoped = 'I am in a block';  
    console.log(constantBlockScoped); // 输出：I am in a block  
}  
  
// 这里尝试访问 constantBlockScoped 同样会导致 ReferenceError  
// console.log(constantBlockScoped); // ReferenceError: constantBlockScoped is not defined

2.重新赋值

• var 和 let：声明的变量可以被重新赋值。
• const：声明的变量是常量，不能被重新赋值。一旦为const声明的变量赋值，就不能再改变它的值。但是，如果const声明的是一个对象或数组，那么可以修改对象或数组的内容，只是不能重新指向一个新的对象或数组。

体现如下：

// 使用 const 声明一个对象  
const person = {  
  name: 'Alice',  
  age: 25  
};  
  
// 尝试改变 person 的引用（这是不允许的，会抛出错误）  
// person = { name: 'Bob', age: 30 }; // TypeError: Assignment to constant variable.  
  
// 但是，可以修改 person 对象内部的属性  
person.name = 'Bob';  
person.age = 30;  
  
console.log(person); // 输出：{ name: 'Bob', age: 30 }  
  
// 同样的，对于数组也是如此  
const numbers = [1, 2, 3];  
  
// 尝试改变 numbers 的引用（这也是不允许的）  
// numbers = [4, 5, 6]; // TypeError: Assignment to constant variable.  
  
// 但是，可以修改 numbers 数组内部的元素  
numbers[0] = 4;  
numbers.push(5);  
  
console.log(numbers); // 输出：[4, 2, 3, 5]

3.重复声明

• var：允许在同一个作用域内重复声明同一个变量。
• let 和 const：不允许在同一个作用域内重复声明同一个变量，否则会抛出错误。

体现如下

var x = 10;  
console.log(x); // 输出：10  
  
var x = 20; // 重复声明同一个变量  
console.log(x); // 输出：20，没有错误，变量x的值被重新赋为20


let y = 10;  
console.log(y); // 输出：10  
  
let y = 20; // 尝试重复声明同一个变量  
// 抛出错误：Identifier 'y' has already been declared

const z = 10;  
console.log(z); // 输出：10  
  
const z = 20; // 尝试重复声明同一个变量  
// 抛出错误：Identifier 'z' has already been declared

总结

总结来说，let 和 const 提供了比 var 更严格的作用域控制和更安全的变量管理。
在编写现代JavaScript代码时，通常推荐使用 let 和 const，而避免使用 var，以避免一些潜在的问题和错误。