js中的键值对互相转换

有些情况下后端传的参数需要在前端进行一一对应，以下方法是我平时用过的一些方法，不同的业务场景需求是不同的，具体要看项目中的需求以及要实现的功能，来选择下面的方法去使用，合适的才是最好的。

1.下标对应

这种情况适用于后端传过来的id数量少且数量级为个位数或者两位数的情况，比如1~10或1~20：

<template>
    <span>{{front[backend.id]}}</sapn>
</template>

<script>
import ...

export default {
    data() {
        return {
            bankend:{id:"5"},
            front: ['1','4','3','7','8','6','2','5','4']
        }
    }
}
</script>

那么页面最终会显示6（因为数组下标是从0开始）

2. 对象属性名与属性值对应：

let foodMap = {
    name:'菜饼',
    1: "馒头",
    2: "包子",
    3: "煎饼",
    4: "葱油面",
    5: "担担面",
    6: "油饼",
    7: "花卷",
    true: "水饺"
}

//通过key获取对应的value
console(this.foodMap.name)   //"菜饼"
console(this.foodMap[1])   //"馒头"
console(this.foodMap[true])    //"水饺"

methods: {
    //通过value获取对应的key
    findFoodMapKey(obj,value,compare = (a, b) => a === b){
      return Object.keys(obj).find(k => compare(obj[k], value))
    }
}

this.findFoodMapKey(foodMap,"菜饼")        //name
this.findFoodMapKey(foodMap,"包子")        //2
this.findFoodMapKey(foodMap,"水饺")        //true

js对象属性名为数字或者布尔值时如何取属性值？

属性名	方式
普通字符串	通过点号来访问obj.name
数字	obj[1]和 obj[‘1’] ，但是不能用点号.访问
布尔值	obj.[true]和 obj.[‘true’] ，还可以用.来访问

3.数组中对象内属性对应

<el-option
v-model = form.food
@change = findFood()    //选择操作发生时执行，这里选择框里呈现的是数组中所有对象的name属性，因为":label=foodMap.name"
:prop={v-for=(item in foodMap) :key=foodMap.id :label=foodMap.name :value=foodMap.id}
>
</el-option>

let foodMap = {
    [id:1, name:"过桥米线"],
    [id:2, name:"螺蛳粉"],
    [id:3, name:"酸菜鱼"],
    [id:4, name:"煎饼果子"],
    [id:5, name:"桥头排骨"],
    [id:6, name:"炸鸡柳"],
    [id:7, name:"重庆小面"]
}
let form = {
    food: ''
}

findFood(){
console(this.form.food)  //输出选择的那个对象的id属性,因为":value=foodMap.id"

}
//要想选择id输出相对应的name1，只需要把上边html中改成":label=foodMap.id :value=foodMap.name"

4. if else进行判断

这个放在最后是因为当时我用这个来进行前后端数据对应被boss无情嘲讽，他说你写的这是一坨什么，哈哈，因为我在里面放了一堆else if，哈哈，后来改用上面那些方法了，这里就提供一个思路。

if(id==1){
this.food="包子"
}else if(id==2){
this.food="馒头"
}else if(id==3){
this.food="牛肉面"
}else if(id==4){
this.food="方便面"
}else if(id==5){
this.food="花卷"
}else if(id==6){
this.food="锅饼"
}

哈哈果然是一坨，功能确实能实现，就是代码不好看，如果数据量大的话后期修改会很麻烦，代码也显得臃肿，不过数据量小的还是可以尝试一下的。

这篇博客作为自己工作中的记录，希望也能给大家做一个参考，这个东西主要是思路，细节方面可能文中有不对的麻烦大家指正也可以提供更多更好的方法大家一起交流。