Javascript - 使用 map 重构（if 语句，意大利面条代码）答案

【问题标题】：Javascript - Refactor (if statement, spaghetti code) using mapJavascript - 使用 map 重构（if 语句，意大利面条代码）
【发布时间】：2021-04-07 06:23:10
【问题描述】：

我有以下代码：

for (const element of elements) {
  try {
    // eslint-disable-next-line no-await-in-loop
    const { a, b, c, d, e } = await func(element.id);

    if (tokens.includes(a)) {
      saveElement("a", a, element.id); // First arg is the key as string
      break;
    }

    if (tokens.includes(b)) {
      saveElement("b", b, element.id);
      break;
    }

    ...

    if (tokens.includes(e)) {
      saveElement("e", e, element.id);
      break;
    }
  } catch (err) {
    console.error(err);
  }
}

您可以想象，可能有一种方法可以避免这个长长的 if 语句队列...如果您看到，代码中有某种模式，其中唯一不同的是从func() 的结果。

有什么方法可以让这个更干净吗？我的意思是，为了避免意大利面代码。

谢谢。

【问题讨论】：

标签： javascript coding-style refactoring

【解决方案1】：

改为遍历属性名称数组，并使用.find 查找第一个匹配的名称（如果有）：

const properties = ['a', 'b', 'c', 'd', 'e'];
for (const { id } of elements) {
  try {
    // eslint-disable-next-line no-await-in-loop
    const obj = await func(id);
    const prop = properties.find(prop => tokens.includes(obj[prop]));
    if (prop) {
      saveElement(prop, obj[prop], id);
    }
  }

不再需要break。

【讨论】：