本文教你如何从 API 返回的 JSON 数组中，精准筛选出 def: true 的对象，并提取其 address 字段，最终拼接为逗号分隔的字符串，避免常见错误（如类型误判、空数组访问）。
本文教你如何从 api 返回的 json 数组中，精准筛选出 `def: true` 的对象，并提取其 `address` 字段，最终拼接为逗号分隔的字符串，避免常见错误（如类型误判、空数组访问）。
在实际开发中，我们常通过 API 获取结构化数据，例如一个包含多个地址对象的数组。当需要仅处理其中满足特定条件（如 "def": true）的对象时，必须正确组合数组方法——先过滤（filter），再映射（map），最后聚合（join）。直接使用 map 会遍历全部元素，而未加筛选；若仅用 filter 后强行取 [0].address，则一旦无匹配项或匹配项为空，就会触发 Cannot read properties of undefined 错误。
以下是推荐的健壮写法：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
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（注意使用布尔值 true，而非字符串 'true'），再 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，不可与字符串'true'比较（===不会通过），否则filter返回空数组； -
避免空数组越界：不要对
filter(...)[0].address做链式访问——若无匹配项，[0]为undefined，后续.address必报错； -
可读性优化：当字段本身为布尔类型时，
filter(item => item.def)比filter(item => item.def === true)更简洁自然； -
兼容性考虑：上述写法支持所有现代浏览器及 Node.js 环境；若需兼容旧版 IE，可将箭头函数改为传统
function形式。
总结：数据处理应遵循「筛选 → 转换 → 汇总」的函数式链条，每一步职责单一、语义清晰。掌握 filter 和 map 的协同使用，不仅能解决当前问题，也为处理更复杂的嵌套/条件提取场景打下坚实基础。
