基本概念：var、let、const 的区别
作用域与声明行为
在 JavaScript 中，var、let、const 三种声明方式的核心区别首要体现在作用域上。var 声明的变量具备函数作用域，如果在函数内部使用，它的作用域就限制在该函数内；若在函数外部使用，则成为全局变量。
相反，let 与 const 引入了块级作用域，它们的变量仅在花括号内有效，这有助于避免变量污染全局环境，并提升代码可维护性。
此外，是否可重新赋值与是否可重复声明也是关键差异。var 可以在同一作用域内重复声明，而 let/const 不允许重复声明；const 声明后必须立即赋值且不可重新赋值，而 let 可以重新赋值，但都具有块级作用域。
// 示例：不同声明的基本行为
var a = 1;
var a = 2; // 允许重复声明let b = 5;
// let b = 6; // 会报错：Identifier 'b' has already been declaredconst c = 3;
// c = 4; // 会报错：Assignment to constant variable
声明位置与初始化
var 的初始化在提升阶段会被设为 undefined，因此在外部访问之前通常不会抛错；但对“未来值”的依赖可能带来隐性错误。
let/const 的初始化需要在声明后才能使用，这可以避免对未初始化变量的访问，提升代码的可预测性。
在实际前端开发中，优先使用 const，只有需要修改变量时才使用 let，尽量避免使用 var，以减少作用域和提升相关的 bug。
变量提升与块级作用域的影响
提升机制（Hoisting）对 var 与 let/const 的影响
变量提升（Hoisting）对 var 有显式提升到作用域顶部并初始化为 undefined 的特点，这意味着在声明之前访问变量不会报错，但会得到 undefined 的值。
与之对比，let 与 const 也会被提升，但在声明前进入临时死区（TDZ），在 TDZ 中访问会抛出 ReferenceError，从而避免未初始化使用的风险。
通过理解提升规律，可以更好地设计变量的作用域边界，减少不可预测的赋值行为。
console.log(a); // undefined
var a = 1;console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 2;
块级作用域和全局作用域的差异
块级作用域强调变量只在花括号内有效，这使得 if、循环、函数表达式等代码块的内部变量不会污染外部环境，提升模块化和可维护性。
另一方面，使用 var 时，全局作用域的变量可能意外覆盖页面中的全局变量，从而引发冲突和难以追踪的错误。
理解这些差异有助于在前端项目中分清职责化变量、避免全局污染，并提升代码的可预测性与可维护性。
在前端开发中的实际用法与最佳实践
何时使用 const，何时使用 let
在大多数情况下，首选 const，因为它确保变量在赋值后不可重新赋值，便于推理和调试。
当需要修改变量的值时，使用 let，保持变量在可控的范围内变化，并避免全局作用域污染。
对于需要兼容性、或在特定脚本环境中必须使用 var 的情况，仅在确实有理由时才回退到 var，并确保变量作用域清晰明确。
// 推荐做法
const API_BASE = 'https://api.example.com';
let userCount = 0;userCount += 1;
避免使用 var 的常见坑
重复声明、全局污染以及提升导致的不可预期行为是使用 var 的典型坑，因此应尽量避免。
通过采用 块级作用域、明确的赋值策略，可以显著提升代码质量，降低潜在的运行时错误。
在团队协作中，统一使用 const/let 的编码规范，有助于实现一致性和可维护性，降低后续代码重构成本。
// 常见坑示例
var x = 10;
if (true) {var x = 20; // 同一作用域内重新赋值，且覆盖全局变量
}
console.log(x); // 20// 更推荐的写法
const base = 10;
let y = base;
if (true) {let y = base + 10; // 逻辑上独立的变量，避免污染console.log(y); // 20
}
console.log(base); // 10
实际编码示例：从简单到复杂的使用场景
基本变量声明
通过简单示例展示如何在前端脚本中声明变量，并理解 const 对引用的影响，以及对象属性的可变性。
const 声明的对象引用不可重新赋值，但对象内部属性可修改，这在处理配置对象和常量数据时尤为重要。
const config = { theme: 'dark', version: '1.0' };
config.theme = 'light'; // 允许修改对象内部属性
// config = { theme: 'dark', version: '2.0' }; // 不允许重新赋值
与模块化、函数作用域的整合
在模块化和复杂应用中，变量声明需要与导出、作用域边界紧密配合，以实现清晰的 API 与最小的耦合。
使用 const 导出常量、使用 let 处理模块内部状态，并通过命名导出维持清晰的模块边界。
// 模块化常量与导出示例
export const PI = 3.14159;
export function area(r) { return PI * r * r; }let state = { count: 0 };
export function increment() { state.count += 1; return state.count; }
