本文介绍如何在大型 JavaScript 对象数据集中，根据城市名、最大距离（Dist）和住宿类型（Accomodation_Type）精准筛选并提取 Count 值，支持动态生成如 Dist_50km_hotel 类变量，适用于下拉联动等交互场景。
本文介绍如何在大型 javascript 对象数据集中，根据城市名、最大距离（dist）和住宿类型（accomodation_type）精准筛选并提取 count 值，支持动态生成如 `dist_50km_hotel` 类变量，适用于下拉联动等交互场景。
在实际前端开发中，我们常遇到结构化但非标准数组形式的地理/业务数据——例如以地名（如 'Ceyhan'）为键、属性对象为值的嵌套字面量对象（如 TR_Accomodation）。这类数据虽便于快速索引，却难以直接按多条件（如 Dist ≤ 50 && Accomodation_Type === 'hotel'）批量查询。尤其当数据量达 8000 行、需响应用户下拉选择（如先选“ADANA”，再选“Ceyhan”）时，必须构建可复用、高性能的条件提取逻辑。
核心思路是：将对象临时转为键值对数组 → 过滤 → 按需聚合或提取。Object.entries() 与 Object.fromEntries() 是实现该流程的黄金组合。以下为完整、可扩展的实现方案：
✅ 步骤一：基础过滤 —— 按距离提取所有匹配项
const TR_Accomodation = {
'Hacı Sabancı': { 'İl': 'ADANA', 'Dist': 100, 'Accomodation_Type': 'hotel', 'Count': 52 },
'Ceyhan': { 'İl': 'ADANA', 'Dist': 100, 'Accomodation_Type': 'motel', 'Count': 25 },
'Ceyhan2': { 'İl': 'ADANA', 'Dist': 50, 'Accomodation_Type': 'hotel', 'Count': 31 }
};
// 封装距离过滤函数（支持任意 km 阈值）
const filterByMaxDistance = (maxKm) => {
return Object.fromEntries(
Object.entries(TR_Accomodation)
.filter(([, details]) => details.Dist <h3>✅ 步骤二：精准提取 —— 获取指定城市 + 距离 + 类型的 Count</h3><p>为满足“Ceyhan 在 50km 内且为 hotel 的数量”这一需求，需进一步限定城市名与住宿类型。推荐封装高阶函数：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7957" title="js2java"><img
src="https://img.php.cn/upload/skill/000/000/081/179178140274370.jpg" alt="js2java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7957" title="js2java" class="overflowclass">js2java</a>
<p class="overflowclass">JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...</p>
</div>
<a rel="nofollow" href="/xiazai/skill7957" title="js2java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><pre class="brush:php;toolbar:false;">// 返回满足 city、maxDist、type 条件的 Count 值（未匹配则返回 0）
const getCountByConditions = (city, maxDist, type) => {
const entry = Object.entries(TR_Accomodation).find(([key, details]) =>
key.includes(city) && // 支持模糊匹配（如 'Ceyhan' 匹配 'Ceyhan2'）
details.Dist <h3>✅ 步骤三：进阶优化 —— 预计算并缓存常用组合</h3><p>面对高频调用（如用户反复切换下拉选项），可预先构建索引提升性能：</p><pre class="brush:php;toolbar:false;">// 构建多维索引：{ [city]: { [dist]: { [type]: count } } }
const buildIndex = () => {
const index = {};
Object.entries(TR_Accomodation).forEach(([city, details]) => {
if (!index[city]) index[city] = {};
const distKey = `${details.Dist}km`;
if (!index[city][distKey]) index[city][distKey] = {};
index[city][distKey][details.Accomodation_Type] = details.Count;
});
return index;
};
const lookupIndex = buildIndex();
// 使用示例：lookupIndex['Ceyhan']['50km']['hotel'] → 31⚠️ 注意事项
- 键名唯一性问题：原始数据中 'Ceyhan' 出现两次（被后一个覆盖），务必确保数据源键名唯一，或改用数组存储同名多记录；
- 性能考量：8000 行数据下，Object.entries().filter() 时间复杂度为 O(n)，单次查询毫秒级，无需过度优化；若需实时响应大量并发查询，建议预建索引（步骤三）；
- 健壮性增强：生产环境应添加 typeof details === 'object' && details !== null 等校验，避免运行时错误。
通过以上方法，你不仅能灵活提取任意组合条件下的 Count 值，还能系统化管理地理数据查询逻辑，为后续可视化（如 ECharts 统计图）或表单联动（如二级下拉联动）奠定坚实基础。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
