返回

不同场景中,var、let 和 const 的使用区别

前端

变量声明

在 JavaScript 中,使用 var、let 或 const 声明变量。

var x = 10;
let y = 20;
const z = 30;
  • var: 使用 var 关键字声明变量是 JavaScript 中最传统的方式。var 变量的作用域是全局的或函数范围内的。这意味着在任何地方都可以访问 var 变量,包括在 var 变量声明后的块中。
  • let: 使用 let 关键字声明变量是 JavaScript 中的现代方式。let 变量的作用域是块级作用域。这意味着 let 变量只能在声明它们的块中访问。
  • const: 使用 const 关键字声明变量是 JavaScript 中声明常量的唯一方式。const 变量的作用域是块级作用域。这意味着 const 变量只能在声明它们的块中访问。此外,const 变量的值一旦声明就不能被改变。

变量的作用域

var 变量的作用域是全局的或函数范围内的。这意味着在任何地方都可以访问 var 变量,包括在 var 变量声明后的块中。

function myFunction() {
  var x = 10;
  {
    // x is accessible here
    console.log(x); // 10
  }
}

myFunction(); // 10

let 变量的作用域是块级作用域。这意味着 let 变量只能在声明它们的块中访问。

function myFunction() {
  let x = 10;
  {
    // x is accessible here
    console.log(x); // 10
  }

  // x is not accessible here
  console.log(x); // ReferenceError: x is not defined
}

myFunction(); // 10

const 变量的作用域是块级作用域。这意味着 const 变量只能在声明它们的块中访问。此外,const 变量的值一旦声明就不能被改变。

function myFunction() {
  const x = 10;
  {
    // x is accessible here
    console.log(x); // 10
  }

  // x is not accessible here
  console.log(x); // ReferenceError: x is not defined

  // x cannot be reassigned
  x = 20; // TypeError: Assignment to constant variable.
}

myFunction(); // 10

变量的声明和赋值

var 变量可以在声明后立即赋值,也可以在声明后不赋值。

var x = 10;
var y; // y is declared but not initialized

let 变量必须在声明时赋值。

let x = 10; // x is declared and initialized
let y; // SyntaxError: Identifier 'y' has already been declared

const 变量必须在声明时赋值,并且它的值一旦声明就不能被改变。

const x = 10; // x is declared and initialized
const y; // SyntaxError: Identifier 'y' has already been declared

变量的重新声明和重新赋值

var 变量可以在声明后重新声明和重新赋值。

var x = 10;
x = 20; // x is reassigned

let 变量可以在声明后重新赋值,但不能重新声明。

let x = 10;
x = 20; // x is reassigned
let x = 30; // SyntaxError: Identifier 'x' has already been declared

const 变量不能重新声明或重新赋值。

const x = 10;
x = 20; // TypeError: Assignment to constant variable.
const x = 30; // SyntaxError: Identifier 'x' has already been declared

变量的使用场景

var 变量通常用于声明全局变量或函数范围内的变量。

var x = 10; // global variable

function myFunction() {
  var y = 20; // function-scoped variable
}

let 变量通常用于声明块级作用域的变量。

function myFunction() {
  let x = 10; // block-scoped variable

  if (x > 5) {
    let y = 20; // block-scoped variable
  }
}

const 变量通常用于声明常量。

const PI = 3.14; // constant