JavaScript - 变量声明（let、const 和其他）

目录

一、引言

1. let 的作用

2. const 的作用

3. let 与 const 的选择

4. let 和 const 的性能

5. var, let, const 的对比

6. 常见误区

二、其他变量定义

         1. var 关键字

         2. 全局对象属性

         3. 使用 IIFE（立即调用函数表达式）

         4. ES6 模块

总结

---

一、引言

• 简要介绍 JavaScript 的变量声明方式（var, let, const）。
• 解释为什么 let 和 const 被引入到 ES6 中，以及它们的目的。

1. let 的作用

• 块级作用域：

  •  let 声明的变量具有块级作用域（var 是函数作用域）。
  • 示例：

{
  let x = 10;
}
console.log(x); // ReferenceError: x is not defined

         避免变量提升：

• • let 声明的变量不会提升到块的顶部。
  • 示例：

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

        重复声明：

• • 在同一作用域内，不能使用 let 重复声明同一变量。
  • 示例：

const pi = 3.14;
pi = 3.14159; // TypeError: Assignment to constant variable.

---

2. const 的作用

• 常量声明：

  • const 用于声明常量，表明该变量的绑定不可以被重新赋值。
  • 示例：

const pi = 3.14;
pi = 3.14159; // TypeError: Assignment to constant variable.

• 块级作用域：

  • const 也具有块级作用域，与 let 类似。
  • 示例：

{
  const d = 20;
}
console.log(d); // ReferenceError: d is not defined

• 引用类型：

  • const 只保证变量引用的地址不变，对于对象和数组的内容是可以修改的。
  • 示例：

const obj = { key: "value" };
obj.key = "newValue"; // 合法，obj 仍然引用同一个对象
console.log(obj.key); // 输出: "newValue"

obj = {}; // TypeError: Assignment to constant variable.

---

3. let 与 const 的选择

• 何时使用 let？

  • 当需要在代码块中重新赋值的变量时，应该使用 let。例如，在循环中或在需要改变值的场合。
  • 示例：

for (let i = 0; i < 5; i++) {
  console.log(i); // 输出 0, 1, 2, 3, 4
}
// console.log(i); // ReferenceError: i is not defined

• 何时使用 const？

  • 当你希望声明一个不应该被重新赋值的变量时，使用 const。这有助于提高代码的可读性和可维护性，特别是在使用常量（如配置、API URL 等）。
  • 示例：

const maxUsers = 100; // 常量

• 最佳实践：

  • 推荐在可能的情况下总是使用 const，只有在需要重新赋值时才使用 let。这样可以减少意外的重新赋值错误，增加代码的清晰度。

4. let 和 const 的性能

         性能影响：

• 在大多数情况下，let 和 const 的性能差异几乎可以忽略不计，主要应该关注可读性和可维护性。
• 现代 JavaScript 引擎在性能方面进行了优化，因此通常不需要担心选择 let 或 const 会导致显著的性能问题。

5. var, let, const 的对比

• 作用域：

  • var：函数作用域。
  • let 和 const：块级作用域。

• 提升：

  • var：变量提升，初始化为 undefined。
  • let 和 const：不会提升，使用前必须先声明。

• 重复声明：

  • var：可以在同一作用域内重复声明。
  • let 和 const：不能在同一作用域内重复声明。

• 可变性：

  • var 和 let：可以重新赋值。
  • const：不能重新赋值，但对于对象和数组内容是可变的。

6. 常见误区

• const 不可变： 许多人误解 const 是不可变的。这是错误的。const 只保证引用不变，而不是对象的内容。

  • 示例：

const arr = [1, 2, 3];
arr.push(4); // 合法
console.log(arr); // 输出: [1, 2, 3, 4]

arr = [5, 6]; // TypeError: Assignment to constant variable.

• 在循环中使用 let： 在循环中用 let 声明变量，每次迭代都会创建一个新的作用域，适用于保持每次迭代的独立性。

  • 示例：

for (let j = 0; j < 3; j++) {
  setTimeout(() => {
    console.log(j); // 输出 0, 1, 2
  }, 100);
}

---

二、其他变量定义

当然，除了 let 和 const，JavaScript 中还有其他几种定义变量的方式。

1. var 关键字

• 定义和作用域：

  • var 是 JavaScript 中的传统变量声明方式，定义的变量具有函数作用域，或者在全局作用域中声明时是全局的。

• 变量提升：

  • 使用 var 声明的变量在函数或全局作用域内会被提升到顶部，初始化为 undefined。

• 示例：

  console.log(x); // 输出: undefined
  var x = 5;
  
  function test() {
    var y = 10;
  }
  console.log(y); // ReferenceError: y is not defined
  

• 重复声明：

  • 在同一作用域内，var 允许重复声明变量。

• 使用建议：

  • 由于 var 的作用域和提升特性，通常建议使用 let 和 const 进行变量声明。

2. 全局对象属性

• 定义全局变量：

  • 在浏览器环境中，直接为一个未声明的变量赋值时，会将其添加为全局对象（window）的属性。

• 示例：

  myGlobalVar = "Hello, World!"; // 不使用 var/let/const
  console.log(window.myGlobalVar); // 输出: "Hello, World!"
  

• 使用建议：

  • 尽量避免这样做，以防止命名冲突和不可预测的行为。

3. 使用 IIFE（立即调用函数表达式）

• 封装和作用域：

  • 通过 IIFE 创建一个新的作用域，用于封装变量，防止变量污染全局命名空间。

• 示例：

  (function() {
    var localVar = "I'm local";
    console.log(localVar); // 输出: "I'm local"
  })();
  
  console.log(localVar); // ReferenceError: localVar is not defined
  

4. ES6 模块

• 使用模块化：

  • 在 ES6 中，可以使用模块（import 和 export）定义变量，模块中的变量默认是私有的，不会污染全局命名空间。

• 示例：

  // module.js
  export const moduleVar = "I'm a module variable";
  
  // main.js
  import { moduleVar } from './module.js';
  console.log(moduleVar); // 输出: "I'm a module variable"
  

总结

• 现代 JavaScript 编程中，推荐使用 let 和 const，因为它们的作用域更加明确，有助于减少错误。
• 传统的 var 仍然存在，但应谨慎使用。
• 其他定义变量的方式（如全局对象属性、对象和数组属性、函数、本地作用域等）可以在特定情况中使用，但最好遵循模块化和封装的良好实践。