如何在 javascript 中连接两个数组并删除重复项

Question

我想通过删除重复项来连接以下两个数组，而不分配给第三个变量：

var arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];

var arr2=[{id:3,name:'EF'},{id:2,name:'CD'}];

我想要 arr1 像：

[{id:1,name:'AB'},{id:2,name:'CD'},{id:3,name:'EF'}]

arr1.concat(arr2);

Answer 1

首先合并两个数组，然后将数组及其 id 放入映射中。然后从地图值创建数组。

var arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];
var arr2=[{id:3,name:'EF'},{id:2,name:'CD'}];

arr1 = arr1.concat(arr2) // merge two arrays
let foo = new Map();
for(const tag of arr1) {
  foo.set(tag.id, tag);
}
let final = [...foo.values()]
console.log(final)

Answer 2

可以使用Array reduce和findIndex来实现你想要的。

var arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];

var arr2=[{id:3,name:'EF'},{id:2,name:'CD'}];

// loop over arr2, add the elements of array2 if it doesn't exist in array1
var newArr = arr2.reduce((acc, eachArr2Elem) => {
  if (arr1.findIndex((eachArr1Elem) => eachArr1Elem.id === eachArr2Elem.id && eachArr1Elem.name === eachArr2Elem.name)  === -1) {
    acc.push(eachArr2Elem)
  }
  return acc
}, [...arr1]); // initialize the new Array with the contents of array1

console.log(newArr)

Answer 3

使用

spread

运算符，您可以展平传递给

combineAndDeDup

方法的任意数量的数组，我还分离出了一些逻辑方法（希望）更易读的代码。我希望这有帮助。

const arr1 = [{id:1,name:'AB'}, {id:2,name:'CD'}]
const arr2 = [{id:3,name:'EF'}, {id:2,name:'CD'}]

const flatten = a => [].concat.apply([], a)
const noDuplicateProps = (a, b) => Object.keys(a).some(k => a[k] === b[k])

const combineAndDeDup = (...arrs) => {
  
  return flatten(arrs).reduce((acc, item) => {
    const uniqueItem = acc.findIndex(i => noDuplicateProps(i, item)) === -1
    
    if (uniqueItem) return acc.concat([ item ])
    
    return acc
  }, [])
}


const deDuped = combineAndDeDup(arr1, arr2)
const megaDeDuped = combineAndDeDup(arr1, arr2, arr1, arr1, arr2, arr1)

console.log(deDuped)
console.log(megaDeDuped)

Answer 4

如果你喜欢干净的 ES6 试试这个：
快乐的代码:)

function arrayWithNoDuplicates(array, field) {
  const arrayWithoutNoDuplicates = array.filter((value, index, self) =>
    index === self.findIndex((t) => (
      t[field] === value[field]
    ))
  )
  return arrayWithoutNoDuplicates
}

const arr1 = [{id:1,name:'AB'}, {id:2,name:'CD'}]
const arr2 = [{id:3,name:'EF'}, {id:2,name:'CD'}]

// The first param is the two merged arrays and the second the field you
// to filter by
console.log(arrayWithNoDuplicates([...arr1, ...arr2], 'id'))

Answer 5

通过使用 lodash

_.uniqWith(array, [comparator])

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];

_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

Answer 6

  var arr1 = [{ id: 1, name: 'AB' }, { id: 2, name: 'CD' }];
  var arr2 = [{ id: 3, name: 'EF' }, { id: 3, name: 'XX' }];
  arr1.forEach(element => {
    arr2.forEach((el, idx) => {
      if (element.id === el.id || element.name === el.name) {
        delete arr2[idx]
      }
    });
  });

  let data = arr1.concat(arr2)

  // or arr1 = arr1.concat(arr2)
  // then your arr1 contains your unique array

数据变量包含您独特的数组

Answer 7

这是与

id

进行比较的一款衬垫。

let result = arr1.concat( arr2.filter( i2 => !arr1.find( i1 => i1.id == i2.id ) ) );

我修改了元素以显示具有相同

id

的不同对象会发生什么情况。将

arr1

与

arr2

交换为您想要保留首选组件的阵列。在 JavaScript 中似乎没有简单的方法来比较对象，您可以使用

JSON.stringify

但这取决于元素顺序。您可以在 https://playcode.io/new/ 尝试一下：

var arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];
var arr2=[{id:3,name:'EF'},{id:2,name:'GH'}];

let result;

result = arr1.concat( arr2.filter( i2 => !arr1.find( i1 => i1.id == i2.id ) ) );

console.log('RESULT: ' + JSON.stringify(result));

result = arr1.concat(
  arr2.filter(
    i2 => !arr1.find(
      i1 => {
        console.log('I1: ' + JSON.stringify(i1) + ' I2: ' + JSON.stringify(i2));
        return i1.id == i2.id;}
        )
  )
);

console.log('RESULT: ' + JSON.stringify(result));

result = arr2.concat(
  arr1.filter(
    i1 => !arr2.find(
      i2 => {
        console.log('I1: ' + JSON.stringify(i1) + ' I2: ' + JSON.stringify(i2));
        return i1.id == i2.id;}
        )
  )
);

console.log('RESULT: ' + JSON.stringify(result));

Answer 8

lodash 函数

unionBy

和

unionWith

都可以解决您的问题。

如果你的对象有唯一的键，

unionBy

是最优雅的处理方式。

var arr1 = [{id:1,name:'AB'},{id:2,name:'CD'}];
var arr2 = [{id:3,name:'EF'},{id:2,name:'CD'}];
var mergedWithoutDups = _.unionBy(arr1, arr2. 'id')

如果您的对象没有唯一键，请使用

unionWith

和

isEqual

代替。这将对所有对象进行深入比较以删除重复项。

var arr1 = [{id:1,name:'AB'},{id:2,name:'CD'}];
var arr2 = [{id:3,name:'EF'},{id:2,name:'CD'}];
var mergedWithoutDups = _.unionWith(arr1, arr2. _.isEqual)

Answer 9

let arr1=[{id:1,name:'AB'},{id:2,name:'CD'}];

let arr2=[{id:3,name:'EF'},{id:2,name:'CD'}];

console.log(arr1.concat(arr2.splice(0,1)));

这里我使用 splice 删除 arr2 中的第一个元素并将其连接到 arr1。