JavaScript ES6入门——如何正确使用var、let和const？

前端

2023-10-11 16:11:15

变量声明方式

在JavaScript中，有三种方法可以声明变量：

var
let
const

这三种声明方式的主要区别在于它们的作用域 和不可变性 。

作用域

作用域是指变量的有效范围。var声明的变量在整个函数中都有效，而let和const声明的变量只在它们所在的块级作用域内有效。

块级作用域是指由花括号{}括起来的部分。例如，函数、if语句、循环语句等都是块级作用域。

这意味着，如果我们在一个函数中使用var声明一个变量，那么这个变量在整个函数中都可以访问。但是，如果我们使用let或const声明一个变量，那么这个变量只能在该块级作用域内访问。

不可变性

不可变性是指变量的值一旦被赋值，就无法被改变。const声明的变量是不可变的，这意味着一旦我们给它赋值，就不能再改变它的值。let声明的变量是可变的，这意味着我们可以随时改变它的值。

何时使用var、let和const？

一般来说，我们应该尽量使用let和const来声明变量。只有在我们需要在整个函数中访问变量时，才使用var来声明变量。

以下是使用var、let和const的一些具体建议：

使用var声明全局变量。
使用let声明局部变量。
使用const声明常量。

变量声明方式总结

下表总结了var、let和const三种变量声明方式的区别：

声明方式	作用域	不可变性
var	整个函数	可变
let	块级作用域	可变
const	块级作用域	不可变

举个例子

以下代码演示了var、let和const三种变量声明方式的区别：

// 全局变量
var globalVar = 10;

// 函数
function myFunction() {
  // 局部变量
  var localVar = 20;

  // 块级作用域
  {
    // 常量
    const constant = 30;

    // 暂时性死区
    console.log(temporalVar); // ReferenceError: temporalVar is not defined

    // 声明变量
    let temporalVar = 40;

    console.log(constant); // 30
    console.log(temporalVar); // 40
  }

  console.log(localVar); // 20
  console.log(constant); // ReferenceError: constant is not defined
  console.log(temporalVar); // ReferenceError: temporalVar is not defined
}

myFunction();

console.log(globalVar); // 10