如何用纯JS改变对象结构

沃梦达教程前端问题

2022-01-01

How to change object structure with pure JS(如何用纯JS改变对象结构)

本文介绍了如何用纯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);

这篇关于如何用纯JS改变对象结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：如何用纯JS改变对象结构

上一篇：附加到JS对象的HTML元素

下一篇：从交换的键和值ES6映射创建JavaScript对象