JS 两个数组通过对象映射绑定

开发过程中会遇到一种情况
页面渲染时使用了一个数组，而接口也返回了一个数组
通过一个唯一字段关联两个数组的数据
两个数组有部分数据重合，但不能完全使用接口返回的
eg

list:[
	{name:"名称1",value:10,code:"",img:""}
	...
]

此处的value值需要通过接口请求
eg 返回数据情况
数据的顺序是不定的，你无法通过索引值一一绑定

arr = [{name:"",value:""}...]
let obj = {} //默认对象vue渲染时不会报错
for(let item of arr){
	obj[item.name] = item.value //自定义唯一标识符绑定
}

	{{obj[item.name]}}

实战例子
接口返回，不止返回需要渲染的数据

js

//data
sensorList: [
     {img:require('@/assets/meetting/wd.png'),name:"温度",code:'TEMPERATURE'},
     {img:require('@/assets/meetting/dbf.png'),name:"湿度",code:'HUMIDITY'},
     {img:require('@/assets/meetting/co2.png'),name:"二氧化碳",code:'CO2'},
     {img:require('@/assets/meetting/pm10.png'),name:"PM10",code:'PM10'},
     {img:require('@/assets/meetting/pm2.5.png'),name:"PM2.5",code:'PM25'},
],
sensorObj:{},

//methods
let arr = res.data || []; // 接口返回数组
this.sensorObj = {}
for (let item of arr) {
   this.sensorObj[item.paramModelCode] = item.paramValueName+item.paramUnit
}

//html
 

	
  	
{{sensorObj[item.code]}}
  	
{{item.name}}

效果图

看到有代码是循环加if判断去做的，不够优雅。这样写代码量少也清晰