第 7 周总结：JavaScript 环境搭建与语言入门 — 从 HTML/CSS 到 JS 的第一步
蜗牛往上爬 · 前端工业可视化学习笔记 第 7 周总结
本周正式进入阶段1：JavaScript 核心基础。搭好了 Node.js 环境，学会了变量声明、六大数据类型、运算符、类型转换和比较运算。这是 JS 的"地基"——地基打牢了，后续的流程控制、函数、DOM 操作才能顺畅。
目录
一、本周学了什么
知识图谱
JS 语言入门
├── 运行环境
│ ├── 浏览器控制台（F12 → Console）
│ ├── Node.js（node xxx.js）
│ └── HTML <script> 标签（内嵌/外链）
│
├── 变量声明
│ ├── var 关键字
│ ├── 命名规则（字母/数字/下划线/$，不数字开头）
│ └── 驼峰命名（deviceName）
│
├── 六大数据类型
│ ├── Number（整数、浮点、Infinity、NaN）
│ ├── String（单引号、双引号、转义、拼接）
│ ├── Boolean（true / false）
│ ├── undefined（声明未赋值）
│ ├── null（主动置空）
│ └── Object（对象、数组）
│
├── typeof 运算符
│ ├── 检测基本类型
│ └── 注意：typeof null === "object"（bug）
│
├── 运算符
│ ├── 算术：+ - * / % **
│ ├── 赋值：+= -= *= /= %=
│ └── 自增自减：++ --
│
├── 类型转换
│ ├── 显式：Number() / String() / Boolean() / parseInt() / parseFloat()
│ ├── 隐式：+ 优先拼接，-*/ 优先转数字
│ └── 6 个 Falsy 值：false / 0 / "" / null / undefined / NaN
│
└── 比较与逻辑
├── ==（宽松相等，会类型转换）→ 不推荐
├── ===（严格相等，不转换）→ 推荐
├── > < >= <= != !==
└── && || !（短路求值）
二、核心知识速记
铁律三条
永远用
===，不用==— 避免隐式类型转换的坑显式转换代替隐式转换 — 用
Number()而不是+转数字记住 6 个 Falsy —
false / 0 / "" / null / undefined / NaN
容易混淆的点
在工业可视化里的应用场景
三、本周踩过的坑
坑点 1：+ 的二义性
// ❌ 以为会做加法，实际是拼接
var result = "温度：" + 65; // "温度：65"（拼接，符合预期）
var result2 = "5" + 3; // "53"（拼接，可能不是你想要的结果）
// ✅ 如果要做数字加法，先转换
var result3 = Number("5") + 3; // 8
坑点 2：== 的意外结果
// ❌ 这些结果可能出乎意料
console.log(0 == ""); // true
console.log(false == "0"); // true
console.log([] == 0); // true
// ✅ 用 === 就不会有这些问题
console.log(0 === ""); // false
console.log(false === "0"); // false
console.log([] === 0); // false
坑点 3：typeof null 的陷阱
// ❌ 用 typeof 判断 null 会得到 "object"
var device = null;
if (typeof device === "object") {
console.log("这是对象"); // 会执行！但 device 是 null
}
// ✅ 直接用 === null 判断
if (device === null) {
console.log("设备为空");
}
坑点 4：NaN 比较
// ❌ NaN 不等于任何值
console.log(NaN === NaN); // false
// ✅ 用 isNaN() 判断
console.log(isNaN(NaN)); // true
console.log(Number.isNaN(NaN)); // true（ES6，更严格）
四、自测清单
完成本周后，你应该能回答：
JS 可以在哪三种环境中运行？
console.log/console.table/console.warn/console.error的区别？如何用
var声明变量？命名规则是什么？JS 有哪六大数据类型？各自的示例是什么？
typeof用来做什么？typeof null的结果是什么？undefined和null的区别是什么？算术运算符有哪些？
%和**分别是什么？Number("123")、Number("abc")、Number("")的结果？parseInt("123abc")和parseFloat("3.14.15")的结果？6 个 Falsy 值是什么？
Boolean(" ")的结果？==和===的区别？为什么推荐用===？&&和||的短路求值是什么意思？NaN === NaN的结果？如何正确判断 NaN？
五、下周预告
第 8 周：流程控制与函数
下周将进入"让程序有逻辑"的阶段——用条件判断做分支，用循环做重复，用函数封装逻辑。学完下周，你就能写出有实际功能的 JS 程序了。
🚀 第 7 周完成！JS 的大门已经打开，下周开始写真正的逻辑代码。