2.1 let、const 与 var 的区别

2.1 let、const 与 var 的区别

在 JavaScript 中，let、const 和 var 都用于声明变量，但它们的行为和作用域有显著差异。本节将详细讲解它们的区别，帮助你理解何时使用哪种声明方式。

2.1.1 var 的特点

var 是 ES5 及之前版本中声明变量的主要方式，但它存在一些问题，容易导致代码难以维护。

1. 函数作用域
var 声明的变量具有函数作用域（Function Scope），即在函数内部声明的变量只能在函数内部访问：

function testVar() {
  var x = 10;
  if (true) {
    var x = 20; // 同一个变量
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 20
}
testVar();

2. 变量提升（Hoisting）
var 声明的变量会被提升到函数或全局作用域的顶部，但赋值不会被提升：

console.log(y); // 输出 undefined
var y = 10;

等价于：

var y;
console.log(y); // 输出 undefined
y = 10;

3. 重复声明
var 允许重复声明同一个变量，不会报错：

var z = 10;
var z = 20; // 不会报错

2.1.2 let 的特点

let 是 ES6 引入的变量声明方式，解决了 var 的许多问题。

1. 块级作用域
let 声明的变量具有块级作用域（Block Scope），即在 {} 内声明的变量只能在该块内访问：

function testLet() {
  let x = 10;
  if (true) {
    let x = 20; // 不同的变量
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 10
}
testLet();

2. 不存在变量提升
let 声明的变量不会被提升，如果在声明前访问会报错：

console.log(y); // 报错：ReferenceError
let y = 10;

3. 不允许重复声明
let 不允许在同一个作用域内重复声明同一个变量：

let z = 10;
let z = 20; // 报错：SyntaxError

2.1.3 const 的特点

const 也是 ES6 引入的，用于声明常量。

1. 块级作用域
const 和 let 一样，具有块级作用域：

function testConst() {
  const x = 10;
  if (true) {
    const x = 20; // 不同的常量
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 10
}
testConst();

2. 必须初始化
const 声明的常量必须在声明时初始化，否则会报错：

const y; // 报错：SyntaxError

3. 不允许重新赋值
const 声明的常量不能被重新赋值：

const z = 10;
z = 20; // 报错：TypeError

4. 对象和数组的可变性
const 声明的常量不能被重新赋值，但如果常量是对象或数组，其属性或元素可以被修改：

const user = { name: "Alice" };
user.name = "Bob"; // 允许
console.log(user.name); // 输出 Bob

const numbers = [1, 2, 3];
numbers.push(4); // 允许
console.log(numbers); // 输出 [1, 2, 3, 4]

2.1.4 对比总结

2.1.5 使用建议

1. 优先使用 const：

   • 如果变量的值不会改变，使用 const 可以避免意外修改。
   • 对于对象和数组，const 仍然允许修改其内容。

2. 其次使用 let：

   • 如果变量的值需要改变，使用 let。
   • 避免使用 var，除非你需要兼容旧代码。

3. 避免使用 var：

   • var 的作用域和变量提升特性容易导致 bug，现代开发中应尽量避免。

2.1.6 示例代码

// 使用 var
function varExample() {
  var x = 10;
  if (true) {
    var x = 20; // 同一个变量
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 20
}

// 使用 let
function letExample() {
  let x = 10;
  if (true) {
    let x = 20; // 不同的变量
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 10
}

// 使用 const
function constExample() {
  const x = 10;
  if (true) {
    const x = 20; // 不同的常量
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 10
}

varExample();
letExample();
constExample();

2.1.7 总结

let 和 const 是 ES6 引入的现代变量声明方式，解决了 var 的许多问题。通过理解它们的作用域、变量提升和赋值规则，你可以编写更安全、更易维护的代码。

在接下来的学习中，我们将继续探索 JavaScript 的其他核心特性。现在，尝试在你的代码中替换 var，使用 let 和 const 吧！

思考题：

1. 为什么 var 的变量提升特性容易导致 bug？
2. 在什么情况下应该使用 const 而不是 let？
3. 如何理解 const 声明的对象和数组的可变性？