第二十三天:对象 — 用键值对建模一台工业设备
蜗牛往上爬 · 前端工业可视化学习笔记 第 23 篇
大屏上的每台设备——名称、温度、状态、位置——用什么数据结构描述最自然?答案就是对象。今天学对象字面量、属性读写、for…in 遍历、方法中的 this,以及一个必懂的概念:引用类型。
目录
一、对象字面量
// 用对象建模一台工业设备
var device = {
id: "CNC-001",
name: "数控机床",
temp: 65,
status: "运行中",
online: true,
// 属性值可以是数组
sensors: ["温度传感器", "振动传感器"],
// 属性值可以是嵌套对象
location: {
workshop: "一号车间",
row: 3,
column: 5
},
// 方法:属性值是函数
showInfo: function () {
console.log("设备:" + this.name + ",温度:" + this.temp + "°C");
}
};
device.showInfo(); // "设备:数控机床,温度:65°C"
二、属性的读写删
var device = { id: "CNC-001", name: "数控机床", temp: 65 };
// ===== 读 =====
console.log(device.name); // 点语法(最常用)
console.log(device["name"]); // 方括号
var key = "temp";
console.log(device[key]); // 65 ⭐ key 是变量时必须用方括号
console.log(device.pressure); // undefined(访问不存在的属性不报错)
// ===== 写 =====
device.temp = 70; // 修改
device.pressure = 1.2; // 添加新属性
// ===== 删 =====
delete device.pressure;
// ===== 检查属性是否存在 =====
console.log("temp" in device); // true(推荐)
三、for…in 遍历
var device = { id: "CNC-001", name: "数控机床", temp: 65 };
for (var key in device) {
console.log(key + ":" + device[key]);
// ⭐ key 是变量,必须用方括号
// ❌ device.key 错!会去找名为 "key" 的属性
}
// id:CNC-001
// name:数控机床
// temp:65
四、方法中的 this
var device = {
name: "CNC-001",
temp: 65,
threshold: 80,
isOverheat: function () {
return this.temp > this.threshold; // this 指向 device
},
report: function () {
if (this.isOverheat()) { // 方法内调用其他方法
return this.name + " 温度过高:" + this.temp + "°C";
}
return this.name + " 正常:" + this.temp + "°C";
}
};
console.log(device.report()); // "CNC-001 正常:65°C"
device.temp = 85;
console.log(device.report()); // "CNC-001 温度过高:85°C"
五、引用类型:对象的特殊性
这是本周最重要的概念——对象和数字、字符串的行为完全不同:
// 数字(基本类型):值拷贝
var a = 10;
var b = a;
b = 20;
console.log(a); // 10 ✅ 不受影响
// 对象(引用类型):地址拷贝
var deviceA = { name: "CNC-001", temp: 65 };
var deviceB = deviceA; // 指向同一个对象!
deviceB.temp = 100;
console.log(deviceA.temp); // 100 ⚠ A 也变了
// 函数传参也是传引用
function modifyDevice(dev) {
dev.temp = 999;
}
modifyDevice(deviceA);
console.log(deviceA.temp); // 999 ⚠
// 比较的是地址,不是内容
console.log({ a: 1 } === { a: 1 }); // false(两个不同的对象)
六、实战:工厂函数建模设备
/**
* 创建设备对象(工厂函数)
* @param {string} id 设备编号
* @param {string} name 设备名称
* @param {number} threshold 温度阈值
*/
function createDevice(id, name, threshold) {
return {
id: id,
name: name,
threshold: threshold,
temp: 0,
status: "离线",
start: function () {
this.status = "运行中";
this.temp = 50 + Math.floor(Math.random() * 20);
},
check: function () {
if (this.status === "离线") return this.id + " 已离线";
if (this.temp >= this.threshold) {
return this.id + " ⚠ 温度告警:" + this.temp + "°C";
}
return this.id + " ✅ 正常:" + this.temp + "°C";
}
};
}
var cnc = createDevice("CNC-001", "数控机床", 80);
cnc.start();
console.log(cnc.check());
cnc.temp = 85;
console.log(cnc.check()); // "CNC-001 ⚠ 温度告警:85°C"
七、总结
🎯 对象建模了"一台设备",明天学数组——管理"一批设备"。