第 09 节 · JS 变量与数据类型

📌 版本信息：基于 ECMAScript 2025（ES 语言标准年更，本节内容为基础语义、多年稳定；2026-08-29 核对） 📚 来源：现代 JavaScript 教程 · 变量 ｜ MDN JavaScript 数据类型 ｜ 本地教材 resources/01-web-basics/modern-js-tutorial/1-js/

一、这一节的目标

1. 会用 let / const 声明变量，知道为什么不用 var
2. 认全 JS 的 8 种数据类型，会判断"手上是什么类型"
3. 理解 == 与 === 的区别，养成全等习惯
4. 看懂类型转换的三个方向（字符串/数字/布尔）
5. 为 GIS 数据建模热身：经纬度、城市名、坐标数组该用什么类型

---

二、变量：给值起名字

// const：声明"不会再指向别处"的量（90% 的场景用它）
const cityName = '武汉';
const lat = 30.59;

// let：声明"以后要重新赋值"的量
let count = 0;
count = 1;   // ✅ let 可以改

// const 并非"值不可变"，而是"不可重新指向"——对象内部照样能改：
const city = { name: '武汉' };
city.name = '长江之城的武汉';  // ✅ 合法，改的是对象内部
// city = {};                  // ❌ TypeError，不能整体重新赋值

// var：旧时代的变量（作用域怪异、可重复声明），新代码一律不用，
// 但老代码里会见到，看到能认出即可。
var old = '别写我了';

命名规范（ camelCase 小驼峰）：mapCenter、tileSize、geojsonData（这类缩写可全大写 GeoJSON）。见名知意：lat/lng 比 a/b 强一万倍。

---

三、八种数据类型（先记前 7 个）

// ── 原始类型（7 个，值本身不可变）──
const age = 25;                  // 1. number：整数和小数都是它（还有特殊值 NaN、Infinity）
const price = 9.9;               //    注意：JS 浮点数有精度坑，0.1+0.2 !== 0.3
const name = '武汉';             // 2. string：单引号/双引号/反引号都行，推荐单引号或反引号
const isOnline = true;           // 3. boolean：true / false
let empty = undefined;           // 4. undefined：声明了但没赋值（系统给的"还没准备"）
const nothing = null;            // 5. null：刻意表示"空"（程序员主动放的"没有"）
const bigId = 9007199254740993n; // 6. bigint：超大整数（经纬度乘 1e7 存整数时偶尔用）
const sym = Symbol('id');        // 7. symbol：唯一标识（现阶段知道存在即可）

// ── 引用类型（1 个）──
const city = { name: '武汉', lat: 30.59, lng: 114.30 };  // 8. object：对象
// 数组、函数、日期……本质上都是 object 的变种

undefined vs null 的人话区别：

• undefined = "压根没准备"（你问了一个不存在的属性）
• null = "我明确表示这里是空"（程序员故意赋的）

---

四、typeof：问"你是什么类型"

typeof 25            // 'number'
typeof '武汉'         // 'string'
typeof true          // 'boolean'
typeof undefined     // 'undefined'
typeof null          // 'object' ← 历史遗留 bug！null 的 typeof 结果是错的
typeof {}            // 'object'
typeof []            // 'object' ← 数组也是 object
typeof (() => {})    // 'function'

⚠️ 两个必背的坑：①typeof null === 'object'（20 多年的 bug，改不了了）；②判断数组要用 Array.isArray([])，不能靠 typeof。

---

五、== 与 ===：陷阱之门

1 == '1'       // true  ← == 会先偷偷转类型再比（宽松相等）
1 === '1'      // false ← === 类型和值都要比（严格相等）
null == undefined   // true
null === undefined  // false
NaN === NaN         // false！NaN 连自己都不等于自己，判断 NaN 用 Number.isNaN(x)

规范：永远用 === 和 !==。ESLint 默认会强制这条。== 只在"和 null 比较"时有个合法用法（x == null 同时匹配 null 和 undefined），其余场景一律严格相等。

---

六、类型转换（三大方向）

// → 字符串
String(123)        // '123'（推荐）
123 + ''           // '123'（偷懒写法）

// → 数字
Number('3.14')     // 3.14（推荐，转不动返回 NaN）
parseInt('42px')   // 42（从头解析整数，遇到非数字停）
parseFloat('3.5m') // 3.5
+'3.14'            // 3.14（一元加号，简洁）

// → 布尔（falsy 值只有 6 个，其余全是 true）
Boolean(0)          // false
Boolean('')         // false
Boolean(null)       // false
Boolean(undefined)  // false
Boolean(NaN)        // false
// falsy 六兄弟：false、0、''、null、undefined、NaN —— 面试必考，必背

// 精度坑演示（GIS 存储经纬度时会遇到）
0.1 + 0.2                 // 0.30000000000000004
(0.1 + 0.2).toFixed(2)    // '0.30'（toFixed 转 2 位小数字符串）

💡 GIS 关联：经纬度交换格式常是字符串（'114.3052'），进地图库前要 parseFloat。存库时有人用"度 × 10⁷ 取整"绕开浮点精度——这就是 bigint 场景。第 04 模块讲坐标系时再回来看。

---

七、动手跟练：09 · 类型实验页

配套文件：02-web-basics/examples/09-类型实验页.html（页面打开按 F12 看 Console 输出，代码带逐行注释）

步骤：

1. Live Server 打开，F12 → Console，对照代码读每一行输出
2. 完成 4 个 TODO：判断坐标对象类型、把字符串坐标转数字、修一个 == 为 ===、预测后验证 falsy 列表
3. 挑战：写一个 safeParseFloat(str) 函数，字符串转不了数字时返回 null 而不是 NaN

通关标准：

• 不查资料说出 falsy 六兄弟
• 能解释 typeof null 为什么是 'object'
• safeParseFloat('114.3N') 返回 null，safeParseFloat('114.3') 返回 114.3

---

八、自测题

1. const 声明的对象内部还能改吗？"不可变"到底指什么？
2. 0.1 + 0.2 === 0.3 的结果和原因？工程上怎么比两个浮点数相等？
3. Number('')、Number('12a')、parseInt('12a') 分别返回什么？
4. 怎么正确判断一个变量是数组？
5. x == null 这个写法为什么被允许？

参考答案

1. 能改内部属性；const 限制的是"变量不能重新指向别处"（不能整体重新赋值）。
2. false；二进制浮点表示误差导致。工程上用 Math.abs(a - b) < 1e-9 这类容差比较。
3. 0（空串转 0！也是坑）、NaN、12。
4. Array.isArray(x)。
5. 因为它同时匹配 null 和 undefined，是 JS 圈约定的简洁判空写法（本质是宽松相等的特例）。

---

九、下一步

有了"值"，接下来要让程序会"判断和重复" → 第 10 节：运算符与流程控制。