如何用纯JS改变对象结构

问题描述

我正在努力改变对象的结构。 我想从此转换对象：

var data = {
  "a1.img": 'img1',
  "a1.href": 'href1',
  "a2.img": 'img2',
  "a2.href": 'href2',
  "a3.img": 'img3',
  "a3.href" : 'href3'
};

到此：

var data = {
  "a1":{    
    "img": "img1",
    "href": "href1" 
  },
  "a2":{    
    "img": "img2",
    "href": "href2" 
  },
  "a3":{    
    "img": "img3",
    "href": "href3"
  }
}

我的解决方案工作不正常，我不知道如何修复它。我的解决方案：

var data = {
  "a1.img": 'img1',
  "a1.href": 'href1',
  "a2.img": 'img2',
  "a2.href": 'href2',
  "a3.img": 'img3',
  "a3.href": 'href3'
};

var newData = {};
for (var key in data) {
  newData[key.split('.')[0]] = {};
  for (var i in data) {
    newData[key.split('.')[0]][i.split('.')[1]] = data[key]
  }
}

console.log(newData)

请帮帮忙。

推荐答案

可以使用Array#reduce循环原始数组并将属性追加到累加器。

var data = {
  "a1.img": 'img1',
  "a1.href": 'href1',
  "a2.img": 'img2',
  "a2.href": 'href2',
  "a3.img": 'img3',
  "a3.href" : 'href3'
};

var res = Object.entries(data).reduce((a, [k,v]) => {
  var [key, prop] = k.split('.');
  
  if (!a[key]) {
    a[key] = {};
  }
  
  a[key][prop] = v;
  return a;
}, {});

console.log(res);