JavaScript基础语法详解：变量、数据类型与控制流

任何 JavaScript 程序的实际运转，底层都建立在三根支柱之上：负责保存与维护状态的变量、约束数据形态与运算语义的数据类型，以及主导指令执行走向的控制流。本文将避开空洞理论，直指语言执行规范，系统解析这三项机制在现代 JavaScript（ES6+）中的工作原理、执行边界与避坑方案，帮助你在编写和维护代码时建立清晰的底层确定性。

一、变量：声明机制、词法作用域与生命周期

在 JavaScript 中，变量是命名的内存空间容器。随着 ES6 引入块级作用域，现代代码已全面确立了以 let 和 const 为基石、全面弃用 var 的声明规范。理解变量的关键在于搞清它的作用域边界与初始化生命周期。

1. 现代变量声明三剑客：let、const 与 var

日常编码推荐遵循“默认 const，需修改用 let，坚决不用 var”的原则。这三者的本质区别在于作用域范围、重复声明许可与再赋值能力：

• const：声明一个只读的常量引用。声明时必须初始化，且后续不可对该标识符进行重新绑定（Re-assignment）。
• let：声明一个具有块级作用域的可变变量。允许后续重新赋值，但同一块级作用域内禁止重复声明同一标识符。
• var：ECMAScript 早期遗留声明方式，具有函数作用域（Function Scope）而非块级作用域，允许在同一作用域内被无限制重复声明，容易导致变量静默覆盖。

// 1. const 保证标识符绑定不可修改
const MAX_RETRIES = 3;
// MAX_RETRIES = 5; // 抛出 TypeError: Assignment to constant variable.

// 2. let 允许合法的值修改
let currentAttempt = 1;
currentAttempt += 1; // 合法更新，当前值为 2

// 3. const 声明复合对象时的边界：锁定的是内存地址指针，而非内部属性
const config = { debug: true };
config.debug = false; // 完全合法，因为对象的堆内存指针未变
// config = { debug: false }; // 错误：重新绑定新对象地址抛出 TypeError

2. 作用域隔离与暂时性死区（TDZ）

作用域定义了变量在何处可被访问。代码块（花括号 { ... }）如 if 分支或 for 循环，都会为 let 和 const 创建独立的块级词法环境（Block Lexical Scope）。

变量在进入作用域到实际执行到声明语句之间的区间，被称为暂时性死区（Temporal Dead Zone, TDZ）。在 TDZ 内访问该变量会直接抛出 ReferenceError，从而杜绝了在未初始化前读取脏数据的可能。

3. 对比分析：为什么循环中必须使用 let 替代 var？

为了直观说明作用域机制对代码产生的影响，我们在完全一致的异步延迟执行场景下，对比 var 和 let 在 for 循环中的执行表现：

// 案例 A：使用 var 的循环体
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log("var 循环输出:", i);
  }, 100);
}
// 运行结果：输出三次 "var 循环输出: 3"

// 案例 B：使用 let 的循环体
for (let j = 0; j < 3; j++) {
  setTimeout(() => {
    console.log("let 循环输出:", j);
  }, 100);
}
// 运行结果：依次输出 0、1、2

关键差异解析：

在案例 A 中，var 不具备块级作用域，变量 i 被提升到了包含它的函数或全局环境中。三次循环迭代实际上一直在操作同一个变量 i。当 100 毫秒后定时器回调执行时，同步循环早已结束，i 的最终值已变为 3，所有回调读取的都是这同一个最终值。

在案例 B 中，规范规定 let 在每次循环迭代时都会为当前迭代创建全新的独立块级作用域，闭包回调函数分别捕获了各自所属轮次中独立绑定的 j 副本，因此如期输出了 0、1、2。这个对比清楚地证明了块级作用域对逻辑隔离的重要性。

二、数据类型：基本类型、引用类型与内存映射

JavaScript 是一种动态弱类型语言。所谓“动态”，指的是变量本身不绑定特定类型，变量的类型完全由其当前持有的值决定；所谓“弱类型”，指的是在执行某些运算时，引擎会在幕后进行隐式类型转换。

1. 7 种基本数据类型与引用数据类型

现代 JavaScript 中共有 8 种内置数据类型，划分为两大阵营：

• 基本数据类型（Primitive Types，共7种）： string（字符串）、number（数值，双精度浮点）、boolean（布尔值）、null（空值）、undefined（未定义）、symbol（独一无二的符号标识）、bigint（任意精度大整数）。
• 引用数据类型（Reference Types）： 统称为 Object。常见的具体形态包括普通对象（{}）、数组（Array）、函数（Function）、日期（Date）及正则（RegExp）等。

2. 内存模型：栈内存（Stack）与堆内存（Heap）

两种类型在底层运行时的存储方式截然不同：

• 栈内存：由系统自动分配和释放，存储空间固定且高效。所有的基本数据类型值以及引用类型的内存地址指针都直接保存在栈内存中。当一个基本类型变量被赋值给另一个变量时，发生的是完整的值拷贝，后续修改互不干扰。
• 堆内存：动态分配的复杂内存空间，大小不固定。所有的引用数据类型实体（对象、数组）均存放在堆内存中。当把一个对象赋值给新变量时，复制的仅仅是保存在栈中的内存地址指针。两个变量最终指向堆中的同一块实体，修改其中一个变量的属性，另一方会同步发生变动。

