JavaScript遍历哈希结构代码重构咨询：搜索筛选按钮逻辑优化

嘿，我来帮你重构这段用于切换按钮文本的代码，让它更简洁、易读且易于维护。先梳理下现有代码的可优化点，再给出具体的重构方案：

现有代码的问题点 #

• 重复DOM查询：每次点击都调用document.getElementById("families")，没必要重复获取同一元素
• 冗余DOM操作：先清空innerHTML再用insertAdjacentHTML插入文本，其实可以直接修改文本内容
• 状态变量语义模糊：count变量的含义不明确，其他人看代码很难立刻理解它控制的是“显示/隐藏”状态
• 文本硬编码：切换的文本直接写在逻辑里，后续修改或扩展不够灵活

重构后的代码方案 #

方案1：基础简洁版 #

// 提前缓存DOM元素，避免重复查询
const familiesBtn = document.getElementById("families");
// 用语义化的状态变量替代count，一眼就能看懂含义
let isShowingAngefragt = true;

function toggleBtnText() {
  // 直接切换文本内容，省去冗余的清空和插入操作
  familiesBtn.textContent = isShowingAngefragt ? "Hide Angefragt" : "Zeige Angefragt";
  // 翻转状态
  isShowingAngefragt = !isShowingAngefragt;
}

// 绑定点击事件
familiesBtn.addEventListener("click", toggleBtnText);

方案2：可扩展配置版 #

如果后续可能需要添加更多状态或修改文本，用哈希（对象）管理文本映射会更灵活：

const familiesBtn = document.getElementById("families");
// 用对象存储状态与文本的对应关系，方便后续修改或扩展
const btnTextConfig = {
  show: "Zeige Angefragt",
  hide: "Hide Angefragt"
};
let currentState = "show";

function toggleBtnState() {
  // 切换状态
  currentState = currentState === "show" ? "hide" : "show";
  // 从配置对象中获取对应文本
  familiesBtn.textContent = btnTextConfig[currentState];
}

familiesBtn.addEventListener("click", toggleBtnState);

关于哈希结构遍历的额外优化 #

如果你的完整代码里涉及哈希（对象）的遍历操作，推荐用更现代、安全的方法：

• 遍历键值对用Object.entries(obj)，不会遍历原型链上的属性：

  const targetHash = { option1: "value1", option2: "value2" };
  for (const [key, value] of Object.entries(targetHash)) {
    // 处理每个键值对
    console.log(`键：${key}，值：${value}`);
  }
  

• 只遍历键用Object.keys(obj)，只遍历值用Object.values(obj)，按需选择即可

这样重构后，代码逻辑更清晰，DOM操作更高效，也更易于后续维护和扩展～

内容的提问来源于stack exchange，提问作者Dende