
本文详解当 quasar 应用中 `master.news` 实际为键值对对象(而非真正数组)时,如何正确删除如 `id: 12` 对应的整项数据,避免误用 `splice()` 导致 typeerror。
在 Quasar(基于 Vue 3)开发中,开发者常误将形如 {1: {...}, 2: {...}, 12: {...}} 的结构当作数组处理。但该结构本质是一个普通 JavaScript 对象(Object),其数字键(如 1, 12, 15)是属性名,而非数组索引。因此,Array.prototype.splice() 方法不可用——这正是报错 Uncaught TypeError: master.news.splice is not a function 的根本原因。
✅ 正确做法:使用 delete 操作符移除对象属性
const id = 12; delete master.news[id];
执行后,master.news 中键为 "12" 的属性(即整个 {id: 12, title: 'cc', ...} 对象)将被彻底删除。注意:delete 会修改原对象,且返回布尔值(成功为 true)。
⚠️ 注意事项:
- delete 不会重排键名或改变对象长度(对象无 length 属性),仅移除指定属性;
- 若后续需遍历剩余项,推荐使用 Object.values(master.news) 获取纯值数组,或 Object.entries(master.news) 处理键值对;
- 若业务逻辑本意是维护有序列表,建议统一使用真实数组(如 [{id: 1, ...}, {id: 2, ...}]),此时方可安全使用 splice()、filter() 等数组方法:
// ✅ 若 master.news 是数组:按 id 删除
master.news = master.news.filter(item => item.id !== 12);
// ✅ 或使用 findIndex + splice(需确保存在)
const index = master.news.findIndex(item => item.id === 12);
if (index !== -1) {
master.news.splice(index, 1);
}? 总结:判断数据结构是前提——用 Array.isArray(master.news) 快速验证;对象用 delete,数组用 filter/splice。Quasar 本身不改变 JS 基础行为,精准识别数据类型才能写出健壮、可维护的代码。










