ES6 基础：Var、Let 和 Const 之间的区别

差异

var- “var”的作用域仅限于定义它的函数内。如果定义在任何函数之外，则变量的作用域为全局。

词汇范围：函数
可以重新分配
初始化： undefined

let- “let”的作用域仅限于花括号所定义的“块”内。

词汇范围：块
可以重新分配
初始化：无

const- “const”的作用域与“let”相同。此外，使用 const 定义的变量不能重新赋值。

词汇范围：块
不可重新分配（可变异）
初始化：无

变量声明

您可以有意在特定范围内声明变量。

我们可以在全球范围内做到这一点：

var x
console.log(x) // undefined

// (When a `var` gets declared without a value, it defaults to `undefined`)

我们可以在函数范围内做到这一点：

function marco() {
  var x
  console.log(x)
}

marco() // undefined

我们可以在块范围内做到这一点：

function marco() {
  if (true) {
    var x
    console.log(x)
  }
}

marco() // undefined

如果我们var x在全局范围和函数范围内声明，一切都很好。

var x = "outside"

function marco() {
  var x = "inside"
  console.log(x) // "inside"
}

marco()
console.log(x) // "outside"

但是如果我们将var x函数内部的声明改为重新赋值会怎么样呢？

var x = "outside"

function marco() {
  x = "inside"
  console.log(x) // "inside"
}

marco()
console.log(x) // "inside"

哎呀。

var x如果我们从函数内部移除变量，函数外部的变量将被函数内部的重新赋值覆盖var。我们需要指定的作用域x仅限于函数内部marco()，否则就会发生这种情况。

函数作用域

在 JavaScript 中，通过在函数内定义变量来限制其作用域。这称为函数作用域。

function marco() {
  var text = "it works"
  console.log(text) // "it works"
}

marco()
console.log(text) // nothing 🤷‍♀

由于var是函数作用域，因此它仅在函数内部时才遵守其作用域。因此，以下代码也将有效：

function marco() {
  var text = "it works"
  if (true) {
    var text = "no it doesn't"
  }
  console.log(text) // no it doesn't
}

marco()

那可不好。

我if在函数内部创建了一个语句，添加了一个var与前一个同名的变量，并意外地重新赋值了它的值。一个显而易见的解决方案是使用不同的变量名，但让我们使用一个更好的解决方案来完全避免这种情况。

块作用域

与var不同，let和const属于块作用域。

这意味着，只要变量是在花括号内创建的，它的作用域就仅限于花括号内的代码块。这适用于函数、for 循环、if 语句、switch 语句等等。

function marco() {
  let text = "it works"
  if (true) {
    let text = "let is neat!"
    console.log(text) // let is neat!
  }
  console.log(text) // it works
}

marco()

嘿，这很棒。我们可以在一个函数块中创建多个变量，不会出现任何问题。不会意外重新赋值，也不会造成混淆。不过，你仍然应该遵循正确的命名规范。如果两个变量位于同一个函数作用域内，尽量不要使用相同的名称。

你不得重新分配

const不允许您重新分配变量。

const marco = "polo"

marco = "solo" // Hey, thats illegal

但它并非完全不可变。你可以改变用声明的变量const。

数组变异

const arr = [1]

arr.push(2)

console.log(arr) // [1, 2]

对象变异

const obj = {
  saying: "marco",
}

obj.saying = "polo"

console.log(obj.saying) // polo

Let 和 Const 提升

所有三种类型的变量（var、let 和 const） 都会被提升。提升意味着变量在代码执行之前会被移动到其作用域的顶部。

注意：所有变量均被“提升”

与不同var，let和const声明未初始化为任何东西。

var初始化为undefined。

console.log(a) // undefined
console.log(b) // Error: That's Illegal

var a = 0
let b = 0

请注意，日志并没有输出我们声明的变量内部的内容。解释器执行它的方式如下：

var a
let b

console.log(a) // undefined
console.log(b) // Error: That's Illegal

a = 0
b = 0

解释器将变量声明提升到范围的顶部，但0直到解释器到达该点时才分配变量。

使用let和const很好，因为如果你遇到在声明变量之前调用变量的情况，你会得到一个清晰的Uncaught ReferenceError: b is not defined，而不是静默的undefined。

保持饥饿，保持愚蠢🙏

鏂囩珷鏉ユ簮锛�https://dev.to/travissanon/es6-basics-the-difference- Between-var-let-and-const-4a5e