3. JavaScript 变量声明

合集 - JavaScript基础(6)

1.0 JavaScript高级程序设计（第4版）【JS红宝书】【详细思维导图】【持续更新】2024-09-042.1. JavaScript 发展历史2024-08-123.2. JavaScript 数据类型2024-08-124.2-1. JavaScript 数据类型检查2024-08-145.2-2 JavaScript 数据类型转换2024-08-22

6.3. JavaScript 变量声明2024-08-28

收起

var、let 和 const 是 JavaScript 中用于声明变量的关键字，但它们在作用域、提升（hoisting）、以及是否可以重新赋值等方面存在一些重要的区别。

1. 作用域（Scope）

• var：

  • 具有函数作用域（function scope），即如果在函数内部声明 var 变量，该变量在整个函数内都有效。
  • 如果在函数外部声明，则具有全局作用域。
  • 不具有块级作用域（block scope），在 if、for 等块级结构内部声明的 var 变量，在块外也能访问。

• let 和 const：

  • 具有块级作用域，即在 {} 内声明的变量只能在这对大括号内访问。常见的块级结构包括 if、for、while 等。
  • 这两个关键字在块外无法访问在块内声明的变量。

if (true) {
    var x = 10;
    let y = 20;
    const z = 30;
}
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined

2. 提升（Hoisting）

• var：

  • 变量声明会被提升到作用域的顶部，但不会提升赋值操作。也就是说，可以在声明之前使用，但会得到 undefined。

• let 和 const：

  • 变量声明也会被提升，但在变量声明之前访问会导致 ReferenceError，这种现象称为“暂时性死区”（Temporal Dead Zone, TDZ）。

console.log(a); // undefined
var a = 5;
 
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
 
console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;

3. 重新赋值（Reassignment）

• var：

  • 可以被重新赋值，也可以重复声明同一个变量。

• let：

  • 可以被重新赋值，但不能重复声明同一个变量。

• const：

  • 不能被重新赋值，声明时必须赋值，且值是不可变的（对于基本数据类型）。对于对象和数组等复杂数据类型，引用是不可变的，但对象或数组的内容可以更改。

var a = 10;
var a = 20; // 允许重新声明和赋值
 
let b = 10;
b = 20; // 允许重新赋值
// let b = 30; // SyntaxError: Identifier 'b' has already been declared
 
const c = 10;
// c = 20; // TypeError: Assignment to constant variable.

4. 最佳实践

• 使用 let 和 const 代替 var 是现代 JavaScript 开发的最佳实践。const 应用于不会重新赋值的变量，let 用于可能会重新赋值的变量。
• 使用 const 可以让代码更安全，因为它可以防止意外的重新赋值操作。