收集JavaScript数组中的唯一对象

Question

假设我有以下对象数组

var firstDataSet = [
  {'id': 123, 'name': 'ABC'},
  {'id': 456, 'name': 'DEF'},
  {'id': 789, 'name': 'GHI'},
  {'id': 101, 'name': 'JKL'}
];

var secondDataSet = [
  {'id': 123, 'name': 'ABC', 'xProp': '1q'},
  {'id': 156, 'name': 'MNO', 'xProp': '2w'},
  {'id': 789, 'name': 'GHI', 'xProp': '3e'},
  {'id': 111, 'name': 'PQR', 'xProp': '4r'}
];

现在我想收集具有唯一对象（匹配id和name）的数组，即。

var firstDataSet = [
  {'id': 123, 'name': 'ABC', 'xProp': '1q'},
  {'id': 456, 'name': 'DEF'},
  {'id': 789, 'name': 'GHI', 'xProp': '3e'},
  {'id': 101, 'name': 'JKL'},
  {'id': 156, 'name': 'MNO', 'xProp': '2w'},
  {'id': 111, 'name': 'PQR', 'xProp': '4r'}
];

我能收集所有的东西

Array.prototype.unshift.apply(firstDataSet , secondDataSet );

但不知道如何过滤掉重复的。有什么建议吗？

编辑：两个不同数组上的我的对象不相同。至少基于属性的数量。

Answer 1

我们将使用contat组合这两个数组，然后使用filter过滤结果数组。对于每个元素，我们将使用findIndex查找具有相同id和名称的第一个元素的索引。如果该索引与当前索引相同，这意味着这是该id和name的第一次出现，所以我们只是让它通过。否则，我们将在第一次出现时添加新字段，并过滤掉它。

function combine(a1, a2) {

  function match(e1, e2) { return e1.id === e2.id && e1.name === e2.name); }

  return a1.concat(a2) . filter((e1, i, a) => {
    let firstIndex = a.findIndex(e2 => match(e1, e2));
    if (i === firstIndex) return true; // this is the first occurrence
    a[firstIndex].xProp = e2.xProp;    // copy over property
    return false;                      // filter out
  });

}

如果您想处理任意属性，而不仅仅是xProp，那么将相关行更改为以下内容

a[firstIndex] = Object.assign(e2, a[firstIndex]);

这将使用在当前引用上复制其所有属性的结果替换第一个引用，包括它可能具有的任何其他属性。

强制性免责声明：一如既往，根据您的环境，您可能没有箭头函数、或数组#findIndex或对象。分配。在这种情况下，请根据需要重写/多边形填充/传输。

Answer 2

这可以通过扩展下面的设置类来实现

    var firstDataSet = [
      {'id': 123, 'name': 'ABC'},
      {'id': 456, 'name': 'DEF'},
      {'id': 789, 'name': 'GHI'},
      {'id': 101, 'name': 'JKL'}
    ];

    var secondDataSet = [
      {'id': 123, 'name': 'ABC', 'xProp': '1q'},
      {'id': 156, 'name': 'MNO', 'xProp': '2w'},
      {'id': 789, 'name': 'GHI', 'xProp': '3e'},
      {'id': 111, 'name': 'PQR', 'xProp': '4r'}
    ];

    Array.prototype.unshift.apply(firstDataSet , secondDataSet );

    //console.log(firstDataSet)

    class UniqueSet extends Set {
            constructor(values) {
                super(values);

                const data = [];
                for (let value of this) {
                    if (data.includes(JSON.parse(value.id))) {
                        this.delete(value);
                    } else {
                        data.push(value.id);
                    }
                }
            }
          }

console.log(new UniqueSet(firstDataSet))

工作环节

Answer 3

这是最初的问题。

使用集合：

使用Set对象可以存储任何类型的唯一值，无论是基元值还是对象引用。

还可以使用对象文字。

var list = [JSON.stringify({id: 123, 'name': 'ABC'}), JSON.stringify({id: 123, 'name': 'ABC'})]; 
var unique_list = new Set(list); // returns Set {"{'id': 123, 'name': 'ABC'}"}
var list = Array.from(unique_list); // converts back to an array, and you can unstringify the results accordingly.

有关将集合构造回数组的更多方法，请按照此处的说明进行操作。如果您不能使用ES6（这是定义Set），那么对于较旧的浏览器有一个polyfill。

不幸的是，这些对象不再是严格的重复对象，例如，无法使用Set以友好的方式处理这些对象。

解决这类问题的最简单方法是迭代对象数组，识别那些具有重复属性值的对象，并使用splice就地消除这些对象。