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 //自定义唯一标识符绑定
}
<div v-for='item of list'>
	{{obj[item.name]}}
</div>

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

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
 <div v-for="(item,index) in sensorList" :key="index" class="sensor_item">
	<img :src="item.img" alt="">
  	<div class="value value1">{{sensorObj[item.code]}}</div>
  	<div>{{item.name}}</div>
</div>

效果图

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