vue 数组转对象与对象转数组（对象与数组的相互转换）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 数组转对象与对象转数组（对象与数组的相互转换）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

数组转对象

转换前为数组：

vue 如何把一个数组转换成一个对象格式,vue,经验分享,js,vue.js,javascript,前端

转换为对象的效果图：

vue 如何把一个数组转换成一个对象格式,vue,经验分享,js,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-778162.html

return{
     editScreenVenue:[
              {label:'姓名', prop: 'name', size:'12',color: "#000",sort:0},
              {label:'单位（公司）', prop: 'company',size:'12',color: "#000",sort:1},
              {label:'手机号', prop: 'phone',size:'12',color: "#000",sort:2},
              {label:'职务', prop: 'job',size:'12',color: "#000",sort:3},
            ],//数组数据
}

 methods: {
// 数组转对象方法
      arrayToObject (arr) {
    let map = {};
    arr.forEach (item => {
      map[item.prop] = {label: item.label, color: item.color, size: item.size};
    });
    return map;
  },
//需要使用数组转对象的方法
  getData(){
  let newObj= this.arrayToObject(this.editScreenVenue);
       console.log(newObj,'newObj');
}
  }

数组对象的相互转换

  mounted() {
 
    let str = '{"name":{"label":"姓名","color":"#e2534d","size":"12"},"company":{"label":"单位（公司）","color":"#8165a0","size":"12"},"phone":{"label":"手机号","color":"#f9974c","size":"12"},"job":{"label":"职务","color":"#ddd8c3","size":"12"}}';
let json = JSON.parse(str);
let editScreenVenue = Object.entries(json).map(([prop, {label, color, size}]) => ({
  label,
  prop,
  size,
  color,
}));
console.log(editScreenVenue,'json转数组');
  },

  mounted() {

    let editScreenVenue = [
  {label:'姓名', prop: 'name', size:'12',color: "#000",sort:0},
  {label:'单位（公司）', prop: 'company',size:'12',color: "#000",sort:1},
  {label:'手机号', prop: 'phone',size:'12',color: "#000",sort:2},
  {label:'职务', prop: 'job',size:'12',color: "#000",sort:3},
];

let result = editScreenVenue.reduce((accumulator, current) => {
  accumulator[current.prop] = {
    size: current.size,
    color: current.color,
    lable: current.label,
  };
  return accumulator;
}, {});

console.log(result,'数组转对象');
  },

到了这里，关于vue 数组转对象与对象转数组（对象与数组的相互转换）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！