正文

在項(xiàng)目中，往往會(huì)看到很多的if-else或者switch，項(xiàng)目會(huì)變得很臃腫，而且不易閱讀，那么今天我們就來(lái)講講優(yōu)化方案

例如，假設(shè)我們有一個(gè)函數(shù)，它接受一個(gè)數(shù)字參數(shù)并返回其實(shí)際含義。使用 if/else 語(yǔ)句，它看起來(lái)像這樣：

function getTranslation(type) {
  if (type === 4) {
    return "forbidden_area";
  } else if (type === 6) {
    return "elevator_area";
  } else if (type === 7) {
    return "dangerous_area";
  } else if (type === 10) {
    return "restricted_area";
  }
  return "other_area";
}

這不是很好。它可讀性差。

我們可以通過(guò)使用 switch 語(yǔ)句優(yōu)化，如下所示：

function getTranslation(type) {
  switch (type) {
    case 4:
      return "forbidden_area";
    case 6:
      return "elevator_area";
    case 7:
      return "dangerous_area";
    case 10:
      return "restricted_area";
    default:
      return "other_area";
  }
}

但這仍然沒(méi)有什么可讀性。switch 語(yǔ)句也容易出錯(cuò)。

在這種情況下，我們只是返回一個(gè)值，但是當(dāng)你具有更復(fù)雜的功能時(shí)，很容易錯(cuò)過(guò) break 語(yǔ)句并引入錯(cuò)誤。

替代方案

你可以使用對(duì)象以更簡(jiǎn)潔的方式實(shí)現(xiàn)與上述相同的功能。讓我們看一個(gè)例子：

function getTranslation(type) {
  const types = {
    4: 'forbidden_area',
    6: 'elevator_area',
    7: 'dangerous_area',
    10: 'restricted_area'
  }
  return types[type] ?? 'other_area'
}

我們有一個(gè)對(duì)象，其中鍵是條件，值是響應(yīng)。然后我們可以使用方括號(hào)符號(hào)從傳入的參數(shù)中選擇對(duì)象的正確值。

函數(shù)中return types[type] ?? 'other_area'使用無(wú)效合并來(lái)分配默認(rèn)響應(yīng)。這意味著如果 types[type]為 null 或undefined（但不是 false 或 0 ），則返回默認(rèn)字符串“other_area”。

|| vs ??

||和??都是指定默認(rèn)值

讀取對(duì)象屬性的時(shí)候，如果某個(gè)屬性的值是null或undefined，有時(shí)候需要為它們指定默認(rèn)值。常見(jiàn)做法是通過(guò)||運(yùn)算符指定默認(rèn)值

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

上面的三行代碼都通過(guò)||運(yùn)算符指定默認(rèn)值，但是這樣寫(xiě)是錯(cuò)的。開(kāi)發(fā)者的原意是，只要屬性的值為null或undefined，默認(rèn)值就會(huì)生效，但是屬性的值如果為空字符串或false或0，默認(rèn)值也會(huì)生效。

為了避免這種情況，ES2020 引入了一個(gè)新的 Null 判斷運(yùn)算符??。它的行為類(lèi)似||，但是只有運(yùn)算符左側(cè)的值為null或undefined時(shí)，才會(huì)返回右側(cè)的值。而||是運(yùn)算符左側(cè)的值為null、undefined、0、''或NaN 時(shí)，都會(huì)返回右側(cè)的值！

更復(fù)雜的邏輯

有時(shí)你可能需要在你的條件中執(zhí)行一些更復(fù)雜的邏輯。為此，你可以將函數(shù)作為值傳遞給對(duì)象鍵并執(zhí)行響應(yīng)：

function calculate(action, num1, num2) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };
  return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}

?.有不懂的話(huà)，可以先看下面，我們正在選擇我們想要做的計(jì)算并執(zhí)行響應(yīng)，傳遞兩個(gè)數(shù)字。你可以使用可選鏈接（最后一行代碼中的 ?.）來(lái)僅執(zhí)行已定義的響應(yīng)。否則，將使用默認(rèn)的返回字符串。

如果函數(shù)里的邏輯足夠復(fù)雜也可以把函數(shù)提取出來(lái)

function add(num1, num2) {
  return num1 + num2
}
function subtract(num1, num2) {
  return num1 - num2
}
function multiply(num1, num2) {
  return num1 * num2
}
function divide(num1, num2) {
  return num1 / num2
}
function calculate(action, num1, num2) {
  const actions = {
    add,
    subtract,
    multiply,
    divide
  }
  return actions[action]?.(num1, num2) ?? 'Calculation is not recognised'
}

?.的說(shuō)明

編程實(shí)務(wù)中，如果讀取對(duì)象內(nèi)部的某個(gè)屬性，往往需要判斷一下，屬性的上層對(duì)象是否存在。比如，讀取message.body.user.firstName這個(gè)屬性，安全的寫(xiě)法是寫(xiě)成下面這樣。

// 錯(cuò)誤的寫(xiě)法
const  firstName = message.body.user.firstName || 'default';
// 正確的寫(xiě)法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

上面例子中，firstName屬性在對(duì)象的第四層，所以需要判斷四次，每一層是否有值。

這樣的層層判斷非常麻煩，因此 ES2020 引入了“鏈判斷運(yùn)算符”（optional chaining operator）?.，簡(jiǎn)化上面的寫(xiě)法。

const firstName = message?.body?.user?.firstName || 'default';

上面代碼使用了?.運(yùn)算符，直接在鏈?zhǔn)秸{(diào)用的時(shí)候判斷，左側(cè)的對(duì)象是否為null或undefined。如果是的，就不再往下運(yùn)算，而是返回undefined。

下面是判斷對(duì)象方法是否存在，如果存在就立即執(zhí)行的例子。

iterator.return?.()

上面代碼中，iterator.return如果有定義，就會(huì)調(diào)用該方法，否則iterator.return直接返回undefined，不再執(zhí)行?.后面的部分。

下面是?.運(yùn)算符常見(jiàn)形式，以及不使用該運(yùn)算符時(shí)的等價(jià)形式。

a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()

上面代碼中，特別注意后兩種形式，如果a?.b()和a?.()。如果a?.b()里面的a.b有值，但不是函數(shù)，不可調(diào)用，那么a?.b()是會(huì)報(bào)錯(cuò)的。a?.()也是如此，如果a不是null或undefined，但也不是函數(shù)，那么a?.()會(huì)報(bào)錯(cuò)。

以上就是詳解如何替換項(xiàng)目中的if-else和switch的詳細(xì)內(nèi)容，更多關(guān)于替換項(xiàng)目中if else switch的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！