摘要：通常情況下，面向?qū)ο缶幊套屛覀兊靡员苊鈼l件式，并代之以繼承和多態(tài)。同時，使用條件式簡寫來表示值。因此，對于以這種方式編寫的代碼，你需要使用進行編譯。

原文地址：Tips and Tricks for Better JavaScript Conditionals and Match Criteria

原文作者：Milos Protic

如果你像我一樣樂于見到整潔的代碼，那么你會盡可能地減少代碼中的條件語句。通常情況下，面向?qū)ο缶幊套屛覀兊靡员苊鈼l件式，并代之以繼承和多態(tài)。我認為我們應(yīng)當盡可能地遵循這些原則。

正如我在另一篇文章 JavaScript 整潔代碼的最佳實踐里提到的，你寫的代碼不單單是給機器看的，還是給“未來的自己”以及“其他人”看的。

從另一方面來說，由于各式各樣的原因，可能我們的代碼最終還是會有條件式。也許是修復(fù) bug 的時間很緊，也許是不使用條件語句會對我們的代碼庫造成大的改動，等等。本文將會解決這些問題，同時幫助你組織所用的條件語句。

以下是關(guān)于如何構(gòu)造 if...else 語句以及如何用更少的代碼實現(xiàn)更多功能的技巧。閱讀愉快！

不要使用否定條件式（這可能會讓人感到疑惑）。同時，使用條件式簡寫來表示 boolean 值。這個無須再強調(diào)了，尤其是否定條件式，這不符合正常的思維方式。

不好的：

const isEmailNotVerified = (email) => {
    // 實現(xiàn)
}

if (!isEmailNotVerified(email)) {
    // 做一些事...
}

if (isVerified === true) {
    // 做一些事...
}

好的：

const isEmailVerified = (email) => {
    // 實現(xiàn)
}

if (isEmailVerified(email)) {
    // 做一些事...
}

if (isVerified) {
    // 做一些事...
}

現(xiàn)在，理清了上面的事情后，我們就可以開始了。

假設(shè)我們想要在函數(shù)中檢查汽車模型是 renault 還是 peugeot。那么代碼可能是這樣的：

const checkCarModel = (model) => {
    if(model === "renault" || model === "peugeot") { 
    console.log("model valid");
    }
}

checkCarModel("renault"); // 輸出 "model valid"

考慮到我們只有兩個模型，這么做似乎也還能接受，但如果我們還想要檢查另一個或者是幾個模型呢？如果我們增加更多 or 語句，那么代碼將變得難以維護，且不夠整潔。為了讓它更加簡潔，我們可以像這樣重寫函數(shù)：

const checkCarModel = (model) => {
    if(["peugeot", "renault"].includes(model)) { 
    console.log("model valid");
    }
}

checkCarModel("renault"); // 輸出 "model valid"

上面的代碼看起來已經(jīng)很漂亮了。為了更進一步改善它，我們可以創(chuàng)建一個變量來存放汽車模型：

const checkCarModel = (model) => {
    const models = ["peugeot", "renault"];

    if(models.includes(model)) { 
    console.log("model valid");
    }
}

checkCarModel("renault"); // 輸出 "model valid"

現(xiàn)在，如果我們想要檢查更多模型，只需要添加一個新的數(shù)組元素即可。此外，如果它很重要的話，我們還可以將 models 變量定義在函數(shù)作用域外，并在需要的地方重用。這種方式可以讓我們集中管理，并使維護變得輕而易舉，因為我們只需在代碼中更改一個位置。

在本例中，我們想要檢查每個汽車模型是否都是傳入函數(shù)的那一個。為了以更加命令式的方式實現(xiàn)，我們會這么做：

const cars = [
  { model: "renault", year: 1956 },
  { model: "peugeot", year: 1968 },
  { model: "ford", year: 1977 }
];

const checkEveryModel = (model) => {
  let isValid = true;

  for (let car of cars) {
    if (!isValid) {
      break;
    }
    isValid = car.model === model;
  }

  return isValid;
}

console.log(checkEveryModel("renault")); // 輸出 false

如果你更喜歡以命令式的風(fēng)格行事，上面的代碼或許還不錯。另一方面，如果你不關(guān)心其背后發(fā)生了什么，那么你可以重寫上面的函數(shù)并使用 Array.every 或者 Array.find 來達到相同的結(jié)果。

const checkEveryModel = (model) => {
  return cars.every(car => car.model === model);
}

console.log(checkEveryModel("renault")); // 輸出 false

通過使用 Array.find 并做輕微的調(diào)整，我們可以達到相同的結(jié)果。兩者的表現(xiàn)是一致的，因為兩個函數(shù)都為數(shù)組中的每一個元素執(zhí)行了回調(diào)，并且在找到一個 falsy 項時立即返回 false。

const checkEveryModel = (model) => {
  return cars.find(car => car.model !== model) === undefined;
}

console.log(checkEveryModel("renault")); // 輸出 false

Array.every 匹配所有條件，這個方法則可以輕松地檢查我們的數(shù)組是否包含某一個或某幾個元素。為此，我們需要提供一個回調(diào)并基于條件返回一個布爾值。

