Как объединить два массива в JavaScript и дедуплицировать элементы

Существует столько решений для слияния двух массивов. Они могут быть разделены на две основных категории (кроме использования сторонних библиотек как lodash или underscore.js).

a) комбинируют два массива и удаляют дублированные объекты.

b) отфильтровывают объекты прежде, чем объединить их.

Объединение два массива и удаляют дублированные объекты

Объединение

// mutable operation(array1 is the combined array)
array1.push(...array2);
array1.unshift(...array2);

// immutable operation
const combined = array1.concat(array2);
const combined = [...array1, ...array2];    // ES6

Объединение

существует много путей к объединению массива, я лично предлагаю ниже двух методов.

// a little bit tricky
const merged = combined.filter((item, index) => combined.indexOf(item) === index);
const merged = [...new Set(combined)];

Отфильтровывают объекты прежде, чем объединить их

существует также много путей, но я лично предлагаю ниже кода из-за его простоты.

const merged = array1.concat(array2.filter(secItem => !array1.includes(secItem)));

Почему вы не используете объект? Похоже, вы пытаетесь смоделировать набор. Однако это не сохранит порядок.

var set1 = {"Vijendra":true, "Singh":true}
var set2 = {"Singh":true,  "Shakya":true}

// Merge second object into first
function merge(set1, set2){
  for (var key in set2){
    if (set2.hasOwnProperty(key))
      set1[key] = set2[key]
  }
  return set1
}

merge(set1, set2)

// Create set from array
function setify(array){
  var result = {}
  for (var item in array){
    if (array.hasOwnProperty(item))
      result[array[item]] = true
  }
  return result
}

//Array.indexOf was introduced in javascript 1.6 (ECMA-262) 
//We need to implement it explicitly for other browsers, 
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt, from)
  {
    var len = this.length >>> 0;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}
//now, on to the problem

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];

var merged = array1.concat(array2);
var t;
for(i = 0; i < merged.length; i++)
  if((t = merged.indexOf(i + 1, merged[i])) != -1)
  {
    merged.splice(t, 1);
    i--;//in case of multiple occurrences
  }

Реализация метода indexOf для других браузеров взята из MDC

Новое решение (которое использует Array.prototype.indexOf и Array.prototype.concat ):

Array.prototype.uniqueMerge = function( a ) {
    for ( var nonDuplicates = [], i = 0, l = a.length; i<l; ++i ) {
        if ( this.indexOf( a[i] ) === -1 ) {
            nonDuplicates.push( a[i] );
        }
    }
    return this.concat( nonDuplicates )
};

Использование:

>>> ['Vijendra', 'Singh'].uniqueMerge(['Singh', 'Shakya'])
["Vijendra", "Singh", "Shakya"]

Массив. prototype.indexOf (для Internet Explorer):

Array.prototype.indexOf = Array.prototype.indexOf || function(elt)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0) ? Math.ceil(from): Math.floor(from); 
    if (from < 0)from += len;

    for (; from < len; from++)
    {
      if (from in this && this[from] === elt)return from;
    }
    return -1;
  };

Можно создать Set spread луг эти два входных массива.

, Поскольку наборы не позволяют дублирующиеся элементы, это создаст объединение от от элементов в этих двух входных массивах.

, Например:

var arr1 = ['1', '2', '3']
var arr2 = ['3', '4', '5']

var arr3 = [...new Set([...arr1, ...arr2])]

console.log(arr3);
//(5) ["1", "2", "3", "4", "5"]

Я знаю, что этот вопрос не о массиве объектов, но искатели действительно заканчивают здесь.

, таким образом, стоит добавить для будущих читателей надлежащий способ ES6 объединиться и затем удалить дубликаты

массив объектов :

var arr1 = [ {a: 1}, {a: 2}, {a: 3} ];
var arr2 = [ {a: 1}, {a: 2}, {a: 4} ];

var arr3 = arr1.concat(arr2.filter( ({a}) => !arr1.find(f => f.a == a) ));

// [ {a: 1}, {a: 2}, {a: 3}, {a: 4} ]

ES2019

можно использовать его как union(array1, array2, array3, ...)

/**
 * Merges two or more arrays keeping unique items. This method does
 * not change the existing arrays, but instead returns a new array.
 */
function union<T>(...arrays: T[]) {
  return [...new Set([...arrays].flat())];
}

, Это - ES2019 из-за эти flat() функция, но можно использовать ядро-js для получения его как полизаливки. T вот является TypeScript универсальным типом, который можно удалить, если Вы не используете TypeScript. При использовании TypeScript удостоверьтесь, что добавили "lib": ["es2019.array"] к параметрам компилятора в tsconfig.json.

или...

просто lodash использования _ .union

   //1.merge two array into one array

   var arr1 = [0, 1, 2, 4];
   var arr2 = [4, 5, 6];

   //for merge array we use "Array.concat"

   let combineArray = arr1.concat(arr2); //output

   alert(combineArray); //now out put is 0,1,2,4,4,5,6 but 4 reapeat

   //2.same thing with "Spread Syntex"

   let spreadArray = [...arr1, ...arr2];

   alert(spreadArray);  //now out put is 0,1,2,4,4,5,6 but 4 reapete


   /*
       if we need remove duplicate element method use are
       1.Using set
       2.using .filter
       3.using .reduce
   */