// 基本类型：独立值拷贝
let scoreA = 100;
let scoreB = scoreA;
scoreB = 90;
console.log(scoreA); // 依然是 100，不受 scoreB 影响

// 引用类型：指针地址拷贝
const userA = { name: "张三" };
const userB = userA;
userB.name = "李四";
console.log(userA.name); // 输出 "李四"！userA 与 userB 共享同一堆内存实体

3. 类型检测手段与隐式转换陷阱

在日常开发中，必须掌握准确检测类型的方法，并对语言历史遗留陷阱保持警惕：

• typeof null === "object"：这是 JavaScript 最初实现的官方 Bug，因低位类型标签与对象重合而产生，为了保持向后兼容从未修复。检测 null 应使用严格全等 val === null。
• typeof [] === "object"：数组使用 typeof 同样返回 "object"。判断数组必须使用专门的 Array.isArray(arr)。
• 全等判断原则：全等运算符 === 会在比对时同时校验值与类型，绝不发生隐式转换；而双等号 == 会在类型不一致时触发复杂的强制转换规则（例如 "0" == false 评估为 true，null == undefined 评估为 true）。工程实践中除极个别检测空值场景外，应 100% 优先使用 ===。

三、控制流：条件分支与循环流转

控制流决定了语句被跳过、多次重复还是依条件分流。掌握分支评估的“真值/假值”转换逻辑与循环控制关键字，是写出健壮控制流的核心。

1. 条件分支：if...else 与 switch 严格匹配

JavaScript 在执行 if (expression) 语句时，会自动调用底层的 ToBoolean 抽象操作将括号内的表达式强制转为布尔值。在整个语言规范中，转换为 false 的假值（Falsy values）只有以下 8 个：

false、0、-0、0n（BigInt零）、""（空字符串）、null、undefined、NaN。

除此之外的所有值，包括空数组 []、空对象 {} 以及字符串 "0"，在条件语句中全部评估为真值（Truthy）！因此绝对不能用 if (arr) 判断数组是否为空，而必须检查其长度 if (arr.length > 0)。

2. switch...case 严格全等与穿透控制

在面对离散状态值匹配时，switch 语句具有比冗长 if...else if 更清晰的结构。需要注意两个重要特性：

1. 严格全等比对：switch 在比对传入值与 case 目标值时，使用的是严格全等运算符 ===。如果输入值为字符串 "1"，它不会匹配 case 1。
2. 穿透机制（Fallthrough）：如果某个匹配成功的 case 块末尾未添加 break 语句，执行指针会无视后续 case 的条件判断，直接穿透执行其语句，直到遇到 break 或结束。

function handleHttpStatus(statusCode) {
  switch (statusCode) {
    case 200:
    case 201:
      // 合理利用穿透合并状态
      console.log("请求成功完成");
      break;
    case 404:
      console.log("资源未找到");
      break;
    default:
      console.log("未知状态码:", statusCode);
  }
}

3. 循环结构与迭代控制：for、while 与 for...of

针对不同数据结构与业务场景，应选用语义最明确的循环语句：

循环语法	执行特点	典型适用场景	常见注意事项
for (;;)	明确初始化、循环终止条件与递增步长	需要按步长增减、反向遍历或索引访问	确保步进表达式递进，避免死循环
while (cond)	在每轮迭代前评估条件，条件为 true 时循环	迭代次数未知、依赖外部状态就绪的场景	循环体内必须包含改变条件的语句
for...of	基于迭代器协议（Iterator），直接获取集合元素值	遍历数组、Set、Map、字符串	不能直接用于遍历不可迭代的普通对象
for...in	遍历对象自身及原型链上的可枚举属性键名	检查或遍历普通对象的属性名	切忌用于遍历数组，键名为字符串且无序

4. 循环中断：break 与 continue 的精确使用

当需要提前结束循环或过滤特定迭代步时，使用控制转移关键字：

• break：立即强制跳出整个循环体，循环宣告彻底结束，执行指针跳转到循环块后的首行语句。
• continue：仅跳过当前这一次迭代的剩余代码，立即触发循环步进表达式并评估下一次迭代条件。

const rawData = [10, -5, 0, 35, 999, 40];
const validPositiveNumbers = [];

for (const item of rawData) {
  // 异常标记中断：遇到 999 停止后续全部处理
  if (item === 999) {
    break;
  }
  // 过滤无效值：非正数跳过本次迭代
  if (item <= 0) {
    continue;
  }
  validPositiveNumbers.push(item);
}
// validPositiveNumbers 最终为 [10, 35]

四、核心规范与最佳实践自查矩阵

为了在实际编码中兼顾可维护性与运行安全性，建议在日常编写或 Review 代码时，对照以下三维检查矩阵进行核对：

通过清晰划分变量的块级作用域边界、深刻理解栈堆内存的物理分配机制，并在控制流中精准运用真值规则与迭代协议，你所编写的 JavaScript 代码就能够有效远离隐式转换陷阱与变量污染，为构建复杂应用打下坚实的语法基础。