Javascript-从对象数组中删除重复的ID

Question

取以下两个数组：

const array1 = [
  {
    props: {
      type : 'text',
      id : 'item1',
      name : 'item1',
      value : '@item1@',
    },
  },
  {
    props: {
      type: 'hidden',
      id: 'item2',
      name: 'item2',
      value: '@item2@',
    },
  }
];

const array2 = [
  {
    props: {
      type: 'hidden',
      id: 'item1',
      name: 'item1',
      value: '@item1@',
    },
  }
];

我想做的是将它们连接到单个数组中，并根据该id属性删除所有重复项。不过这里需要说明的是，它的对象不具有type的hidden必须遵。

因此，基本上应该留给的内容array1，因为from中的重复项array2的type值为hidden，如下所示：

// Result
[
  {
    props: {
      type : 'text', // Note the type here is "text"
      id : 'item1',
      name : 'item1',
      value : '@item1@',
    },
  },
  {
    props: {
      type: 'hidden',
      id: 'item2',
      name: 'item2',
      value: '@item2@',
    },
  }
];

---

我可以使用以下命令轻松地将它们连接起来：

const array = array1.concat(array2);

我的想法是使用过滤器，但我脑子有点融化。到目前为止，这是我想出的：

const concat = (array1, array2) => {
  const array = array1.concat(array2);
  const ids = [];

  // Create array of ID's
  for (const i in array1) {
    ids.push(array1[i].props.id);
  }

  return array.filter((obj) => {
    if (obj.props.type !== 'hidden' && ids.includes(obj.props.id)) {
      return true;
    }

    return false;
  });
};

在这里使用Reduce会是更好的方法吗？

这是到目前为止我掌握的JSFiddle：https ://jsfiddle.net/64uprbhn/

Answer 1

您可以

1. id => object从第一个数组创建一个Map
2. 遍历第二个数组，或者
   • 如果地图中尚未添加该项目
   • 检查当前项是否不是，type: "hidden"并覆盖另一项
   • 否则丢弃物品
3. 从地图创建一个新数组

const array1 = [
  {
    props: {
      type : 'text',
      id : 'item1',
      name : 'item1',
      value : '@item1@',
    },
  },
  {
    props: {
      type: 'hidden',
      id: 'item2',
      name: 'item2',
      value: '@item2@',
    },
  },
  {
    props: {
      type: 'hidden',
      id: 'item3',
      name: 'item3',
      value: '@item3@',
    },
  }
];

const array2 = [
  {
    props: {
      type: 'hidden',
      id: 'item1',
      name: 'item1',
      value: '@item1@',
    },
  },
  {
    props: {
      type: 'text',
      id: 'item3',
      name: 'item3',
      value: '@item3@',
    },
  }
];

//1. create a map from id => object pairs
const map = new Map(array1.map(obj => [obj.props.id, obj]));

//2. go over the second array
array2.forEach(obj => {
  if (!map.has(obj.props.id) //not a duplicate
    || obj.props.type !== "hidden") { //is not hidden
    //insert
    map.set(obj.props.id, obj);
  }
});

//3. convert back into array
const merged = [...map.values()];

console.log(merged);

作为记录，您基本上可以使用进行相同（或非常相似）的操作，.filter但是必须O(n)对每个项目进行查找。地图可确保更快的查找。