本文详解如何从 API 返回的嵌套 JSON 数组中，精准筛选出 def: true 的对象，并提取其 address 字段拼接为逗号分隔字符串，避免常见类型误判与空值报错。
本文详解如何从 api 返回的嵌套 json 数组中，精准筛选出 `def: true` 的对象，并提取其 `address` 字段拼接为逗号分隔字符串，避免常见类型误判与空值报错。
在处理 API 响应时，我们常需从数组中按布尔属性条件筛选对象（如仅保留 "def": true 的条目），再进一步提取指定字段（如 address）进行聚合操作。原始代码中存在两个关键问题：一是使用字符串 'true' 与布尔值 true 严格比较（===）必然失败；二是对 filter() 结果直接取 [0].address，当无匹配项时导致 Cannot read properties of undefined 错误。
正确的做法是先过滤（filter），再映射（map），最后聚合（join），形成安全、可读、可维护的链式操作：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
const data = {
"status": true,
"rspa": [
{ "address": "FB2A23D4-554E9", "def": false, "tk": false },
{ "address": "FA0EBFB496DA-C5465A8D", "def": true, "tk": false },
{ "address": "FA0434B496DA-C5465A8D", "def": true, "tk": false }
]
};
// ✅ 正确：先 filter（布尔值对比），再 map 提取 address，最后 join
const addresses = data.rspa
.filter(item => item.def === true) // 或简写为 item.def（因 def 是布尔类型）
.map(item => item.address)
.join(",");
console.log(addresses);
// 输出：FA0EBFB496DA-C5465A8D,FA0434B496DA-C5465A8D注意事项：
- ❌ 避免
item.def === 'true'：JSON 中def是布尔值true/false，不是字符串；- ❌ 避免
filter(...)[0].address：若无匹配项，[0]为undefined，调用.address必报错；- ✅ 推荐使用
item.def代替item.def === true：语义更清晰，且 JavaScript 布尔上下文自动转换；- ✅ 可添加空值防护（如需健壮性）：
.filter(item => item && typeof item.def === 'boolean' && item.def)
该模式具备良好的扩展性——若后续需同时提取 address 和 tk，只需将 map 改为返回对象或数组；若需去重或排序，也可在 filter 后插入对应操作。掌握 filter → map → reduce/join 这一函数式组合范式，是高效处理前端数据的核心能力之一。
