Javascript 将数组缩减为所需格式

如何解决Javascript 将数组缩减为所需格式

我正在尝试尽可能有效地减少数组。我当前的数组如下所示：

myArr = [
    {cat: "Wires",subCat: "Wires & Connection",description: "Demo Description for Green Wire",id: 4049,name: "green_wire"},{cat: "Wires",description: "Demo Description for Red Wire",id: 1224,name: "red_wire"},{cat: "Fixtures",subCat: "Lights",description: "The Bullet FL2832B uplight casts a broad,flatteri…s include an included heavy-duty composite stake.",id: 1360,name: "bullet_lights"},subCat: "Spot Lights",description: "Demo Description for Walkway Lights",id: 8602,name: "walkway_lights"},{cat: "Controls",subCat: "Power Sources",description: "Description for 600w SS Transformer",id: 7738,name: "600w_ss_transformer"},{cat: "",subCat: "",description: "Project Background Image",id: 8029,name: "bgImg"}
];

我想通过首先根据“cat”对子项进行排序，然后在“cat”中对子项进行排序来将这个数组缩减为这种格式，我想根据“subCat”对子项进行排序。像这样：

final = [
    {
        cat: "Wires",children : [
            {
                subCat: "Wires & Connection",children: [
                    {cat: "Wires",name: "red_wire"}
                ]
            }
        ]
    },{
        cat: "Fixtures",children : [
            {
                subCat: "Lights",children : [
                    {cat: "Fixtures",name: "bullet_lights"}
                ]
            },{
                subCat: "Spot Lights",name: "walkway_lights"}  
                ]
            }
        ]
    },{
        cat: "Controls",children : [
            {
                subCat: "Power Sources",children: [
                    {cat: "Controls",name: "600w_ss_transformer"}
                ]
            }
        ]
    },{
        cat: "",children : [
            {
                subCat: "",children: [
                    {cat: "",name: "bgImg"}  
                ]
            }
        ]
    }
]

到目前为止，我已经尝试过这个，但这只能通过“subCat”来组织数组。我想将它进一步嵌套到“cat”：

    const formatedobjects = objects.reduce((acc,d) => {
      const found = acc.find(a => a.subCat === d.subCat);
      const value = { 
        id: d.id,name: d.name,subCat: d.subCat,cat: d.cat,description: d.description
        }; // the element in data property
      if (!found) {
        acc.push({subCat:d.subCat,children: [value]}) // not found,so need to add data property
      }
      else {
        found.data.push(value) // if found,that means data property exists,so just push new element to found.data.
      }
      return acc;
    },[]);

知道如何有效地做到这一点吗？

解决方法

如果可选链接可用，则可以执行以下操作：

const array = [
  {
    cat: "Wires",subCat: "Wires & Connection",description: "Demo Description for Green Wire",id: 4049,name: "green_wire",},{
    cat: "Wires",description: "Demo Description for Red Wire",id: 1224,name: "red_wire",{
    cat: "Fixtures",subCat: "Lights",description:
      "The Bullet FL2832B uplight casts a broad,flatteri…s include an included heavy-duty composite stake.",id: 1360,name: "bullet_lights",subCat: "Spot Lights",description: "Demo Description for Walkway Lights",id: 8602,name: "walkway_lights",{
    cat: "Controls",subCat: "Power Sources",description: "Description for 600w SS Transformer",id: 7738,name: "600w_ss_transformer",{
    cat: "",subCat: "",description: "Project Background Image",id: 8029,name: "bgImg",];

const final = array.reduce((list,item) => {
  const { cat,subCat } = item;
  const hasList = !!list?.[cat];
  const subList = list?.[cat]?.children.find(
    (child) => child.subCat === subCat
  );

  if (!hasList) {
    list[cat] = {
      cat,children: [
        {
          subCat,children: [item],],};
  } else if (!subList) {
    list[cat].children.push({
      subCat,});
  } else {
    subList.children.push(item);
  }

  return list;
},{});

console.log(Object.values(final));