javascript - JS 对象数组 - 删除重复项并合并嵌套对象

Question

仍在学习 JS，我一直在努力解决这个问题，并在 Stack Overflow link 上找到了类似的解决方案。我试图以此为基础对我的解决方案进行建模，但我似乎无法为我的用例弄清楚它..所以我很感激关于如何修复我拥有的代码的建议，甚至只是在正确方向上的一些帮助

所以我试图从基于“objectID”的对象数组(见下文)中删除重复项，并将每个级别(lvl0、lvl1、lvl2)的嵌套“hierarchicalCategories”合并到一个数组中(如果它们是唯一的)。

let objArray = [
  {
  "objectID": "1234",
  "hierarchicalCategories": {
    "lvl0": "Women's"

  }
},
{
  "objectID": "1234",
  "hierarchicalCategories": {
    "lvl0": "Women's",
    "lvl1": "Women's > Jewelry",
    "lvl2": "Women's > Jewelry > New"
  }
},
 {
  "objectID": "1234",
  "hierarchicalCategories": {
    "lvl0": "New",
    "lvl1": "New > Jewelry"
  }
},
{
  "objectID": "5678",
  "hierarchicalCategories": {
    "lvl0": "Men's",
    "lvl1": "Men's > Shoes",

  }
},
{
  "objectID": "5678",
  "hierarchicalCategories": {
    "lvl0": "New",
    "lvl1": "New > Shoes"
  }
}
]

预期的结果应该是这样的:每个“objectID”都有一个实例，然后合并“hierarchicalCategories”(如果每个级别都有一个唯一值)

let newArray = [
 {
  "objectID": "1234",
  "hierarchicalCategories": {
    "lvl0": ["Women's","New"],
    "lvl1": ["Women's > Jewelry","New > Jewelry"],
    "lvl2": ["Women's > Jewelry > New"]
  }
},
{
  "objectID": "5678",
  "hierarchicalCategories": {
    "lvl0": ["Men's", "New"],
    "lvl1": ["Men's > Shoes","New > Shoes"]
  }
}
]

这是我使用的代码，它在一定程度上可以工作，但不能完全工作。基本上在每个级别(lvl0、lvl1、lvl2)，我都在创建一个数组，然后仅在之前未包含的情况下才推送。但是，如果没有像 "objectID": "5678" 中那样定义的级别，它没有在任何重复项中定义的 "lvl2"，那么将会有一个空的我不想要的那个插槽中的过滤数组中的数组，但似乎无法在不完全破坏它的情况下修复它。也接受其他建议+学习以改进代码或其他解决方法。

const filteredArr = objArray.reduce((acc, current) => {
    const x = acc.find(item => item.objectID === current.objectID);
    if (!x) {

        current.hierarchicalCategories.lvl0 ? current.hierarchicalCategories.lvl0 = [current.hierarchicalCategories.lvl0] : current.hierarchicalCategories.lvl0 = []
        current.hierarchicalCategories.lvl1 ? current.hierarchicalCategories.lvl1 = [current.hierarchicalCategories.lvl1] : current.hierarchicalCategories.lvl1 = []
        current.hierarchicalCategories.lvl2 ? current.hierarchicalCategories.lvl2 = [current.hierarchicalCategories.lvl2] : current.hierarchicalCategories.lvl2 = []

        acc.push(current)

    } else {

        if (current.hierarchicalCategories.lvl0 && !x.hierarchicalCategories.lvl0.includes(current.hierarchicalCategories.lvl0)) {
            x.hierarchicalCategories.lvl0.push(current.hierarchicalCategories.lvl0)
        }
        if (current.hierarchicalCategories.lvl1 && !x.hierarchicalCategories.lvl1.includes(current.hierarchicalCategories.lvl1)) {
            x.hierarchicalCategories.lvl1.push(current.hierarchicalCategories.lvl1)
        }
        if (current.hierarchicalCategories.lvl2 && !x.hierarchicalCategories.lvl2.includes(current.hierarchicalCategories.lvl2)) {
            x.hierarchicalCategories.lvl2.push(current.hierarchicalCategories.lvl2)
        }

    }
    return acc;
}, []);

我收到这个响应，因为你可以在 lvl2 看到空数组

[
 {
  "objectID": "1234",
  "hierarchicalCategories": {
    "lvl0": ["Women's","New"],
    "lvl1": ["Women's > Jewelry","New > Jewelry"],
    "lvl2": ["Women's > Jewelry > New"]
  }
},
{
  "objectID": "5678",
  "hierarchicalCategories": {
    "lvl0": ["Men's", "New"],
    "lvl1": ["Men's > Shoes","New > Shoes"],
    "lvl2": []
  }
}
]

感谢任何愿意提供帮助的人!

Answer 1

有几种方法可以做到这一点，但我认为使用 Map 和 Set 可以帮助对事物进行分组并使它们独一无二:

let objArray = [{"objectID": "1234","hierarchicalCategories": {"lvl0": "Women's"}},{"objectID": "1234","hierarchicalCategories": {"lvl0": "Women's","lvl1": "Women's > Jewelry","lvl2": "Women's > Jewelry > New"}},{"objectID": "1234","hierarchicalCategories": {"lvl0": "New","lvl1": "New > Jewelry"}},{"objectID": "5678","hierarchicalCategories": {"lvl0": "Men's","lvl1": "Men's > Shoes",}},{"objectID": "5678","hierarchicalCategories": {"lvl0": "New","lvl1": "New > Shoes"}}];

let map = new Map(objArray.map(o => [o.objectID, {}] ));
for (let obj of objArray) {
    let cats = map.get(obj.objectID);
    for (let [key, val] of Object.entries(obj.hierarchicalCategories)) {
        cats[key] = (cats[key] || new Set).add(val);
    }
}
let result = Array.from(map.entries(), ([objectId, cats]) => ({ 
    objectId, 
    hierarchicalCategories: Object.fromEntries(Object.entries(cats).map(([k, v]) => 
        [k, [...v]]
    )) 
}));

console.log(result);

解释

首先创建一个 Map，以 objectID 为键，相应的值初始化为空对象。 Map 构造函数获取 [key, value] 对的列表，它将从中创建 Map。它不会提示提供给它的重复 key 。

然后对于输入数组中的每个对象，从 map 中检索相应的对象并将其分配给 cats。第一次它将是一个空对象。然后将来自输入对象的 hierarchicalCategories 添加到 cats。执行此操作时，会验证 key (如“lvl2”)是否已存在于 cats 中。如果不是，则 cats[key] 未定义，只有这样 || 运算符才会计算正确的操作数，因此创建了一个 Set。否则我们知道它已经是一个集合。然后我们将值(如“Woman's”)添加到该集合。使用 Set 的优点是重复项将被忽略。

这就是第一个 for 循环所做的。它实质上将输入转换为一种结构，该结构将以有效的方式处理分组和重复。

然后代码的最后一部分会将这些信息转换为所需的输出结构。

map.entries 将给出它拥有的键/值组合。现在值部分不再是空对象，因为我们在前面的循环中向它们添加了数据。这些是可能具有多个“lvl”键和关联集合的 cats 对象。

Array.from 将允许我们迭代那些 map.entries() 并在映射器回调函数中对每个执行一些操作。该回调函数为每个条目返回一个对象。它被括号括起来，以避免 JS 解析器将大括号误解为代码块(它实际上会提示它)。

使用 Object.entries，我们查找每个 Set，并使用 [...v] 将它们映射到标准数组。 Object.fromEntries 将其组合回一个对象(它与“Object.entries”相反)。