JavaScript 变量与数据类型

学习 let/const 声明变量，理解基本数据类型 · 难度：入门 · +10XP

JavaScript 变量与数据类型 — 编程的基石

一、什么是变量？为什么它至关重要？

变量是编程中最基础的概念，你可以把变量想象成一个贴了标签的盒子，用来存储数据。在 JavaScript 中，我们使用 var、let 和 const 三个关键字来声明变量。

为什么变量重要？没有变量，程序就无法记住任何信息。无论是用户输入的用户名、购物车里的商品数量，还是网页上的动态内容，都依赖变量来存储和操作数据。掌握变量是学习任何编程语言的第一步，也是最重要的一步。

JavaScript 是一门弱类型（动态类型）语言，这意味着你不需要事先指定变量的数据类型，JS 引擎会在运行时自动推断。这种灵活性让 JS 非常适合快速开发，但也要求开发者对数据类型有清晰的认识，否则容易出现意料之外的 bug。

二、JavaScript 的七种原始数据类型 + 一种引用类型

ES6+ 定义了七种原始类型（Primitive）和一种引用类型（Object）：

原始类型（存储在栈内存，按值访问）：

• number — 整数和浮点数，如 42、3.14、NaN
• string — 文本字符串，如 "hello"、'世界'、模板字符串
• boolean — 只有两个值：true 和 false
• undefined — 变量已声明但未赋值时的默认值
• null — 表示"空"或"无值"，需要显式赋值
• symbol — ES6 新增，用于创建唯一的标识符
• bigint — ES2020 新增，用于表示超大整数

引用类型（存储在堆内存，按引用访问）：

• object — 包括普通对象、数组、函数、日期等

三、var、let、const 的区别 — 一张表看懂

特性	var	let	const
作用域	函数作用域	块级作用域 {}	块级作用域 {}
可重复声明	允许	不允许（同作用域）	不允许（同作用域）
可重新赋值	允许	允许	不允许
变量提升	提升并初始化为 undefined	提升但不初始化（TDZ）	提升但不初始化（TDZ）
挂载到 window	是（全局作用域）	否	否
推荐使用	不推荐（遗留）	需要重新赋值时	默认首选

四、详细代码示例（逐行注释）

// 1. 使用 const 声明常量 — 值不可变（默认首选）
const PI = 3.14159;           // 圆周率，永远不会变，用 const
const appName = "编程导航";    // 字符串常量
// 2. 使用 let 声明可变变量 — 值需要改变时使用
let score = 0;                // 分数会随游戏进展而变化
score = score + 10;           // 加分：0 → 10
score += 5;                   // 再加 5 分：10 → 15（+= 是简写）
let userName = "小明";         // 用户名是字符串类型
userName = "小红";            // 可以重新赋值（let 允许）
// 3. number 类型 — 整数和浮点数
let age = 25;                 // 整数
let price = 99.99;            // 浮点数（小数）
let result = 0.1 + 0.2;       // 结果是 0.30000000000000004（浮点精度问题！）
// 解决方法：使用 toFixed(2) 或乘以 10 再除以 10
// 4. string 类型 — 三种写法
let single = '单引号字符串';
let double = "双引号字符串（和单引号等价）";
let template = 你好，${userName}！你的分数是 ${score};
// 模板字符串（反引号）支持嵌入变量和换行
// 5. boolean 类型 — 条件判断的基础
let isLoggedIn = true;        // 已登录
let hasPermission = false;    // 无权限
if (isLoggedIn) {             // 条件为真时执行
  console.log("欢迎回来！");
}
// 6. undefined vs null
let x;                        // 声明但未赋值 → undefined（JS 自动赋予）
console.log(x);               // 输出：undefined
let empty = null;             // 显式赋值为 null（开发者主动设置"空"）
// undefined 表示"缺失"，null 表示"空值"
// 7. typeof 运算符 — 检测数据类型
console.log(typeof 42);       // "number"
console.log(typeof "hello");  // "string"
console.log(typeof true);     // "boolean"
console.log(typeof undefined);// "undefined"
console.log(typeof null);     // "object" ← 这是 JS 的经典 bug！
console.log(typeof {});       // "object"
console.log(typeof []);       // "object" ← 数组也是对象
// 8. 类型转换
let strNum = "123";           // 字符串
let realNum = Number(strNum); // 转为数字 123
let backStr = String(456);    // 转为字符串 "456"
let boolVal = Boolean(1);     // 转为 true（0、""、null、undefined、NaN 转为 false）

五、常见陷阱与最佳实践

陷阱	说明	正确做法
0.1 + 0.2 !== 0.3	浮点数精度丢失	使用 (0.1*10 + 0.2*10)/10 或 toFixed()
typeof null === "object"	历史遗留 bug	使用 value === null 判断
var 的变量提升	var 会被提升到函数顶部	统一使用 let/const
== vs ===	== 会做类型转换	永远使用 ===（严格相等）

六、实践任务

打开浏览器控制台（F12），完成以下练习：

1. 声明一个 const 常量存储你的名字，声明一个 let 变量存储你的年龄
2. 使用 typeof 检查以下值的类型：42、"42"、true、[1,2,3]、{name:"test"}
3. 将字符串 "2024" 转换为数字，然后加 1，输出结果（应该是 2025）
4. 尝试给 const 常量重新赋值，观察错误信息
5. 使用模板字符串输出一段自我介绍："我叫xxx，今年xx岁"