如何精简表情输入应用中重复的硬编码JS判断逻辑代码？

核心逻辑是抽离表情名称与符号的映射关系，把重复的执行逻辑合并，彻底消除冗余的硬编码分支：

步骤1：提前定义全局映射字典 #

把所有表情的名称（小写）和对应表情符号存在一个对象里，后续新增表情只需要维护这个对象即可：

// 所有表情映射都统一存在这里，新增直接加键值对即可
const emojiMap = {
  honeypot: "🍯",
  chocolate: "🍫",
  // 其他10余个表情都按这个格式加在这里
}

步骤2：改造事件监听逻辑 #

把重复的执行逻辑抽成公共部分，只需要判断输入是否能在映射表中匹配到即可：

addToBeginning.addEventListener("click", () => {
  const inputVal = inputEl.value.trim().toLowerCase()
  // 匹配到对应表情再执行操作
  if (emojiMap[inputVal]) {
    emojis.unshift(emojiMap[inputVal])
    emojiOutput.textContent = emojis.join(" ")
    inputEl.value = ""
    inputEl.focus()
  }
  // 可选：匹配失败可以加提示，比如输入不存在的表情名给用户反馈
  // else { alert("未找到对应表情") }
})

优化收益 #

• 没有冗余重复代码，整体代码量减少70%以上
• 后续新增表情不需要加判断分支，仅需在emojiMap中新增一行键值对即可
• 逻辑聚合，后续要修改插入、重置输入框等公共逻辑时，仅需修改一处就能全局生效

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