JavaScript基础语法详解：变量、数据类型与运算符

编写高质量 JavaScript 代码的基础，在于精确掌握变量声明机制、数据类型在内存中的组织方式以及各类运算符的计算与转换规则。本文系统解析 var、let 与 const 的作用域与提升机制，全面梳理 8 种数据类型的内存模型与检测手段，并深入分析比较、逻辑及短路运算中的隐式转换陷阱与最佳编码实践。

一、变量声明：var、let 与 const 的本质区别

变量是程序存储和引用数据的具名容器。在现代 JavaScript（ECMAScript 6+）中，声明变量有三种关键字：var、let 和 const。它们的核心区别体现在作用域划分、变量提升（Hoisting）以及生命周期中的“暂存性死区”（Temporal Dead Zone，TDZ）。

1. 作用域层级差异

var 属于早期规范，只具备函数作用域（Function Scope）或全局作用域。在 if、for 等花括号代码块内部使用 var 声明的变量，会渗透到代码块外部，极易造成意外的变量覆盖与状态污染。

与之相对，let 和 const 具备严格的块级作用域（Block Scope）。凡是在 { } 代码块内声明的标识符，在代码块外部完全不可见：

if (true) {
  var globalPollution = "var 渗透至外层";
  let blockScoped = "let 仅在当前块内可见";
  const constantValue = "const 同样限制在块级";
}

console.log(globalPollution); // 输出: "var 渗透至外层"
// console.log(blockScoped);  // 抛出 ReferenceError: blockScoped is not defined
// console.log(constantValue); // 抛出 ReferenceError: constantValue is not defined

2. 变量提升与暂存性死区（TDZ）

JavaScript 引擎在执行代码前，会先经历编译阶段。在编译期，所有声明语句都会被收集并注册到当前执行环境：

• var 的提升：变量名被提升至作用域顶部，同时被隐式赋予初始值 undefined。因此在声明语句之前访问 var 变量不会报错，只会得到 undefined。
• let 和 const 的提升：变量名同样会被提升到作用域顶部，但不会被初始化。从进入作用域到变量声明语句执行完成之间的区域，被称为暂存性死区（TDZ）。在 TDZ 内访问该变量会直接抛出 ReferenceError。

const user = { name: "Alice" };
user.name = "Bob"; // 完全合法，未更改 user 的内存引用
// user = { name: "Charlie" }; // 抛出 TypeError: Assignment to constant variable.

二、数据类型体系：基本类型与引用类型

JavaScript 是一种动态弱类型语言。当前规范共定义了 8 种数据类型，划分为两大阵营：7 种基本数据类型（Primitive Types）和1 种引用数据类型（Reference Type）。

1. 八大类型全览

• Number：双精度 64 位二进制浮点数，可表示整数和浮点数。包含特殊数值 NaN（Not-a-Number）和 Infinity。
• BigInt：用于表示任意精度的整数，在数字末尾追加 n（例如 9007199254740993n），用于解决超出 Number.MAX_SAFE_INTEGER 的精度溢出。
• String：不可变的字符序列，使用单引号、双引号或反引号（模板字符串）包裹。
• Boolean：逻辑实体，仅有 true 和 false 两个布尔值。
• Undefined：表示“缺少值”，变量已声明但未赋值时的默认状态。
• Null：表示“空对象指针”，通常由开发者显式赋值，指代有意设置的空值。
• Symbol：ES6 引入的原始类型，调用 Symbol() 生成全局唯一的标识符，常用于防止对象属性键冲突。
• Object：引用类型总称，包含普通对象、数组（Array）、函数（Function）、日期（Date）及正则（RegExp）等。

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

基本类型与引用类型在计算机内存中的组织结构完全不同：

• 基本类型存放在栈内存：基本类型占用固定大小的内存空间，其值直接内联存储在栈内存中。当复制一个基本类型变量时，系统会在栈中分配独立的空间存放新值，修改互不干扰。
• 引用类型存放在堆内存：对象的大小是动态且不固定的，其实体数据分配在堆内存中。而在栈内存中，变量只保存一个指向该堆内存实体的指针地址。当复制一个引用类型变量时，复制的仅是指针地址，两个变量仍指向同一份堆数据。

3. 数据类型检测手段与历史陷阱

在日常开发中，正确检测变量类型是编写健壮逻辑的先决条件：