我們可以通過編寫一個類似的 for...loop 語句來實現(xiàn)相同的結(jié)果，就像之前寫的一樣。但幸運的是，有很酷的 JavaScript 函數(shù)可以來幫助我們完成這件事。

const cars = [
  { model: "renault", year: 1956 },
  { model: "peugeot", year: 1968 },
  { model: "ford", year: 1977 }
];

const checkForAnyModel = (model) => {
  return cars.some(car => car.model === model);
}

console.log(checkForAnyModel("renault")); // 輸出 true

當我還是學(xué)生的時候，就有人教過我：一個函數(shù)應(yīng)該只有一個返回語句，并且只從一個地方返回。如果細心處理，這個方法倒也還好。我這么說也就意味著，我們應(yīng)該意識到它在某些情況下可能會引起條件式嵌套地獄。如果不受控制，多個分支和 if...else 嵌套將會讓我們感到很痛苦。

另一方面，如果代碼庫很大且包含很多行代碼，位于深層的一個返回語句可能會帶來問題。現(xiàn)在我們都實行關(guān)注點分離和 SOLID 原則，因此，代碼行過多這種情況挺罕見的。

舉例來解釋這個問題。假設(shè)我們想要顯示所給車輛的模型和生產(chǎn)年份：

const checkModel = (car) => {
  let result; // 首先，定義一個 result 變量
  
  // 檢查是否有車
  if(car) {

    // 檢查是否有車的模型
    if (car.model) {

      // 檢查是否有車的年份
      if(car.year) {
        result = `Car model: ${car.model}; Manufacturing year: ${car.year};`;
      } else {
        result = "No car year";
      }
    
    } else {
      result = "No car model"
    }   

  } else {
    result = "No car";
  }

  return result; // 我們的多帶帶的返回語句
}

console.log(checkModel()); // 輸出 "No car"
console.log(checkModel({ year: 1988 })); // 輸出 "No car model"
console.log(checkModel({ model: "ford" })); // 輸出 "No car year"
console.log(checkModel({ model: "ford", year: 1988 })); // 輸出 "Car model: ford; Manufacturing year: 1988;"

正如你所看到的，即使本例的問題很簡單，上面的代碼也實在太長了。可以想象一下，如果我們有更加復(fù)雜的邏輯會發(fā)生什么事。大量的 if...else 語句。

我們可以重構(gòu)上面的函數(shù)，分解成多個步驟并稍做改善。例如，使用三元操作符，包括 && 條件式等。不過，這里我直接跳到最后，向你展示借助現(xiàn)代 JavaScript 特性和多個返回語句，代碼可以有多簡潔。

const checkModel = ({model, year} = {}) => {
  if(!model && !year) return "No car";
  if(!model) return "No car model";
  if(!year) return "No car year";

  // 這里可以任意操作模型或年份
  // 確保它們存在
  // 無需更多檢查

  // doSomething(model);
  // doSomethingElse(year);
  
  return `Car model: ${model}; Manufacturing year: ${year};`;
}

console.log(checkModel()); // 輸出 "No car"
console.log(checkModel({ year: 1988 })); // 輸出 "No car model"
console.log(checkModel({ model: "ford" })); // 輸出 "No car year"
console.log(checkModel({ model: "ford", year: 1988 })); // 輸出 "Car model: ford; Manufacturing year: 1988;"

在重構(gòu)版本中，我們包含了解構(gòu)和默認參數(shù)。默認參數(shù)確保我們在傳入 undefined 時有可用于解構(gòu)的值。注意，如果傳入 null ，函數(shù)將會拋出錯誤。這也是之前那個方法的優(yōu)點所在，因為那個方法在傳入 null 的時候會輸出 "No car"。

對象解構(gòu)確保函數(shù)只取所需。例如，如果我們在給定車輛對象中包含額外屬性，則該屬性在我們的函數(shù)中是無法獲取的。

根據(jù)偏好，開發(fā)者會選擇其中一種方式。實踐中，編寫的代碼通常介于兩者之間。很多人覺得 if...else 語句更容易理解，并且有助于他們更為輕松地遵循程序流程。

假設(shè)我們想要基于給定的國家獲取汽車模型。

const getCarsByState = (state) => {
  switch (state) {
    case "usa":
      return ["Ford", "Dodge"];
    case "france":
      return ["Renault", "Peugeot"];
    case "italy":
      return ["Fiat"];
    default:
      return [];
  }
}

console.log(getCarsByState()); // 輸出 []
console.log(getCarsByState("usa")); // 輸出 ["Ford", "Dodge"]
console.log(getCarsByState("italy")); // 輸出 ["Fiat"]

上訴代碼可以重構(gòu)，完全去除 switch 語句。

const cars = new Map()
  .set("usa", ["Ford", "Dodge"])
  .set("france", ["Renault", "Peugeot"])
  .set("italy", ["Fiat"]);

const getCarsByState = (state) => {
  return cars.get(state) || [];
}

