巧用JavaScript三剑客：var、let、const的差异与应用场景详解

前端

2024-02-22 22:54:56

var、let、const浅析

var

var是JavaScript中最早的变量声明方式，也是最宽松的声明方式。它允许在未声明的情况下直接赋值，并且变量可以被重新声明和赋值。var声明的变量具有函数作用域，即变量只在声明它的函数内部有效。

let

let是ES6中引入的变量声明方式，它弥补了var的不足。let声明的变量必须在使用前声明，并且不能被重新声明。let声明的变量具有块级作用域，即变量只在声明它的代码块内部有效。

const

const也是ES6中引入的变量声明方式，它用于声明常量。const声明的变量必须在声明时初始化，并且不能被重新声明或重新赋值。const声明的变量具有块级作用域。

var、let、const的差异

特性	var	let	const
声明方式	无需声明	必须声明	必须声明且必须初始化
作用域	函数作用域	块级作用域	块级作用域
可重新声明	是	否	否
可重新赋值	是	是（在声明的代码块内）	否
变量提升	会变量提升	会变量提升	不会变量提升

var、let、const的应用场景

var：适用于声明函数作用域内的临时变量，例如循环变量、临时变量等。
let：适用于声明块级作用域内的变量，例如循环变量、临时变量等。let更适合于需要在块级作用域内控制变量声明和赋值的情况。
const：适用于声明常量，例如数学常量、配置常量等。const可以确保变量的值不会被意外更改。

举个例子

// 使用var声明一个全局变量
var globalVariable = 10;

// 使用let声明一个块级作用域变量
let blockVariable = 20;

// 使用const声明一个常量
const constantVariable = 30;

// 在函数内部使用var声明一个临时变量
function myFunction() {
  var tempVariable = 40;
}

// 在函数内部使用let声明一个块级作用域变量
function myFunction() {
  let blockVariable = 50;
}

// 在函数内部使用const声明一个常量
function myFunction() {
  const constantVariable = 60;
}

// 尝试重新声明var声明的变量
var globalVariable = 20;

// 尝试重新声明let声明的变量
// 会报错：SyntaxError: Identifier 'blockVariable' has already been declared
let blockVariable = 30;

// 尝试重新赋值const声明的变量
// 会报错：TypeError: Assignment to constant variable.
constantVariable = 40;

// 尝试在函数外部使用块级作用域变量
// 会报错：ReferenceError: blockVariable is not defined
console.log(blockVariable);

// 尝试在函数外部使用常量
// 会报错：ReferenceError: constantVariable is not defined
console.log(constantVariable);