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，因为重复项 fromarray2的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

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@',    },  }];function getUnique(arr, comp) {  const unique = arr    .map(e => e[comp])    // store the keys of the unique objects    .map((e, i, final) => final.indexOf(e) === i && i)    // eliminate the dead keys & store unique objects    .filter(e => arr[e]).map(e => arr[e]);  return unique;}const arr = array1.concat(array2);console.log(getUnique(arr, 'id'));

Answer 2

你可以id => object从第一个数组创建一个 Map遍历第二个数组，或者如果尚未在地图中添加该项目检查当前项目是否不是type: "hidden"并覆盖另一个否则丢弃该项目从 Map 创建一个新数组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 pairsconst map = new Map(array1.map(obj => [obj.props.id, obj]));//2. go over the second arrayarray2.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 arrayconst merged = [...map.values()];console.log(merged);为了记录，您基本上可以使用相同（或非常相似）的东西，.filter但您必须O(n)对每个项目进行查找。Map 确保更快的查找。