JS中var、let、const关键字区别及最佳实践

背景

在编写JavaScript和TypeScript代码时，开发者频繁接触var、let和const这三个关键字。尽管日常使用较多，但对其底层机制的深入探究往往被忽视。遇到报错时，通常采取简单替换关键字的方式解决，例如发现const未初始化会报错便改用let。本文旨在系统梳理这三者的具体区别与适用场景。

一、var变量声明机制

首先分析var关键字的行为特征。当使用var声明变量时，该变量会表现出“变量提升”现象，即变量声明会被自动提升至其所在作用域的顶部执行。

console.log(a); //undefind
var a = 1；
console.log(a); //1

这种提升机制等同于将声明语句移至作用域最上方。

var a;
console.log(a); //undefined
a = 1; 
console.log(a); //1

全局作用域下的表现

在函数外部使用var声明的变量，其作用域覆盖整个全局环境：

var carName = "Volvo";
  function person(){
    console.log(carName); // "Volvo"
  } 
  person();

局部作用域下的表现

在函数内部使用var声明的变量，其作用域仅限于该函数内部：

function person() {
    var carName = "Volvo";
    console.log(carName);  // "Volvo"
   }
 person();
 console.log(carName); //报错 Uncaught ReferenceError: a is not defined

此外，var在块级作用域（如if或for语句块）中存在作用域失效的问题，无法像现代语法那样限制变量可见性。

var a = 10;
 console.log(a); // 10
  { 
    var a = 2;
    console.log(a); // 2
  }
 console.log(a); // 2

变量重置与覆盖

使用var声明的变量，可以在代码的任何位置被重新赋值或覆盖：

var x = 2;
console.log(x); // 2
var x = 3;
console.log(x); // 3

二、块级作用域下的let与const

let和const在声明语法上与var相似，但核心区别在于：let和var用于声明变量，而const用于声明常量。与var不同，let和const不存在变量提升机制。此外，在全局作用域中，var声明的变量会自动挂载到window对象上，而let和const则不会。

1、let声明详解

let用于声明变量，它摒弃了var的变量提升特性，确保变量仅在当前作用域内有效。

全局变量行为

console.log(x);//报错 Unexpected identifier 'Uncaught'
  let x = 1;
  console.log(x)；// 1

块级作用域限制

let关键字严格遵循块级作用域，不存在变量提升：

{
      console.log(x); //报错 Unexpected identifier 'Uncaught'
      let x = 1;
      console.log(x);
   }

变量重置限制

在相同的作用域或块级作用域中，禁止使用let关键字重新声明由var关键字声明的变量：

var x = 2;       // 合法
  let x = 3;       // 不合法
  {
      var x = 4;   // 合法
      let x = 5   // 不合法
  }

不同作用域下的重新声明

let x = 2;       // 合法
let x = 3;       // 不合法
{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

虽然同一作用域内不能重复声明，但在不同的块级作用域中，let允许重新声明和赋值：

let x = 2;       // 合法
{
    let x = 3;   // 合法
}
{
    let x = 4;   // 合法
}

2、const声明详解

const用于声明常量，其值在定义后不可修改。使用const时必须进行初始化赋值，否则将直接抛出语法错误。

全局变量行为

{
        console.log(x); //报错 Unexpected identifier 'Uncaught'
        const x = 1;
        console.log(x); // 1
    }

局部变量行为

{
        const x = 1;
        console.log(x); //1;
    }
    console.log(x)// 报错 Unexpected identifier 'Uncaught'

必须初始化且不可重新赋值

const x;
  console.log(x);// Uncaught SyntaxError: Missing initializer in const declaration
  const x = 10;
  x = 20; // 报错，const 变量不可重新赋值

对于对象和数组等引用类型，const保证的是变量引用的内存地址不变，但允许修改对象或数组内部的内容：

const x = [1, 2, 3];
x.push(4); // 合法，数组本身可以修改
x = [5, 6, 7]; // 报错，变量引用地址不可变

总结

var和let用于声明变量，const用于声明常量。var存在变量提升且全局变量会挂载至window对象；let和const无变量提升且不会挂载至window。let限制变量仅在当前作用域有效；const定义的常量不可修改且必须初始化。

以上即为JavaScript中var、let、const关键字的区别及使用场景示例详解的详细内容，更多关于var let const关键字的资料请关注本站其它相关文章！

JavaScript中var、let、const的区别与使用场景详解

背景