案例一:switch转为map映射
转换前
javascript
let orderType = ''
switch(item.OrderType) {
case '盘点单(方法一)': {
orderType = 'CKCheck'
break
}
case '采购退货出库单': {
orderType = 'CKJHCheck'
break
}
case '销售发货出库单': {
orderType = 'CKXSCheck'
break
}
case '采购收货入库单': {
orderType = 'CKJHCheck'
break
}
case '销售收款单': {
orderType = 'XSPay'
break
}
case '进货订单': {
orderType = 'JHOrder'
break
}
case '调拨单': {
orderType = 'CKMove'
break
}
case '采购付款单': {
orderType = 'JHPay'
break
}
default: {
orderType = ''
}
}
转换后
javascript
const orderTypeMapping = {
'盘点单(方法一)': 'CKCheck',
'采购退货出库单': 'CKJHCheck',
'销售发货出库单': 'CKXSCheck',
'采购收货入库单': 'CKJHCheck',
'销售收款单': 'XSPay',
'进货订单': 'JHOrder',
'调拨单': 'CKMove',
'采购付款单': 'JHPay',
};
orderType = orderTypeMapping[item.OrderType] || '';
案例二:if分支通过map以及for循环简化代码
转换前:
javascript
const {
SupplierName, SupplierNo,
ClientCode, ClientName, EmployeeName,
EmployeeNo, store,
BrandName, BrandNo,GoodsTypeName,
GoodsTypeNo
} = data
if ( SupplierName && SupplierNo) {
this.formFields.supplierName = SupplierName
this.formFields.supplierNo = SupplierNo
} else if (ClientCode && ClientName) {
this.formFields.clientCode = ClientCode
this.formFields.clientName = ClientName
} else if (EmployeeName && EmployeeNo) {
this.formFields.employeeName = EmployeeName
this.formFields.employeeNo = EmployeeNo
} else if (store.StoreName && store.StoreNo) {
this.formFields.storeName = store.StoreName
this.formFields.storeNo = store.StoreNo
} else if (BrandName && BrandNo) {
this.formFields.brandName = BrandName
this.formFields.brandNo = BrandNo
} else if (GoodsTypeName && GoodsTypeNo) {
this.formFields.goodsTypeName = GoodsTypeName
this.formFields.goodsTypeNo = GoodsTypeNo
}
转换后:
javascript
const fieldMapping = [
{ source: ['SupplierName', 'SupplierNo'], target: ['supplierName', 'supplierNo'] },
{ source: ['ClientCode', 'ClientName'], target: ['clientCode', 'clientName'] },
{ source: ['EmployeeName', 'EmployeeNo'], target: ['employeeName', 'employeeNo'] },
{ source: ['StoreName', 'StoreNo'], target: ['storeName', 'storeNo'], parent: 'store' },
{ source: ['BrandName', 'BrandNo'], target: ['brandName', 'brandNo'] },
{ source: ['GoodsTypeName', 'GoodsTypeNo'], target: ['goodsTypeName', 'goodsTypeNo'] }
];
for (let mapping of fieldMapping) {
let sourceData = mapping.parent ? (data[mapping.parent] || {}) : data;
mapping.source.forEach((prop, index) => {
if (sourceData[prop]) {
this.formFields[mapping.target[index]] = sourceData[prop];
}
})
}
从代码简洁度看的话,第二种写法是要优于第一种的,而从性能来看,第一种明显要优于第二种,第二种使用了双重for循环,虽然扩展性提高了,一定程度上也浪费了性能