js let var详解|极客笔记

js let var详解

一、let 和 var 的区别

js let var详解

JavaScript 中，我们可以使用 let 和 var 来声明变量。它们之间有一些重要的区别。在本文中，我们将详细讨论 let 和 var 的不同之处，并提供一些示例代码来进一步说明。

1. 变量作用域的区别

使用 var 声明的变量是函数作用域（function scope）的，即在声明的函数内部有效。而使用 let 声明的变量是块级作用域（block scope）的，即在包含该变量的代码块内有效。

让我们通过以下示例来理解它们之间的区别：

function example1() {
  if (true) {
    var varVariable = "I am var!";
    let letVariable = "I am let!";
  }
  console.log(varVariable); // 输出 "I am var!"
  console.log(letVariable); // 报错：ReferenceError: letVariable is not defined
}
example1();

在这个示例中，我们在 if 语句块中声明了一个变量 varVariable 和 letVariable。在函数内部，我们尝试在 console.log() 中打印这两个变量。由于 var 是函数作用域的，所以 varVariable 可以在 if 语句块外部访问。而 let 是块级作用域的，所以我们无法在语句块之外访问 letVariable，会导致一个引用错误。

2. 变量的重复声明

使用 var 声明的变量可以被多次声明，而使用 let 则不行。如果我们使用 var 重复声明一个变量，它只会重新赋值，而不会报错。而使用 let 重复声明变量，将会导致一个语法错误。

让我们看一个示例：

var varVariable = "I am var!";
let letVariable = "I am let!";

var varVariable = "I am another var!"; // 合法
let letVariable = "I am another let!"; // 报错：SyntaxError: Identifier 'letVariable' has already been declared

在这个示例中，我们首先使用 var 和 let 声明了两个变量 varVariable 和 letVariable。然后，我们尝试重复声明这两个变量。使用 var 重复声明变量是合法的，但是使用 let 则会导致一个语法错误。

3. 变量提升

在 JavaScript 中，使用 var 声明的变量会发生变量提升（hoisting），即在函数或全局作用域内，变量的声明会被提升到作用域的顶部。而使用 let 声明的变量，则不会发生变量提升。

让我们通过以下示例来理解变量提升的概念：

console.log(varVariable); // 输出 undefined
console.log(letVariable); // 报错：ReferenceError: Cannot access 'letVariable' before initialization

var varVariable = "I am var!";
let letVariable = "I am let!";

在这个示例中，我们尝试在变量声明之前访问 varVariable 和 letVariable。由于变量提升的影响，varVariable 的输出是 undefined。而 letVariable 则会报错，因为在变量声明之前访问 let 声明的变量将会导致一个引用错误。

4. 块级作用域内的循环变量

使用 var 声明的循环变量存在一个常见的陷阱，即在循环结束后，循环变量的值被保留在外部作用域中。而使用 let 声明的循环变量不存在这个问题。

让我们通过以下示例来说明这个问题：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 输出：5 5 5 5 5

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 输出：0 1 2 3 4

在第一个循环中，我们使用 var 声明了一个循环变量 i，并在 setTimeout 回调函数中输出 i。当循环结束后，i 的值变成了 5。所以在 setTimeout 回调函数中，输出的都是 5。

而在第二个循环中，我们使用 let 声明了循环变量 i。由于 let 是块级作用域的，每次循环都会创建一个新的作用域，所以 setTimeout 回调函数中的 i 值分别为 0、1、2、3、4。