采用对象映射的方式在前端进行数据字典赋值

已知字典对应关系如下表:

字典值 文字描述
1 餐饮饭店
2 民宿宾馆
3 批发零售
4 医疗卫生
5 养老服务

现在有这么一个情况:接口返回给前端的是字典值12345,而我们想展示对应的文字描述。

比较笨的方法是采用 if-else 语句判断

if(this.itemList.fwyt === '1'){
	this.itemList.fwyt = '餐饮饭店'
}else if(this.itemList.fwyt === '2'){
	this.itemList.fwyt = '民宿宾馆'
}else if(this.itemList.fwyt === '3'){
	this.itemList.fwyt = '批发零售'
}else if(this.itemList.fwyt === '4'){
	this.itemList.fwyt = '医疗卫生'
}else if(this.itemList.fwyt === '5'){
	this.itemList.fwyt = '养老服务'
}

那么有没有一种简单有效的方法的?当然是有的

可以使用对象映射来优化这段代码,将房屋用途代码作为键,文字描述作为值,然后在代码中通过键查找对应的值。

例如:

 const fwytMap = {
	'1': '餐饮饭店',
	'2': '民宿宾馆',
	'3': '批发零售',
	'4': '医疗卫生',
	'5': '养老服务',
 }

然后可以通过下列代码实现优化:

this.itemList.fwyt = fwytMap[this.itemList.fwyt] || this.itemList.fwyt;

这样可以避免冗长的 if-else 语句,并且可以方便地对映射进行修改或扩展。

你可能感兴趣的:(#,Vue杂记,前端)