当前位置：首页 > article >正文

【Vue】let、const、var的区别、适用场景

article 2025/1/15 18:28:48

let、const、var，有哪些区别，适用场景

var

特点：
- var 是 JavaScript 中最传统的变量声明方式。
- 具有函数作用域，即在函数内声明的 var 变量，在整个函数内都可以访问。
- 变量提升：使用 var 声明的变量会被提升到函数的顶部，但赋值操作仍保留在原位置。
- 可以重复声明，这可能导致意外的变量覆盖问题。

在 JavaScript 中创建变量通常称为"声明"变量。变量在脚本中第一次出现是在声明中。第一次用到时就设置于内存中，便于在后续中使用。

JavaScript是单线程语言，所以执行肯定是按顺序执行。但是并不是逐行的分析和执行，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升

示例代码：

function exampleVar() {
  console.log(x); // 输出 undefined，因为变量提升，但未赋值
  var x = 10;
  var x = 20; // 允许重复声明，x 的值为 20
  console.log(x); // 输出 20
}
exampleVar();

适用场景：
- 在较旧的 JavaScript 代码中，由于历史原因，var 被广泛使用。
- 在不考虑块级作用域，并且需要在函数内全局访问的情况下，可能会使用 var。但在现代 JavaScript 开发中，由于其可能导致的问题，不推荐使用。

let

特点：
- let 是 ES6 引入的变量声明方式。
- 具有块级作用域，只在最近的 {} 块内有效，包括 if 语句、for 循环、函数等块内。
- 不会进行变量提升，在声明之前使用会导致 ReferenceError。
- 不允许在同一作用域内重复声明。

示例代码：

function exampleLet() {
  if (true) {
    let y = 10;
    console.log(y); // 输出 10
  }
  // console.log(y); // 报错，y 在此处不可访问
  for (let i = 0; i < 5; i++) {
    // i 在此处是块级作用域，每次迭代都是一个新的 i
    console.log(i); 
  }
  // console.log(i); // 报错，i 在此处不可访问
}
exampleLet();

适用场景：
- 当需要块级作用域来确保变量的生命周期和访问范围时，使用 let。
- 在 for 循环中，使用 let 可以避免 var 带来的闭包问题。例如：对于需要在块内临时存储或使用的变量，使用 let 可以防止变量泄漏到外部作用域。

const

特点：
- const 也是 ES6 引入的，同样具有块级作用域。
- 用于声明常量，一旦赋值后不能再重新赋值。
- 不允许在同一作用域内重复声明。
- 对于对象和数组，虽然 const 不能重新赋值，但可以修改对象或数组的属性或元素。

示例代码：

function exampleConst() {
  const z = 5;
  // z = 10; // 报错，不能重新赋值
  const obj = { name: 'John' };
  obj.name = 'Jane'; // 允许修改对象属性
  console.log(obj.name); // 输出 Jane
  const arr = [1, 2, 3];
  arr.push(4); // 允许修改数组元素
  console.log(arr); // 输出 [1, 2, 3, 4]
}
exampleConst();