JavaScript筛选房屋数据需先确认response.data为数组，再用filter等方法按价格、区域、房间数、标签、状态等条件筛选，推荐用动态filters对象统一处理。
JavaScript 处理后端返回的房屋租赁数据并筛选，核心是：拿到数据 → 解析结构 → 用数组方法（如 filter、map）按条件提取或转换 → 渲染或进一步使用。关键不是“怎么写代码”，而是“清楚数据结构”和“明确筛选逻辑”。
确认接口返回的数据结构
后端通常返回 JSON 格式，比如：
{
"code": 200,
"data": [
{
"id": 101,
"title": "朝阳区精装一居室",
"price": 4500,
"area": 62,
"rooms": 1,
"district": "朝阳区",
"status": "available",
"tags": ["地铁", "押一付三"]
},
{
"id": 102,
"title": "西城区老小区两居室",
"price": 6200,
"area": 78,
"rooms": 2,
"district": "西城区",
"status": "available",
"tags": ["学区", "装修旧"]
}
]
}
你需要先检查 response.data 是否为数组，再进行筛选。常见错误是直接对整个响应对象调用 filter，结果报错。
常用筛选场景与对应写法
假设你已通过 fetch 或 axios 获取到响应，并提取出房源列表：const list = response.data || [];
立即学习“Java免费学习笔记（深入）”；
-
按价格区间筛选：比如 4000–5500 元/月
list.filter(item => item.price >= 4000 && item.price -
按区域+房间数组合筛选：比如“朝阳区且至少两居”
list.filter(item => item.district === '朝阳区' && item.rooms >= 2) -
按标签模糊匹配：比如包含“地铁”或“学区”
list.filter(item => item.tags.some(tag => ['地铁', '学区'].includes(tag))) -
排除已下架房源：只保留
status === 'available'list.filter(item => item.status === 'available')
支持动态筛选的实用写法
用户在页面上调整筛选条件（如滑动价格条、勾选区域），推荐把条件收集成一个对象，再统一过滤：
const filters = {
minPrice: 4000,
maxPrice: 6000,
districts: ['朝阳区', '海淀区'],
minRooms: 1,
hasTag: '地铁'
};
const filtered = list.filter(item => {
if (item.price < filters.minPrice || item.price > filters.maxPrice) return false;
if (!filters.districts.includes(item.district)) return false;
if (item.rooms < filters.minRooms) return false;
if (filters.hasTag && !item.tags.includes(filters.hasTag)) return false;
return true;
});
这样逻辑清晰、易扩展，也方便后续加搜索关键词、排序等能力。
注意异步与错误边界
真实项目中别忘了处理加载状态和异常：
- 请求前设
loading = true，渲染骨架屏或 loading 提示 - 用
try/catch或.catch()捕获网络失败或解析错误 - 检查
response.code是否为成功码（如 200），避免把错误信息当数据筛 - 对可能为
null或undefined的字段做防御性判断，例如：item?.price ?? 0