console.log(getCarsByState()); // 輸出 []
console.log(getCarsByState("usa")); //輸出 ["Ford", "Dodge"]
console.log(getCarsByState("italy")); // 輸出 ["Fiat"]

或者，我們還可以為包含可用汽車列表的每個國家創(chuàng)建一個類，并在需要的時候使用。不過這個就是題外話了，本文的主題是關(guān)于條件句的。更恰當?shù)男薷氖鞘褂脤ο笞置媪俊?/p>

const carState = {
  usa: ["Ford", "Dodge"],
  france: ["Renault", "Peugeot"],
  italy: ["Fiat"]
};

const getCarsByState = (state) => {
  return carState[state] || [];
}

console.log(getCarsByState()); // 輸出 []
console.log(getCarsByState("usa")); // 輸出 ["Ford", "Dodge"]
console.log(getCarsByState("france")); // 輸出 ["Renault", "Peugeot"]

到了這一小節(jié)，我終于可以說“最后”了。在我看來，這兩個功能對于 JavaScript 語言來說是非常有用的。作為一個來自 C# 世界的人，可以說我經(jīng)常使用它們。

在寫這篇文章的時候，這些還沒有得到完全的支持。因此，對于以這種方式編寫的代碼，你需要使用 Babel 進行編譯。你可以在自判斷鏈接這里以及在空合并這里查閱。

自判斷鏈接允許我們在沒有顯式檢查中間節(jié)點是否存在的時候處理樹形結(jié)構(gòu)，空合并可以確保節(jié)點不存在時會有一個默認值，配合自判斷鏈接使用會有不錯的效果。

讓我們用一些例子來支撐上面的結(jié)論。一開始，我們還是用以前的老方法：

const car = {
  model: "Fiesta",
  manufacturer: {
    name: "Ford",
    address: {
      street: "Some Street Name",
      number: "5555",
      state: "USA"
    }
  }
}

// 獲取汽車模型
const model = car && car.model || "default model";
// 獲取廠商地址
const street = car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.street || "default street";
// 請求一個不存在的屬性
const phoneNumber = car && car.manufacturer && car.manufacturer.address && car.manufacturer.phoneNumber;

console.log(model) // 輸出 "Fiesta"
console.log(street) // 輸出 "Some Street Name"
console.log(phoneNumber) // 輸出 undefined

因此，如果我們想要知道廠商是否來自 USA 并將結(jié)果打印，那么代碼是這樣的：

const checkCarManufacturerState = () => {
  if(car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.state === "USA") {
    console.log("Is from USA");
  }
}

checkCarManufacturerState() // 輸出 "Is from USA"

我無需再贅述如果對象結(jié)構(gòu)更加復(fù)雜的話，代碼會多么混亂了。許多庫，例如 lodash，有自己的函數(shù)作為替代方案。不過這不是我們想要的，我們想要的是在原生 js 中也能做同樣的事。我們來看一下新的方法：

    // 獲取汽車模型
    const model = car?.model ?? "default model";
    // 獲取廠商地址
    const street = car?.manufacturer?.address?.street ?? "default street";
    
    // 檢查汽車廠商是否來自 USA
    const checkCarManufacturerState = () => {
      if(car?.manufacturer?.address?.state === "USA") {
        console.log("Is from USA");
      }
    }

這看起來更加漂亮和簡潔，對我來說，非常符合邏輯。如果你想知道為什么應(yīng)該使用 ?? 而不是 || ，只需想一想什么值可以當做 true 或者 false，你將可能有意想不到的輸出。

順便說句題外話。自判斷鏈接同樣支持 DOM API，這非常酷，意味著你可以這么做：

const value = document.querySelector("input#user-name")?.value;

好了，這就是全部內(nèi)容了。如果你喜歡這篇文章的話，可以送一杯咖啡給我，讓我提提神，還可以訂閱文章或者在 twitter 上關(guān)注我。

感謝閱讀，下篇文章見。

譯者注：
關(guān)于最后一個例子的空合并為什么使用 ?? 而不是 ||，作者可能解釋得不是很清楚，這里摘抄一下 tc39:proposal-nullish-coalescing 的例子：

const headerText = response.settings?.headerText || "Hello, world!"; // "" 會被當作 false，輸出： "Hello, world!"
const animationDuration = response.settings?.animationDuration || 300; // 0 會被當作 false，輸出： 300
const showSplashScreen = response.settings?.showSplashScreen || true; // False 會被當作 false，輸出： true

照理來說，使用 || 是可以的，但是在上面代碼中會有點小問題。比如我們想要獲取的 animationDuration 的值為 0，那么由于 0 被當作 false，導(dǎo)致我們最后得到的是默認值 300，這顯然不是我們想要的結(jié)果。而 ?? 就是用來解決這個問題的。
目前 optional-chaining 和 nullish-coalescing 還在 ecma 標準草案的 stage2 階段，不過 babel 針對前者已有相關(guān)插件實現(xiàn)，更多相關(guān)文章可以看：
https://segmentfault.com/a/11...
https://zhuanlan.zhihu.com/p/...
https://www.npmjs.com/package...