如何使用纯JS更改对象结构

Question

我正在努力改变物体的结构。 我要从中转换对象：

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)

请帮助。

Answer 1

您可以使用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);