JavaScript 中基于条件（距离、住宿类型）动态提取数据值的完整教程-html教程-PHP中文网

JavaScript 中基于条件（距离、住宿类型）动态提取数据值的完整教程

本文介绍如何在大型 JavaScript 对象数据集中，根据 Dist（距离）和 Accomodation_Type（住宿类型）等多条件高效筛选并提取 Count 值，并支持动态变量命名（如 Dist_50km_hotel），适用于下拉联动筛选等真实业务场景。

本文介绍如何在大型 javascript 对象数据集中，根据 `dist`（距离）和 `accomodation_type`（住宿类型）等多条件高效筛选并提取 `count` 值，并支持动态变量命名（如 `dist_50km_hotel`），适用于下拉联动筛选等真实业务场景。

在实际前端开发中，尤其面对结构化地理数据（如本例中含 8000+ 条住宿记录、81 个省份、4 类距离阈值、6 种住宿类型），直接遍历原始对象难以满足灵活查询需求。原始数据以嵌套对象形式组织（键为地名如 'Ceyhan'，值为属性对象），但同一地名可能对应多条记录——这说明原始数据结构存在键冲突风险（如示例中重复使用 'Ceyhan' 会导致后写覆盖）。因此，第一步必须确保数据结构合理：推荐将重复地名转为数组或采用唯一 ID 键（如 'Ceyhan_50_hotel'），或预先归一化为数组格式。

✅ 推荐数据预处理：转为可过滤的数组结构

为支持多条件组合查询，应将原始对象转换为扁平化数组，每项代表一条独立记录：

// 预处理：Object.entries → 数组，解决同名覆盖问题
const accommodationList = Object.entries(TR_Accomodation).map(([name, details]) => ({
  name,
  ...details
}));

// 示例输出：
// [
//   { name: 'Hacı Sabancı', İl: 'ADANA', Dist: 100, Accomodation_Type: 'hotel', Count: 52 },
//   { name: 'Ceyhan', İl: 'ADANA', Dist: 100, Accomodation_Type: 'motel', Count: 25 },
//   { name: 'Ceyhan2', İl: 'ADANA', Dist: 50, Accomodation_Type: 'hotel', Count: 31 }
// ]

? 多条件精准提取：封装通用查询函数

以下函数支持按任意 Dist 范围 + Accomodation_Type 组合提取所有匹配项的 Count 值（返回数组，便于求和/取最大值等）：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

/**
 * 根据距离上限和住宿类型提取所有匹配的 Count 值
 * @param {number} maxDist - 最大允许距离（km）
 * @param {string} type - 住宿类型，如 'hotel'、'motel'
 * @returns {number[]} 所有匹配记录的 Count 数组
 */
function getCountsByDistAndType(maxDist, type) {
  return accommodationList
    .filter(item => item.Dist  item.Count);
}

// 使用示例：获取 Ceyhan 地区（需配合 name 过滤）或全局范围内 Dist ≤ 50 且为 hotel 的所有 Count
const counts50Hotel = getCountsByDistAndType(50, 'hotel'); // [31]
const counts100Motel = getCountsByDistAndType(100, 'motel'); // [25]

? 动态变量命名与结果绑定（如 Dist_50km_hotel）

若需将结果存入具名变量（便于模板渲染或状态管理），可借助 Object.assign 或直接挂载到命名空间对象：

// 创建动态变量容器
const distTypeCounts = {};

// 生成变量名并赋值（总和形式更实用）
distTypeCounts['Dist_50km_hotel'] = getCountsByDistAndType(50, 'hotel').reduce((a, b) => a + b, 0);
distTypeCounts['Dist_100km_motel'] = getCountsByDistAndType(100, 'motel').reduce((a, b) => a + b, 0);

console.log(distTypeCounts.Dist_50km_hotel); // 31
console.log(distTypeCounts.Dist_100km_motel); // 25

// ✅ 进阶：自动生成全部组合（适合 4×6=24 种组合）
const distThresholds = [50, 100, 150, 200];
const types = ['hotel', 'motel', 'hostel', 'apartment', 'resort', 'guesthouse'];

distThresholds.forEach(dist => {
  types.forEach(type => {
    const key = `Dist_${dist}km_${type}`;
    distTypeCounts[key] = getCountsByDistAndType(dist, type).reduce((sum, c) => sum + c, 0);
  });
});

⚠️ 关键注意事项

数据唯一性：原始对象中重复键（如多个 'Ceyhan'）会导致数据丢失，务必在初始化阶段校验并修复（建议用 Array 存储或添加唯一后缀）；

性能优化：对 8000 行数据，filter + map 在现代浏览器中毫秒级完成，无需额外优化；如需高频查询，可预先构建索引对象：

const indexByDistAndType = {};
accommodationList.forEach(item => {
  const key = `${item.Dist}_${item.Accomodation_Type}`;
  if (!indexByDistAndType[key]) indexByDistAndType[key] = [];
  indexByDistAndType[key].push(item.Count);
});
// 查询 Dist=50 & type='hotel' → indexByDistAndType['50_hotel']