Var，Let 和 Const，ES6变量的三角之争

2023-12-10 22:26:05

JavaScript 的变与不变

在 ES6 之前，JavaScript 只有一个变量声明var。它允许我们在代码的任何地方声明变量，并且这些变量在整个作用域内都有效。

//使用 var 声明变量
var myName = "John Doe";
console.log(myName); // "John Doe"

//在函数内部声明变量
function sayHello() {
  var message = "Hello, world!";
  console.log(message); // "Hello, world!"
}

//在代码块内部声明变量
{
  var temp = "This is a temporary variable";
  console.log(temp); // "This is a temporary variable"
}

//在全局作用域声明变量
var globalVariable = "This is a global variable";
console.log(globalVariable); // "This is a global variable"

然而，var 存在一个问题：变量提升（Variable Hoisting）。当使用 var 声明变量时，变量会被提升到作用域的顶部。这意味着，即使你在代码的后面声明变量，你也可以在前面的代码中使用它。

//使用 var 声明变量并进行变量提升
console.log(myName); // undefined
var myName = "John Doe";

//在函数内部声明变量并进行变量提升
function sayHello() {
  console.log(message); // undefined
  var message = "Hello, world!";
}

//在代码块内部声明变量并进行变量提升
{
  console.log(temp); // undefined
  var temp = "This is a temporary variable";
}

//在全局作用域声明变量并进行变量提升
console.log(globalVariable); // undefined
var globalVariable = "This is a global variable";

变量提升可能会导致代码的执行结果与你预期的不一致。为了解决这个问题，ES6 引入了两个新的变量声明：let 和 const。

Let 的登场

let 关键字用于声明块级作用域变量。这意味着，使用 let 声明的变量只在它所在的代码块内有效。

//使用 let 声明块级作用域变量
let myName = "John Doe";
console.log(myName); // "John Doe"

//在函数内部声明块级作用域变量
function sayHello() {
  let message = "Hello, world!";
  console.log(message); // "Hello, world!"
}

//在代码块内部声明块级作用域变量
{
  let temp = "This is a temporary variable";
  console.log(temp); // "This is a temporary variable"
}

//在全局作用域声明块级作用域变量
let globalVariable = "This is a global variable";
console.log(globalVariable); // "This is a global variable"

与 var 不同，let 不存在变量提升。这意味着，你必须在使用 let 声明的变量之前先声明它。

//尝试在使用 let 声明的变量之前使用它
console.log(myName); // ReferenceError: myName is not defined
let myName = "John Doe";

//尝试在函数内部使用 let 声明的变量之前使用它
function sayHello() {
  console.log(message); // ReferenceError: message is not defined
  let message = "Hello, world!";
}

//尝试在代码块内部使用 let 声明的变量之前使用它
{
  console.log(temp); // ReferenceError: temp is not defined
  let temp = "This is a temporary variable";
}

//尝试在全局作用域使用 let 声明的变量之前使用它
console.log(globalVariable); // ReferenceError: globalVariable is not defined
let globalVariable = "This is a global variable";

let 关键字还可以用于重新声明变量。这意味着，你可以在同一个代码块内多次声明同一个变量，但每次声明都需要使用不同的值。

//使用 let 重新声明变量
let myName = "John Doe";
console.log(myName); // "John Doe"

myName = "Jane Doe";
console.log(myName); // "Jane Doe"

let message = "Hello, world!";
console.log(message); // "Hello, world!"

message = "Goodbye, world!";
console.log(message); // "Goodbye, world!"

Const 的登场

const 关键字用于声明常量变量。这意味着，使用 const 声明的变量的值一旦被赋值，就不能再被改变。

//使用 const 声明常量变量
const myName = "John Doe";
console.log(myName); // "John Doe"

//尝试改变 const 声明的变量的值
myName = "Jane Doe";
console.log(myName); // TypeError: Assignment to constant variable.

//在函数内部声明常量变量
function sayHello() {
  const message = "Hello, world!";
  console.log(message); // "Hello, world!"
}

//尝试改变 const 声明的变量的值
message = "Goodbye, world!";
console.log(message); // TypeError: Assignment to constant variable.

//在代码块内部声明常量变量
{
  const temp = "This is a temporary variable";
  console.log(temp); // "This is a temporary variable"
}

//尝试改变 const 声明的变量的值
temp = "This is a new temporary variable";
console.log(temp); // TypeError: Assignment to constant variable.

//在全局作用域声明常量变量
const globalVariable = "This is a global variable";
console.log(globalVariable); // "This is a global variable"

//尝试改变 const 声明的变量的值
globalVariable = "This is a new global variable";
console.log(globalVariable); // TypeError: Assignment to constant variable.

与 let 一样，const 也不存在变量提升。这意味着，你必须在使用 const 声明的变量之前先声明它。

//尝试在使用 const 声明的变量之前使用它
console.log(myName); // ReferenceError: myName is not defined
const myName = "John Doe";

//尝试在函数内部使用 const 声明的变量之前使用它
function sayHello() {
  console.log(message); // ReferenceError: message is not defined
  const message = "Hello, world!";
}

//尝试在代码块内部使用 const 声明的变量之前使用它
{
  console.log(temp); // ReferenceError: temp is not defined
  const temp = "This is a temporary variable";
}

//尝试在全局作用域使用 const 声明的变量之前使用它
console.log(globalVariable); // ReferenceError: globalVariable is not defined
const globalVariable = "This is a global variable";