如何使用 Object.keys Javascript 返回对象答案

【问题标题】：How to return Objects with Object.keys Javascript如何使用 Object.keys Javascript 返回对象
【发布时间】：2021-08-12 21:19:16
【问题描述】：

如何在 Javascript、React 中使用 Object.keys 返回对象？我想将我的状态设置为这样的：

dataset = [
{id:1,text_1:root,father:null,color:"#FF5722"},
{id:2,text_1:child1,father:1,color:"#FFC107"},
{id:3,text_1:child2,father:1,color:"#FFC107"},
{id:4,text_1:child3,father:1,color:"#FFC107"},
{id:5,text_1:child11,father:2,color:"#8BC34A"},
{id:6,text_1:child12,father:2,color:"#8BC34A"},
{id:7,text_1:child13,father:2,color:"#8BC34A"}
]

来自这个对象：

{
"root":{
   "child1":{
      "child11":[
         "data"
      ],
      "child12":[
         "data",
         "data",
         "data"
      ],
      "child13":[
         "data"
      ],
      "child14":[
         "data",
      ]
   },
   "child2":{
      "child21":[
         "data"
      ],
      "child22":[
         "data",
         "data",
         "data"
      ],
      "child23":[
         "data"
      ],
      "child24":[
         "data"
      ]
   },
   "child3":{
      "child31":[
         "data"
      ],
      "child32":[
         "data"
      ],
      "child33":[
         "data"
      ],
      "child34":[
         "data",
      ]
   },
   "child4":{
      "child41":[
         "data"
      ],
      "child42":[
         "data",
         "data",
         "data"
      ],
      "child43":[
         "data"
      ],
   },
},
"root1":{
    ...
}
}

我试过了：

setTree([
            {
              id: 1,
              text_1: props.pickedRoot,
              father: null,
              color: "#FF5722",
            },
            Object.keys(res.data.treeData[0][props.pickedRoot]).map(
              (item, i) => ({
                id: i + 2,
                text_1: item,
                father: 1,
                color: "#FFC107",
              })
            ),
          ]);

除了 Object.keys 返回一个数组之外，它几乎可以工作，因此它给了我一个对象和一个对象数组。也许问题是我单独设置了我的根对象，但我真的不知道如何只用一个 map() 函数来设置它。

我的解决方案得到的结果：

0: {id: 1, text_1: "root", father: null, color: "#FF5722"}
1: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

我希望我能清楚地解释我的问题。

【问题讨论】：

标签： javascript arrays reactjs object tree

【解决方案1】：

map 函数返回一个数组，这就是为什么您最终会在数组中包含另一个数组。我建议你做的是将map 返回的数组与spread operator(...) 展开：

setTree([
            {
              id: 1,
              text_1: props.pickedRoot,
              father: null,
              color: "#FF5722",
            },
            ...Object.keys(res.data.treeData[0][props.pickedRoot]).map(
              (item, i) => ({
                id: i + 2,
                text_1: item,
                father: 1,
                color: "#FFC107",
              })
            ),
          ]);

这样，除了您的第一个对象外，您基本上将所有新映射的对象都散布到 tree 数组中

评论回复

在回复您的评论时，如果您的版本支持，您可以使用 flatMap，或者使用来自第三方库（如 lodash）的已实现 flatMap 函数

【讨论】：

它有效，我应用了你的答案，我还有一个问题。如果我用 map() 函数再往下一层，我想做点什么：Object.keys(object).map(item=>...Object.values(object2).map(item2=>item2))，然后它返回一个错误。否则，如果我尝试用 ({...Object.values(object2).map(item2=>item2))}) 包装它，它正在工作，但又返回一个数组，我该如何解决这个问题？
传播运算符仅在您将某些内容传播到数组/对象中时才有效。您不能只将数组/对象传播到 return 子句（就像评论中的第一个代码示例一样）。 map 函数是返回数组的函数，因此您想传播它的结果。您应该将... 放在Object.keys(object).map 之前以传播地图结果
是的，我明白了，我在评论部分打错了我的例子。我尝试使用扩展运算符： ...Object.keys(object]).map(item=>Object.values(object2).map(item2=>({id:item2,text_1:item2,father:item,color: “#somecolor”}）））。无论我在第一个 Object.keys 前面使用扩展运算符，因为我在其中有另一个 Object.values 并且我的结果将包装在一个数组中 [{...}, {...}, {...}, {...}, {... }，{…}]。

【解决方案2】：

所以我刚刚创建了这个函数来将你的对象转换成一个数组：

const objToArray = (father, root, globalIndex) => {
const keys = Object.keys(root);

  return keys.reduce((acc, curr) => {
    globalIndex++;
    const id = globalIndex;
    acc.push({
      id,
      text: curr,
      father,
    });
    console.log(globalIndex, acc);
    const children = root[curr];
    if (children.length === undefined) {
      acc.push(...objToArray(id, root[curr], globalIndex));
    }
    globalIndex = acc[acc.length - 1].id;
    return acc;
  }, []);
};

这会返回 n 个根元素，并且可以处理具有 n 个级别的对象。

【讨论】：