展平对象键数组，保留唯一键对象并删除重复项 Javascript

Question

我正在寻找一种方法将以下数据结构深度合并到 Javascript 中的唯一对象数组中。

我已经探索过 lodash、reducers 等，只能唯一地合并第一个嵌套级别。

从这种格式开始：

[
  "/Apparel",
  "/Apparel/Jewelry",
  "/Apparel/Jewelry/Rings",
  "/Apparel/Jewelry/Precious & Semi-Precious Gems & Gemstone Jewelry",
  "/Apparel/Jewelry/Rings/Engagement Rings",
  "/Apparel/Jewelry/Precious & Semi-Precious Gems & Gemstone Jewelry/Diamond Jewelry"
]

我已经得出以下数据结构：

[
  {
    "Occasions & Gifts": {}
  },
  {
    "Apparel": {}
  },
  {
    "Apparel": {
      "Clothing": {}
    }
  },
  {
    "Occasions & Gifts": {
      "Special Occasions": {
        "Weddings": {}
      }
    }
  },
  {
    "Apparel": {
      "Clothing": {
        "Women's Clothing": {
          "Dresses": {}
        }
      }
    }
  },
  {
    "Apparel": {
      "Clothing": {
        "Formal Wear": {}
      }
    }
  },
  {
    "Apparel": {
      "Clothing": {
        "Formal Wear": {
          "Bridal Wear": {}
        }
      }
    }
  },
  {
    "Occasions & Gifts": {
      "Special Occasions": {}
    }
  },
  {
    "Apparel": {
      "Clothing": {
        "Women's Clothing": {}
      }
    }
  }
]

通过对这些独特的深度合并，我应该拥有一个可以使用并迭代以显示在前端的数据结构。

上述的理想输出是：

  {
    "Occasions & Gifts": {
      "Special Occasions": {
        "Weddings": {}
      }
    }
  },
  {
    "Apparel": {
      "Clothing": {
        "Women's Clothing": {
           "Dresses": {}
        }
        "Formal Wear": {
           "Bridal Wear": {}
        }
      }
    }
  }
]

甚至更好的是：

[
  {
    "title": "Apparel",
    "subTerms": [
      {
        "title": "Jewellery",
        "subTerms": [
          {
            "title": "Rings",
            "subTerms": [
              {
                "title": "Engagement Rings",
                "subTerms": []
              }
            ]
          }
        ]
      },
      {
        "title": "Precious & Semi-Precious Gems & Gemstone Jewelry",
        "subTerms": [
          {
            "title": "Diamond Jewelry",
            "subTerms": []
          }
        ]
      }
    ]
  }
]

Link to pen

Answer 1

要得到一个有一堆对象的，它只是几个 reduce 函数

const links = [
  "/Apparel",
  "/Apparel/Jewelry",
  "/Apparel/Jewelry/Rings",
  "/Apparel/Jewelry/Precious & Semi-Precious Gems & Gemstone Jewelry",
  "/Apparel/Jewelry/Rings/Engagement Rings",
  "/Apparel/Jewelry/Precious & Semi-Precious Gems & Gemstone Jewelry/Diamond Jewelry"
];

const data = links.reduce((obj, link) => {
  const parts = link.split("/");
  parts.reduce((obj, part) => {
    if (!part) return obj;
    obj[part] =  obj[part] || {};
    return obj[part];
  }, obj);
  return obj;
}, {});

console.log(data);

要获得 subterms 方式，它有点复杂。您需要保留对对象的引用，并且需要将该引用推送到数组。

const links = [
  "/Apparel",
  "/Apparel/Jewelry",
  "/Apparel/Jewelry/Rings",
  "/Apparel/Jewelry/Precious & Semi-Precious Gems & Gemstone Jewelry",
  "/Apparel/Jewelry/Rings/Engagement Rings",
  "/Apparel/Jewelry/Precious & Semi-Precious Gems & Gemstone Jewelry/Diamond Jewelry"
];

const data = links.reduce(({ items = [], lookup = {} }, link) => {
  const parts = link.split("/");
  parts.reduce(({ path, lookup }, title) => {
    if (!title) return { path, lookup };
    const parentKey = path.join("/");
    path.push(title);
    const key = path.join("/");
    if (!lookup[key]) {
      lookup[key] = { title, subTerms: [] };
      if (parentKey) {
        lookup[parentKey].subTerms.push(lookup[key]);
      } else {
        items.push(lookup[key]);
      }
    }
    return { path, lookup };
  }, { items, path: [], lookup });
  return { items, lookup };
}, {} ).items;

console.log(data);