17370845950

本文介绍如何像 jquery 选择 xml 节点一样简洁高效地过滤 json 数组，利用原生 `array.prototype.filter()` 和动态属性访问（`obj[key]`）实现与 `'creature > desert:contains("true")'` 等效的语义化筛选。

从 XML 迁移到 JSON 后，开发者常怀念 jQuery 提供的链式、类 CSS 选择器式的过滤能力（如 $('Creature > Desert:contains("true")').parent()）。但 JSON 作为纯数据结构，不支持 DOM 查询语法——这并非缺陷，而是契机：我们可借助现代 JavaScript 的函数式方法，写出更清晰、更可控、无需依赖库的等效逻辑。

核心思路非常直接：将用户选中的地形字段名（如 "Desert"）作为动态键，遍历数组，检查对应属性是否为 true。使用 filter() 配合方括号属性访问即可优雅实现：

const creatures = [
  { "Name": "Someone", "Desert": false, "Woods": false, "Mountains": false, "Swamp": false },
  { "Name": "Sandy",   "Desert": true,  "Woods": false, "Mountains": false, "Swamp": false },
  { "Name": "Bogart",  "Desert": false, "Woods": false, "Mountains": false, "Swamp": true }
];

const selectedTerrain = "Swamp"; // 来自 radio 按钮的 value 值

const filteredCreatures = creatures.filter(creature => creature[selectedTerrain] === true);
// → [{ "Name": "Bogart", "Desert": false, ..., "Swamp": true }]

✅ 优势说明：

• 语义等价：creature[selectedTerrain] === true 完全对应 XML 中 true 的判定逻辑；
• 类型安全：显式使用 === true 可避免 falsy 值（如 0, "", null）误匹配，比仅写 creature[selectedTerrain] 更严谨；
• 零依赖：不依赖 jQuery 或任何第三方库，兼容所有现代浏览器及 Node.js 环境；
• 可扩展性强：轻松组合多条件（如 filter(c => c.Desert && c.Woods)）或支持模糊匹配（c.Name.includes(keyword)）。

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• 确保 selectedTerrain 是合法属性名且存在于每个对象中，否则 creature[selectedTerrain] 返回 undefined，比较结果为 false（安全，但需考虑默认行为）；
• 若后端可能返回字符串 "true"/"false"，请先做类型归一化：Boolean(JSON.parse(creature[selectedTerrain])) 或 creature[selectedTerrain] === "true"；
• 对于大型数组（>10k 项），可结合 find() 替代 filter() 获取首个匹配项以提升性能。

总结：JSON 过滤无需“模拟 XML 语法”，而应拥抱其数据本质——用 filter() + 动态键访问，代码更短、逻辑更明、维护性更高。一次迁移，两次进化。