如何为冗长的if代码块使用简写语法？

针对你这段根据选择项给对象赋值的代码，有几种简洁的优化方式：

1. 对象映射（推荐，扩展性强） #

把选项文本和对应的data键名做一个映射表，直接通过键值对匹配赋值，避免一堆else if：

// 建立选项与data键的映射
const keyMap = {
  "Email": "email",
  "Name": "name",
  "Surname": "surname"
};

// 简化后的逻辑
if (selected.value && search.value) {
  const key = keyMap[selected.value];
  if (key) { // 确保选项在映射范围内
    data[key] = search.value;
  }
}
// 当selected或search为空时，data保持原样，无需额外处理

这种方式的好处是后续要加新选项时，只需要在keyMap里新增键值对就行，不用改逻辑代码。

2. 逻辑与替代单分支判断 #

如果不想额外建映射表，也可以用逻辑与&&简化单分支if：

if (selected.value && search.value) {
  const selectedVal = selected.value;
  const searchVal = search.value;
  
  selectedVal === "Email" && (data.email = searchVal);
  selectedVal === "Name" && (data.name = searchVal);
  selectedVal === "Surname" && (data.surname = searchVal);
}

逻辑与的特性是只有左侧条件成立时，才会执行右侧的赋值操作，能省掉单分支的if关键字。

3. 三元表达式（适合分支极少的场景） #

如果分支数量很少，也可以用三元链，但分支变多后可读性会下降：

if (selected.value && search.value) {
  data[
    selected.value === "Email" ? "email" :
    selected.value === "Name" ? "name" :
    selected.value === "Surname" ? "surname" : ""
  ] = search.value;
}

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