第二十四天：数组 — 管理一批设备的数据利器
蜗牛往上爬 · 前端工业可视化学习笔记 第 24 篇
昨天用对象建模了一台设备，但大屏上通常有几十上百台设备——这就需要数组。今天学数组的增删改查：push/pop/shift/unshift/splice，以及 indexOf/slice/concat/join/reverse。重点记住：哪些方法会改原数组。
目录
一、数组基础与对象数组
// 字面量创建（推荐）
var devices = ["CNC-001", "AGV-002", "ARM-003"];
// 访问：下标从 0 开始
console.log(devices[0]); // "CNC-001"
console.log(devices[devices.length - 1]); // "ARM-003"（最后一个）
console.log(devices[10]); // undefined（越界不报错）
// ⭐ 对象数组：工业大屏的核心数据结构
var deviceList = [
{ id: "CNC-001", name: "数控机床", temp: 65, online: true },
{ id: "AGV-002", name: "搬运机器人", temp: 42, online: true },
{ id: "CNC-004", name: "加工中心", temp: 0, online: false }
];
console.log(deviceList[0].name); // "数控机床"
console.log(deviceList[2].status); // undefined（没有 status 属性）
二、增删四兄弟
var devices = ["AGV-002", "ARM-003"];
// push：尾部添加
devices.push("CNC-004");
// ["AGV-002", "ARM-003", "CNC-004"]
// pop：尾部删除（返回被删元素）
var last = devices.pop(); // "CNC-004"
// unshift：头部添加
devices.unshift("CNC-001");
// ["CNC-001", "AGV-002", "ARM-003"]
// shift：头部删除
var first = devices.shift(); // "CNC-001"
记忆口诀：
三、splice：万能增删改
// splice(起始下标, 删除个数, 插入的元素...)
var devices = ["CNC-001", "AGV-002", "ARM-003", "CNC-004"];
// 删除：从下标 1 删 2 个
devices.splice(1, 2);
// ["CNC-001", "CNC-004"]
// 插入：从下标 1 删 0 个，插入新元素
devices.splice(1, 0, "AGV-005");
// ["CNC-001", "AGV-005", "CNC-004"]
// 替换：从下标 0 删 1 个，插入新元素
devices.splice(0, 1, "CNC-009");
// ["CNC-009", "AGV-005", "CNC-004"]
// 实战：删除指定 id 的设备
var idToRemove = "AGV-005";
var index = devices.indexOf(idToRemove);
if (index !== -1) {
devices.splice(index, 1); // 找到才删
}
四、查找与截取
var devices = ["CNC-001", "AGV-002", "ARM-003"];
// indexOf：查找下标，找不到返回 -1
console.log(devices.indexOf("ARM-003")); // 2
console.log(devices.indexOf("XXX")); // -1
// 判断存在
console.log(devices.indexOf("CNC-001") !== -1); // true
// slice：截取（不改原数组）
var sub = devices.slice(0, 2); // 从下标 0 到 2（不含 2）
// ["CNC-001", "AGV-002"]
// concat：合并（不改原数组）
var all = devices.concat(["CNC-004"]);
// 4 个元素
五、join 与 reverse
// join：数组转字符串
var ids = ["CNC-001", "AGV-002", "ARM-003"];
console.log(ids.join(", ")); // "CNC-001, AGV-002, ARM-003"
console.log(ids.join(" | ")); // "CNC-001 | AGV-002 | ARM-003"
// reverse：反转（改原数组！）
var nums = [1, 2, 3, 4, 5];
nums.reverse();
console.log(nums); // [5, 4, 3, 2, 1]
六、改原数组 vs 不改原数组
这是今天最重要的表格：
不改原数组的方法可以安全地链式调用（如
arr.slice(0, 5).join(",")）。改原数组的方法要小心副作用——尤其是在函数里。
七、总结
🎯 数组的增删改查会了，明天学"高阶方法"——forEach/map/filter/reduce，数据处理的四大神器，外加 JSON。