Javascript 将数组缩减为所需格式

Question

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

myArr = [
    {cat: "Wires", subCat: "Wires & Connection", description: "Demo Description for Green Wire", id: 4049, name: "green_wire"},
    {cat: "Wires", subCat: "Wires & Connection", 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"},
    {cat: "Fixtures", 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", subCat: "Wires & Connection", description: "Demo Description for Green Wire", id: 4049, name: "green_wire"},
                    {cat: "Wires", subCat: "Wires & Connection", description: "Demo Description for Red Wire", id: 1224, name: "red_wire"}
                ]
            }
        ]
    },
    {
        cat: "Fixtures",
        children : [
            {
                subCat: "Lights",
                children : [
                    {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",
                children : [
                    {cat: "Fixtures", subCat: "Spot Lights", description: "Demo Description for Walkway Lights", id: 8602, name: "walkway_lights"}  
                ]
            }
        ]
    },
    {
        cat: "Controls",
        children : [
            {
                subCat: "Power Sources",
                children: [
                    {cat: "Controls", subCat: "Power Sources", description: "Description for 600w SS Transformer", id: 7738, name: "600w_ss_transformer"}
                ]
            }
        ]
    }, 
    {
        cat: "",
        children : [
            {
                subCat: "",
                children: [
                    {cat: "", subCat: "", description: "Project Background Image", id: 8029, 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;
    }, []);

知道我怎样才能有效地做到这一点吗？

Answer 1

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

const array = [{
    cat: "Wires",
    subCat: "Wires & Connection",
    description: "Demo Description for Green Wire",
    id: 4049,
    name: "green_wire",
  },
  {
    cat: "Wires",
    subCat: "Wires & Connection",
    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",
  },
  {
    cat: "Fixtures",
    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],
        count: 1,
      }, ],
    };
  } else if (!subList) {
    list[cat].children.push({
      subCat,
      children: [item],
      count: 1,
    });
  } else {
    subList.count += 1;
    subList.children.push(item);
  }

  return list;
}, {});

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

Javascript 将数组缩减为所需格式

Javascript Reducing the Array to Desired Format

javascript

arrays

sorting

reduce