js数组和对象相互转换

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
    <div v-for="(item, index) in from" :key="item.label">
      <span>{{ item.name }}</span>
      <!-- arr[index] 每一个值的绑定@change="(val) => chageValue(val,index)"每一项选择的值-->
      <select
        v-model="arr[item.cddvalue]"
        placeholder="请选择"
        @change="(val) => chageValue(val)"
      >
        <option
          v-for="v in item.options"
          :key="v.value"
          :label="v.label"
          :value="v.value"
        >
        </option>
      </select>
    </div>
    <button @click="btnClickSele">点击</button>
  </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: {},
      from: [
        {
          label: "1",
          name:"平台",
          cddvalue:'pt',
          options: [
            {
              value: "选项1",
              label: "1",
            },
            {
              value: "选项11",
              label: "11",
            },
            {
              value: "选项111",
              label: "111",
            },
            {
              value: "选项1111",
              label: "1111",
            },
            {
              value: "选项111111",
              label: "1111",
            },
          ],
        },
        {
          label: "2",
          name:'结构树',
          cddvalue:'jgs',
          options: [
            {
              value: "选项2",
              label: "2",
            },
            {
              value: "选项22",
              label: "22",
            },
            {
              value: "选项2222",
              label: "222",
            },
            {
              value: "选项222222",
              label: "2222",
            },
            {
              value: "选项2222222",
              label: "22222",
            },
          ],
        },
        {
          label: "3",
          name:'属性',
          cddvalue:'sx',
          options: [
            {
              value: "选项3",
              label: "3",
            },
            {
              value: "选项33",
              label: "33",
            },
            {
              value: "选项333",
              label: "333",
            },
            {
              value: "选项3333",
              label: "3333",
            },
            {
              value: "选项53333333",
              label: "33333",
            },
          ],
        },
      ],
    };
  },
  // 未打乱循序
  // let arr = [
  //     { id: "1", label: ["选项111", "选项111111"] },
  //     { id: "2", label: ["选项22", "选项222222"] },
  //     { id: "3", label: ["选项3333", "选项53333333"] },
  //   ];
  //   arr.map((ele, index) => {
  //     this.arr[index] = ele.label // 反显
  //   });
  //   // 打乱循序 label值得于上面的this.from中的options.value一样
  //      let arr = [
  //     { id: "3", label: ["选项3333", "选项53333333"] },
  //     { id: "2", label: ["选项22", "选项222222"] },
  //     { id: "1", label: ["选项111", "选项111111"] },
  //   ];
  //   arr
  //     .sort((a, b) => Number(a.id) - Number(b.id))
  //     .map((item, index) => (this.arr[index] = item.label));
  methods: {
      btnClickSele() {
        console.log(this.from);
        console.log(this.arr);
        let sss=[]
        let obj ={};

        let decro = this.from.map(item => {
         for(var key in this.arr){
          console.log(key,this.arr[key])
            if(key == item.cddvalue){
              sss.push(
                item.name +':'+ this.arr[key] //数组
              )
            }
         }
        })
        
        console.log(sss,232323)  //数组 ["平台:选项111111","结构树:选项22","属性:选项3"]
        
        /* 数组转对象-----------------------------------------------------
        let array = ['a', 'b', 'c'];
        let obj = {};
        
        array.forEach((value, index) => {
          obj[index] = value;
        });
        
        console.log(obj); // {0: "a", 1: "b", 2: "c"}
        
        */
        sss.forEach((value, index) => {
          obj[index] = value;
        });
        console.log(obj,232323) //对象 { "0": "平台:选项1111", "1": "结构树:选项22", "2": "属性:选项33"}

        /*2种方法-----------------------------------------------------*/
        let decro2 = this.from.map(item => {
         for(var key in this.arr){
          console.log(key,this.arr[key])
            if(key == item.cddvalue){
              return{
              de:item.name +':'+ this.arr[key],
              ...item
             }
            }
         }
        })
        /*
        对象转数组
        let obj = {0: 'a', 1: 'b', 2: 'c'};

        let array = Object.values(obj);
        
        console.log(array); // ["a", "b", "c"]
        */
       
        // Object.keys(this.arr).forEach(key =>  console.log(key))
        // let that = this
        // let ddddoo= []
        // let decro = this.from.filter(item => {
        //   Object.keys(this.arr).forEach(key => {
        //     if(key == item.cddvalue){
        //       ddddoo.push({
        //         key:item.name + Object.keys(this.arr)
        //       })
        //     }
        //   })
        // })
        // console.log(ddddoo,232323)

        // result = this.from.filter(({name}) => this.arr.includes(name)).map((elem) => elem.cddvalue);
				// console.log(result);
      },
      chageValue(value,index) {
        // console.log(value,index);
        // let params = {
        //   id:this.from[index].label,
        //   label:value
        // }
        // console.log(params); // 可以打印看一下
        console.log(this.arr,32323)
      },
    }
  }


</script>