JavaScript 值与类型

学习目标

这一课用表单里的真实输入练「认类型」：分清数字、字符串、空值和引用类型（reference type，保存的是「地址」而不是值本身的类型，如数组和对象）。读完你应该能解释 '19.9' + 1 为什么得到 '19.91'，能识别 == 隐式转换（类型不同时先自动转换再比较）造成的判断错误，并用显式转换把输入变成可信的值。

问题场景

报名页要算费用：单价来自输入框，人数来自选择器。你写 total = price * count，偶尔是对的；写 total = price + count，"19.9" + 1 得到字符串 "19.91"；判断「没填」用 if (input == 0)，结果空字符串也被当成 0 放行了。三个 bug 同一个根源：你没在管值的类型。

核心解释

JavaScript 的值分两大类。基本类型（primitive，按值保存）：number、string、boolean、undefined（声明了没赋值）、null（有意置空）、symbol、bigint。引用类型：object，数组、函数、日期都属于它。区别在复制行为：

let a = 1;
let b = a;
b = 2; // a 还是 1：基本类型复制「值本身」

const listA = ['js'];
const listB = listA; // 复制的是「地址」，两个名字指向同一个数组
listB.push('css');
console.log(listA); // ['js', 'css'] —— 被 listB 改到了

所以「const 数组还能 push」并不矛盾：const 锁的是绑定（变量指向谁），不是内容。

输入框拿到的永远是字符串，参与计算前必须显式转换（自己动手转，不等浏览器猜）：

const price = '19.9';
price + 1; // '19.91' —— + 一遇到字符串就变成拼接
Number(price) + 1; // 20.9 —— 先转数字再算

比较同理：== 会先隐式转换再比，规则绕人（'' == 0 是 true，'0' == false 也是 true）；=== 严格相等不做转换，类型不同直接 false。工程约定：始终用 ===，需要转换就自己写出来。

示例拆解

一个「读输入 → 转换 → 防御」的完整小流程：

function parseCount(raw) {
  const n = Number(raw); // 注意：'' 会转成 0 而不是 NaN
  if (raw === null || String(raw).trim() === '' || Number.isNaN(n)) {
    return { ok: false, reason: '请输入数字' };
  }
  return { ok: true, value: n };
}

parseCount('3'); // { ok: true, value: 3 }
parseCount('abc'); // { ok: false, reason: '请输入数字' }
parseCount(''); // { ok: false, reason: '请输入数字' }

• Number('abc') 得到 NaN（Not a Number，非法数字运算的结果），检查它用 Number.isNaN，别用 x == NaN——NaN 连自己都不相等。
• 空字符串转数字是 0 而不是 NaN，所以「空输入」要单独拦，这正是 == 0 误判放行的根源。
• 想快速判断真假值可以用 Boolean(x)（falsy 值：转成布尔为 false 的值，包括 0、''、null、undefined、NaN），但表单校验建议显式判断，可读性更好。

动手任务

打开本课实验区，边跑边改：

1. 把实验区里「拼接陷阱」那行修成正确计价，让输出变成 20.9。
2. 给 parseCount 增加「数值不能超过 10」的检查，让 '11' 返回 ok: false。
3. 在注释里回答：为什么 typeof null 返回 'object'，以及为什么判断 null 要用 === null。

常见错误

• 直接拿输入框的值做加法：+ 优先当字符串拼接，先 Number() 再算。
• 用 == 判空：null == undefined 是 true、'' == 0 也是 true，边界全糊在一起；判空用 === null、=== undefined。
• 用 typeof 判断数组：typeof [] 返回 'object'，判断数组用 Array.isArray(x)。
• 以为 const 的对象改不了：const 锁绑定不锁内容；防止对象被改要靠后面课程讲的不可变更新。

检查与复盘

完成下方检查题确认理解。自查清单：

• 能说出基本类型有哪些，以及引用类型与它们在复制行为上的差别
• 看到含 + 或 == 的代码，能预判隐式转换的结果
• 处理用户输入有固定套路：显式转换 → 拦空值 → 拦 NaN

参考资料

• MDN：JavaScript 的数据类型与数据结构 —— 类型系统的总览
• MDN：相等性比较 —— == 与 === 的完整规则
• MDN：typeof 运算符 —— 各类型的返回值与已知怪癖