JavaScript 变量和常量

在 JavaScript 中，变量和常量用于存储和操作数据。理解它们的特性和使用方法对于编写可靠、可维护的代码至关重要。以下是关于 JavaScript 中变量和常量的详细介绍：

1. 变量

变量用于存储信息，你可以在程序的不同地方引用和修改这些信息。JavaScript 提供了三种方式来声明变量：var、let 和 const。

1.1 var

• 作用域：var 声明的变量具有函数作用域（function scope），即变量在声明它的函数内有效。若在函数外声明，则为全局作用域。
• 变量提升：var 声明的变量会被提升到函数顶部，即在声明之前可以访问，但值为 undefined。
• 重声明：可以在同一作用域内重复声明。

示例：

function exampleVar() {
  console.log(x); // undefined，变量提升
  var x = 10;
  console.log(x); // 10
}

exampleVar();

var y = 20;
var y = 30; // 允许重复声明
console.log(y); // 30

1.2 let

• 作用域：let 声明的变量具有块级作用域（block scope），即变量只在包含它的代码块内有效。
• 变量提升：let 变量也会被提升，但在声明之前是不可访问的（会引发 ReferenceError）。
• 重声明：在同一作用域内不能重复声明。

示例：

function exampleLet() {
  // console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 5;
  console.log(a); // 5
}

exampleLet();

let b = 10;
// let b = 15; // SyntaxError: Identifier 'b' has already been declared
console.log(b); // 10

1.3 const

• 作用域：const 声明的常量具有块级作用域（block scope），与 let 相同。
• 变量提升：const 变量也会被提升，但在声明之前不可访问（会引发 ReferenceError）。
• 常量：const 声明的变量在初始化后不能重新赋值，但对于对象和数组，属性或元素是可以修改的。
• 重声明：在同一作用域内不能重复声明。

示例：

function exampleConst() {
  // console.log(c); // ReferenceError: Cannot access 'c' before initialization
  const c = 15;
  console.log(c); // 15
}

exampleConst();

const d = 25;
// d = 30; // TypeError: Assignment to constant variable

const e = [1, 2, 3];
e.push(4); // 允许修改数组元素
console.log(e); // [1, 2, 3, 4]

2. 比较 var、let 和 const

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升	是	是，但暂时性死区	是，但暂时性死区
重新赋值	是	是	否
重复声明	允许	否	否
对象/数组修改	可以	可以	可以（但不可重新赋值）

3. 使用场景

• 使用 var：一般情况下不推荐使用，因为它的作用域和提升特性可能导致意外行为。现代 JavaScript 编码中，通常使用 let 和 const。
• 使用 let：当变量需要在块级作用域内改变值时，使用 let 是合适的选择。例如，循环计数器、局部状态等。
• 使用 const：当变量的值在声明后不应该更改时，使用 const。适用于常量值、函数、对象或数组引用。

4. 实践示例

示例 1：使用 let 和 const 进行块级作用域控制

{
  let blockScoped = 'I am block scoped';
  const constantValue = 100;

  console.log(blockScoped); // I am block scoped
  console.log(constantValue); // 100
}
// console.log(blockScoped); // ReferenceError: blockScoped is not defined
// console.log(constantValue); // ReferenceError: constantValue is not defined

示例 2：避免使用 var

function calculate() {
  var result = 1;
  if (true) {
    var result = 2; // 注意：这里的 `result` 影响到函数的整个作用域
    console.log(result); // 2
  }
  console.log(result); // 2
}

calculate();

示例 3：推荐使用 let 和 const

function calculate() {
  let result = 1;
  if (true) {
    let result = 2; // 块级作用域，不影响外部作用域的 `result`
    console.log(result); // 2
  }
  console.log(result); // 1
}

calculate();

通过掌握 var、let 和 const 的使用方式，你可以编写更加稳定和易于维护的 JavaScript 代码。了解每种声明方式的作用域和特点，将帮助你避免常见的编程错误和陷阱。