JavaScript let 和 const 学习笔记

在学习 JavaScript 的过程中，你肯定会接触到变量的概念。在 ES6 中，引入了两个新的关键字：let 和 const，用于声明变量。这两个关键字与 var 不同，有着更加精确的作用域和限制，能够提高代码的可读性和安全性。

let 和 const 的区别

1. 变量的作用域

在 JavaScript 中，let 声明的变量具有块级作用域（block scope），而 var 声明的变量只具有函数作用域（function scope）或全局作用域（global scope）。这意味着，使用 let 声明的变量只在它所在的代码块内有效，而使用 var 声明的变量则可能被其他函数访问。

javascriptCopy Code
function myFunction() {
  var x = 1;
  if (true) {
    var x = 2;
    console.log(x); // 输出 2
  }
  console.log(x); // 输出 2
}

function anotherFunction() {
  let y = 1;
  if (true) {
    let y = 2;
    console.log(y); // 输出 2
  }
  console.log(y); // 输出 1
}

2. 变量的重复声明

使用 let 或 const 声明的变量不能在同一作用域内重复声明，而使用 var 可以。

javascriptCopy Code
var a = 1;
var a = 2; // 合法

let b = 1;
// let b = 2; // 不合法，会抛出 SyntaxError

const c = 1;
// const c = 2; // 不合法，会抛出 SyntaxError

3. 变量的赋值

使用 let 声明的变量可以被重新赋值，而使用 const 声明的变量则不行。

javascriptCopy Code
let a = 1;
a = 2;
console.log(a); // 输出 2

const b = 1;
// b = 2; // 不合法，会抛出 TypeError

let 和 const 的实例

1. for 循环中的 let

在使用 for 循环时，经常会出现意料之外的问题，例如下面的代码：

javascriptCopy Code
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

运行此代码后，你会发现输出的结果是：

Copy Code
5
5
5
5
5

这是因为 setTimeout 是一个异步函数，它的回调函数在循环结束后才会执行，而此时 i 已经等于 5。

为了解决这个问题，可以使用 let 声明 i，将其作用域限制在循环内部，从而避免了闭包的问题。

javascriptCopy Code
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

这时输出的结果就是：

Copy Code
0
1
2
3
4

2. const 声明常量

在编写代码时，有些变量是不应该被修改的，例如圆周率 π 和自然常数 e。此时可以使用 const 声明常量。

javascriptCopy Code
const pi = 3.1415926;
// pi = 3; // 不合法，会抛出 TypeError
console.log(pi); // 输出 3.1415926

注意，使用 const 声明的常量必须在声明时就进行初始化，不能留到以后赋值。如果需要使用一个无法修改的变量，最好使用 const 声明。

总结

• let 和 const 是 ES6 中新增的两个关键字，用于声明变量。
• let 声明的变量具有块级作用域（block scope），而 var 声明的变量只具有函数作用域（function scope）或全局作用域（global scope）。
• 使用 let 或 const 声明的变量不能在同一作用域内重复声明，而使用 var 可以。
• 使用 let 声明的变量可以被重新赋值，而使用 const 声明的变量则不行。
• let 可以解决 for 循环中的闭包问题，const 可以声明常量。