JavaScript对象转新数组：包含id、name及子对象

本文讲解如何将JavaScript对象转换为包含id、name和子对象数组的新对象数组。 以`{"a":["a1","a2"],"b":["b1","b2","b3"]}`为例，目标是将其转换成指定结构的数组，每个元素包含id、name属性以及一个名为childList的子对象数组。文章详细介绍了利用`Object.entries()`和`reduce()`方法实现这一转换的代码，并对代码逻辑进行了清晰的解释，提供了一种简洁高效的解决方案，方便开发者快速掌握JavaScript对象转换技巧。

本文介绍如何将一个JavaScript对象转换为特定结构的对象数组。原始对象结构如下：

const obj = {
  "a": ["a1", "a2"],
  "b": ["b1", "b2", "b3"] // 子数组长度不固定
};

目标是将其转换为：

const list = [
  {
    id: 1,
    name: 'a',
    childList: [
      {id: 3, name: 'a1'},
      {id: 4, name: 'a2'}
    ]
  },
  {
    id: 2,
    name: 'b',
    childList: [
      {id: 5, name: 'b1'},
      {id: 6, name: 'b2'},
      {id: 7, name: 'b3'}
    ]
  }
];

我们可以通过Object.entries()和reduce()方法实现此转换。代码如下：

let obj = {
  "a": ["a1", "a2"],
  "b": ["b1", "b2", "b3"]
};
let id = 1;
const list = Object.entries(obj).reduce((acc, [name, val]) => {
    acc.push({
        id: id++,
        name,
        childList: val.map(childName => ({ id: id++, name: childName }))
    });
    return acc;
}, []);

这段代码首先使用Object.entries()将对象转换为键值对数组。然后，reduce()方法迭代每个键值对，创建一个包含id、name和childList属性的新对象。childList属性通过将原始数组中的每个元素映射到一个新的包含id和name属性的对象来生成。id在每次迭代中递增。最后，reduce()方法返回包含所有新对象的对象数组。 这种方法简洁高效地完成了对象结构的转换。

今天关于《JavaScript对象转新数组：包含id、name及子对象》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！