• typeof 运算符：可有效识别除 null 外的所有基本类型以及函数。

  typeof 42;          // "number"
  typeof "Hello";     // "string"
  typeof true;        // "boolean"
  typeof undefined;   // "undefined"
  typeof Symbol();    // "symbol"
  typeof 100n;        // "bigint"
  typeof function(){};// "function"

  历史陷阱：typeof null 的计算结果为 "object"。这是 JavaScript 最初版本遗留的底层二进制标记缺陷（对象标记位为 000，而 null 指针全是 0），为了维持向后兼容性一直保留。判断 null 必须使用全等操作：val === null。
• 判断数组：数组是特殊对象，typeof [] 返回 "object"。正确判断方式是调用 Array.isArray(arr)。
• 终极类型判断：使用 Object.prototype.toString.call(val)，可以精准返回 "[object Array]"、"[object Date]" 或 "[object RegExp]"。

三、运算符与表达式计算规则

运算符负责连接变量与常量以执行求值。理解运算符的优先级和隐式类型转换，是避免隐藏 Bug 的核心。

1. 算术运算符与加号的双重语义

JavaScript 提供了加（+）、减（-）、乘（*）、除（/）、取余（%）和指数（**）等算术运算符。其中加号 + 具有双重语义：

• 如果两个操作数均为数字，执行数学相加。
• 只要任意一个操作数为字符串，+ 便会被重载为字符串拼接运算符，另一个操作数会被强制隐式转换为字符串：

  console.log(1 + 2);     // 3
  console.log(1 + "2");   // "12" (隐式转换为字符串并拼接)
  console.log("5" - 2);   // 3 (减号强制触发数字转换)
  console.log("5" * "2"); // 10 (乘号强制触发数字转换)

2. 比较运算符：严格全等（===）与宽松相等（==）

严格相等运算符 === 会在比对时同时校验数据类型与实际数值。若类型不同，直接返回 false，绝不进行隐式转换。

宽松相等运算符 == 则会在类型不一致时触发极其复杂的隐式强制类型转换规则：

console.log(0 == false);   // true (布尔 false 转为数字 0)
console.log("" == 0);      // true (空字符串转为数字 0)
console.log(null == undefined); // true (规范规定两者在宽松比较下互等)
console.log(null === undefined); // false (类型不同，严格不等)

3. 逻辑运算符与短路求值特性

JavaScript 的逻辑与（&&）、逻辑或（||）和逻辑非（!）不仅返回布尔值，其计算遵循“短路求值”（Short-Circuit Evaluation）原则，直接返回决定结果的那个操作数的原始值：

• 逻辑与 expr1 && expr2：如果 expr1 为假值（falsy），立即返回 expr1；否则返回 expr2。常用于前置条件校验：

  const user = { profile: { avatar: "pic.jpg" } };
  const avatar = user && user.profile && user.profile.avatar;

• 逻辑或 expr1 || expr2：如果 expr1 为真值（truthy），立即返回 expr1；否则返回 expr2。常用于设置备选默认值：

  function greet(name) {
    const finalName = name || "Guest";
    return "Hello, " + finalName;
  }

• 空值合并运算符 ??（Nullish Coalescing）：当使用 || 设置默认值时，如果传入合法的 0 或空字符串 ""，它们会被误当成 falsy 而被默认值覆盖。ES2020 引入的 ?? 仅在左操作数为 null 或 undefined 时才会返回右侧值：

  const userScore = 0;
  const score1 = userScore || 100; // 错误：得到 100，0 被误覆盖
  const score2 = userScore ?? 100; // 正确：得到 0，保留有效数值

四、工程化最佳实践与核心总结

综合以上对变量、数据类型与运算符的系统剖析，在实际工程编码中应遵循以下核心原则：

1. 变量声明单一职责：默认使用 const 声明所有变量，仅在需要重新赋值时使用 let，在现代代码库中彻底禁止 var。
2. 明确类型边界：涉及数值计算时注意 NaN 传播与浮点数精度（如 0.1 + 0.2 !== 0.3），超大整数务必采用 BigInt。
3. 防御式判空：访问嵌套对象属性优先使用可选链操作符 ?.，设定默认值优先使用空值合并运算符 ??。
4. 严格全等比对：牢牢把握 === 与 !==，彻底摒弃带有隐式类型转换风险的 ==。