我有以下 JS 代碼，我根據 API 的回應鍵顯示不同的狀態。有沒有更好的方法來優化這段代碼，這樣我就不必用 IF 檢查每個案例，以防狀態數量增加
if (data.shippingStatus) {
let shippingStatus = data.shippingStatus.toString();
if (shippingStatus === "AWAITING_SHIPMENT") {
shippingStatus = "Awaiting Shipment";
} else if (shippingStatus === "SHIPPED") {
shippingStatus = "Shipped";
} else if (shippingStatus === "DELIVERED") {
shippingStatus = "Delivered";
} else if (shippingStatus === "CANCELLED") {
shippingStatus = "Cancelled";
}
resData.push(setData(data.shippingStatus ? shippingStatus : ""));
}
uj5u.com熱心網友回復：
嘗試物件映射器：
const statusMapper: {[key:string]: string} = {
AWAITING_SHIPMENT: "Awaiting Shipment",
SHIPPED: "Shipped",
DELIVERED: "Delivered",
CANCELLED: "Cancelled"
};
if (data.shippingStatus) {
let shippingStatus = data.shippingStatus.toString();
resData.push(setData(data.shippingStatus ? statusMapper[shippingStatus] : ""));
}
編輯：向映射器添加型別
uj5u.com熱心網友回復：
你的問題有不同的方法。如果您只是為當前的問題又名映射值尋找可靠的解決方案，您可以按照其他答案的建議創建一個物件映射器，或者只是一個簡單的函式來格式化您的字串，例如：
var text = "AWAITING_SHIPMENT";
text = text.toLowerCase()
.split('_')
.map((s) => s.charAt(0).toUpperCase() s.substring(1))
.join(' ');
console.log(text);但是，如果您從更廣泛的意義上研究該主題，則可以通過多型使用動態分派。這是一個使用多型來改變基于型別的行為的例子。
uj5u.com熱心網友回復：
我的實作是如何作業的，它通過 _ 分割狀態并將其大寫，最后根據需要回傳一個新狀態
// Dummy Data
const data = {
shippingStatus:"AWAITING_SHIPMENT"
}
// New Proposal
if(data.shippingStatus){
const { shippingStatus } = data;
const status =
shippingStatus.split('_')
.map(string => string.charAt(0).toUpperCase() string.slice(1).toLowerCase())
.join(" ");
console.log(status)
// no need to check for data.shippingStatus twice
// while you're still within if condition, just do the following :
// resData.push(setDate(status))
}uj5u.com熱心網友回復：
有可能的狀態圖
let statuses = {
'AWAITING_SHIPMENT': 'Awaiting Shipment',
'SHIPPED': 'Shipped',
...
};
resData.push(setData(data.shippingStatus ? statuses[shippingStatus] : ""));
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/383502.html
標籤：javascript 打字稿