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

你可以

1. id => object从第一个数组创建一个 Map

2. 遍历第二个数组，或者

• 如果尚未在地图中添加该项目

• 检查当前项目是否不是type: "hidden"并覆盖另一个

• 否则丢弃该项目

3. 从 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 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)对每个项目进行查找。Map 确保更快的查找。