增强 JavaScript 代码：使用对象代替 Switch 语句

引言

本文探讨一种替代 JavaScript 中 switch 语句的简洁方法：使用对象。虽然并非所有场景都适用，但在处理多种情况时，这种方法能提升代码的可读性和可维护性。

示例：订单付款状态处理

假设我们需要处理不同付款状态的订单，并根据状态执行不同的操作。

立即学习“Java免费学习笔记（深入）”；

首先，来看一个简单的例子：

PaperFake

AI写论文

下载

<code class="javascript">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)
}</code>

接下来，使用 switch 语句处理不同付款状态：

<code class="javascript">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)
}</code>

当状态数量较多时，switch 语句会变得冗长。 我们可以用对象来简化：

<code class="javascript">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")
}</code>

总结

通过使用对象映射不同的状态到对应的处理函数，代码更简洁易读。 这种方法尤其在处理大量状态时更有效，提升了代码的可维护性。 当然，这只是个人的偏好，但作为一种替代方案，值得考虑。