JavaScript 之 var、let 和 const

1.作用域
2.重新赋值
3.重复声明
总结

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的值被重新赋为20let y = 10;  
console.log(y); // 输出：10  let y = 20; // 尝试重复声明同一个变量  
// 抛出错误：Identifier 'y' has already been declaredconst z = 10;  
console.log(z); // 输出：10  const z = 20; // 尝试重复声明同一个变量  
// 抛出错误：Identifier 'z' has already been declared