第 9 周总结：对象、数组与 JSON — 让数据"有结构"
蜗牛往上爬 · 前端工业可视化学习笔记 第 9 周总结
本周掌握了 JS 最重要的两种数据结构：用对象建模"一台设备"，用数组管理"一批设备"，用高阶方法做数据处理流水线，用 JSON 完成数据传输的序列化。这些都是工业大屏天天要用的核心能力。
目录
一、本周学了什么
知识图谱
对象、数组与 JSON
├── 对象
│ ├── 字面量 { key: value }（值可嵌套对象/数组/函数）
│ ├── 读写：点语法 / 方括号（变量 key 必须用方括号）
│ ├── 删除：delete / 检查：in、hasOwnProperty
│ ├── 遍历：for...in（obj[key] 不是 obj.key）
│ ├── this：方法中指向对象本身
│ └── 引用类型：赋值传地址、=== 比地址
│
├── 数组
│ ├── 对象数组（大屏核心数据结构）
│ ├── 增删：push/pop（尾）、unshift/shift（头）
│ ├── splice：删/插/替换三合一
│ ├── 查找：indexOf（-1 表示不存在）
│ └── 不改原数组：slice/concat/join
│
├── 高阶方法
│ ├── forEach（遍历做事）
│ ├── map（一对一转换）
│ ├── filter（筛选）
│ ├── reduce（聚合：求和/平均/统计）
│ └── 链式调用：filter → map → reduce
│
└── JSON
├── stringify（对象 → 字符串，发数据）
├── parse（字符串 → 对象，收数据）
├── 规则：双引号、无函数、无尾逗号
└── parse 必须 try/catch
二、核心知识速记
三条铁律
对象是引用类型——赋值传地址，
{a:1} === {a:1}是 falsefor…in 必须用
obj[key]——obj.key会去找名为 “key” 的属性filter/map/reduce 都不改原数组——放心链式调用
高阶方法选型口诀
在工业可视化里的应用场景
三、本周踩过的坑
坑点 1：for…in 用了 obj.key
// ❌ device.key 会去找名为 "key" 的属性 → undefined
for (var key in device) {
console.log(device.key);
}
// ✅ key 是变量，必须用方括号
for (var key in device) {
console.log(device[key]);
}
坑点 2：忽略引用类型，误改了原数据
// ❌ backup 和 original 指向同一个对象
var original = { temp: 65 };
var backup = original;
backup.temp = 100;
console.log(original.temp); // 100 ⚠
// ✅ 需要拷贝时用 JSON（简单但只适用于纯数据）
var backup = JSON.parse(JSON.stringify(original));
backup.temp = 100;
console.log(original.temp); // 65 ✅
坑点 3：splice 删除前没检查下标
// ❌ indexOf 返回 -1 时，splice(-1, 1) 会删掉最后一个元素！
var devices = ["A", "B", "C"];
devices.splice(devices.indexOf("X"), 1); // 删掉了 "C"！
// splice(-1, 1) 表示"从倒数第一个删一个"
// ✅ 先判断再删
var index = devices.indexOf("X");
if (index !== -1) {
devices.splice(index, 1);
}
坑点 4：map 回调忘记 return
// ❌ 忘记 return，新数组全是 undefined
var temps = deviceList.map(function (device) {
device.temp; // 没有 return！
});
console.log(temps); // [undefined, undefined, ...]
// ✅ map/filter 的回调必须 return
var temps = deviceList.map(function (device) {
return device.temp;
});
坑点 5：JSON.parse 没有容错
// ❌ 非法 JSON 直接抛错，页面崩溃
var data = JSON.parse(response); // response 格式错就完蛋
// ✅ 必须 try/catch
var data;
try {
data = JSON.parse(response);
} catch (error) {
data = null;
console.error("数据解析失败");
}
四、自测清单
[ ] 如何用对象字面量描述一台设备（含嵌套和数组）？
[ ] 属性名是变量时，用点语法还是方括号？
[ ] for…in 遍历时怎么访问属性值？
[ ] 对象赋值给另一个变量后修改，原对象会变吗？为什么？
[ ] push/pop 和 unshift/shift 分别操作数组的哪一端？
[ ] splice 的三个参数分别是什么？
[ ] indexOf 找不到元素时返回什么？splice 这个值会怎样？
[ ] 哪些数组方法改原数组？哪些不改？
[ ] map 的回调忘记 return 会怎样？
[ ] 四大高阶方法各自的返回值是什么？
[ ] 用 reduce 统计"各状态设备数量"，初始值设什么？
[ ] JSON 和 JS 对象有哪些区别？
[ ] JSON.parse 为什么要 try/catch？
五、下周预告
第 10 周：原型、DOM 与事件（JS 基础收官周）
下周是 JS 基础的收官周。学完 DOM 和事件，JS 就能真正操作网页了——阶段0 做的大屏终于可以"动"起来。收官项目是"设备清单增删改查"页面，它会用到前 4 周学的所有知识。
🚀 第 9 周完成！数据结构齐了，下周让 JS "看见"页面、操作页面！