增強 JavaScript 程式碼：使用物件取代 Switch 語句

介紹

這是一個簡短且有些不尋常的主題，但我在工作時在網路上並沒有遇到太多，所以這是我的貢獻。我很想聽聽人們對這種方法的意見，因為我經常使用它。我不喜歡在 switch 語句中編寫多個 case，因此我發現使用物件是一個更乾淨的替代方案。它可能不會更快，但代碼對我來說看起來更乾淨。

示範

我想處理不同付款狀態的訂單，並根據是否已付款應用不同的處理方式。

讓我們從這個開始：

const orders = [{
  "id": 1,
  "product": "shoes",
  "paymentStatus": "Paid"
},{
  "id": 2,
  "product": "pants",
  "paymentStatus": "Pending"
},{
  "id": 3,
  "product": "tie",
  "paymentStatus": "UnPaid"
}];


const handlePaymentStatus =(order) =>{
  return order.paymentStatus
}

for (const order of orders) {
 handlePaymentStatus(order)
}

我們希望根據 order. paymentStatus 應用特定的處理。一個簡單的解決方案是使用以下 switch 語句：

let orders = [{
  "id": 1,
  "product": "shoes",
  "paymentStatus": "Paid"
},{
  "id": 2,
  "product": "pants",
  "paymentStatus": "Pending"
},{
  "id": 3,
  "product": "tie",
  "paymentStatus": "Unpaid"
}];


const handlePaymentStatus =(order) =>{
switch (order.paymentStatus) {
  case 'Paid':
    console.log("it's all good");
    break;
  case 'Unpaid':
    console.log("need to be paid");
    break;
  default:
    console.log(`We'll wait`);
}
}

for (const order of orders) {
 handlePaymentStatus(order)
}

這是一個簡單的情況，因為我們有兩個選項和一個預設選項，但想像一下它有多種付款方式。為了清楚起見，我們將保持這樣：

let orders = [{
  "id": 1,
  "product": "shoes",
  "paymentStatus": "Paid"
},{
  "id": 3,
  "product": "tie",
  "paymentStatus": "Unpaid"
},{
  "id": 2,
  "product": "pants",
  "paymentStatus": "Pending"
},];

const paymentStatusHandlers = {
  'Paid': () =>  console.log("it's all good"),
  'Unpaid': () => console.log("needs to be paid"),
}

for (const order of orders) {
 paymentStatusHandlers[order.paymentStatus] 
    ? paymentStatusHandlers[order.paymentStatus]()
    : console.log("We'll wait")
}

結論

使用物件而不是 switch 語句可以使程式碼更具可讀性和可維護性，尤其是在處理多種情況時。這是個人喜好的問題，但作為替代方法值得考慮。

如果您想要進行任何其他具體更改或添加，請隨時告訴我！

以上是增強 JavaScript 程式碼：使用物件取代 Switch 語句的詳細內容。更多資訊請關注PHP中文網其他相關文章！