J'ai deux tableaux JavaScript:

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

Je veux que la sortie soit:

var array3 = ["Vijendra","Singh","Shakya"];

Le tableau de sortie doit avoir supprimé les mots répétés.

Comment fusionner deux tableaux en JavaScript pour ne récupérer que les éléments uniques de chaque tableau dans le même ordre qu'ils ont été insérés dans les tableaux d'origine?

Pour simplement fusionner les tableaux (sans supprimer les doublons)

Utilisation de la version ES5 Array.concat:

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

console.log(array1.concat(array2));

La version ES6 utilise la déstructuration

const array1 = ["Vijendra","Singh"];
const array2 = ["Singh", "Shakya"];
const array3 = [...array1, ...array2];

Puisqu'il n'y a pas de méthode intégrée pour supprimer les doublons ( ECMA-262 en fait, Array.forEachce qui serait parfait pour cela), nous devons le faire manuellement:

Array.prototype.unique = function() {
    var a = this.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }

    return a;
};

Ensuite, pour l'utiliser:

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
// Merges both arrays and gets unique items
var array3 = array1.concat(array2).unique(); 

Cela préservera également l'ordre des tableaux (c'est-à-dire, aucun tri n'est nécessaire).

Étant donné que de nombreuses personnes sont ennuyées par l'augmentation de prototype Array.prototypeet les for inboucles, voici une façon moins invasive de l'utiliser:

function arrayUnique(array) {
    var a = array.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }

    return a;
}

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
    // Merges both arrays and gets unique items
var array3 = arrayUnique(array1.concat(array2));

Pour ceux qui ont la chance de travailler avec des navigateurs où ES5 est disponible, vous pouvez utiliser Object.definePropertycomme ceci:

Object.defineProperty(Array.prototype, 'unique', {
    enumerable: false,
    configurable: false,
    writable: false,
    value: function() {
        var a = this.concat();
        for(var i=0; i<a.length; ++i) {
            for(var j=i+1; j<a.length; ++j) {
                if(a[i] === a[j])
                    a.splice(j--, 1);
            }
        }

        return a;
    }
});

Avec Underscore.js ou Lo-Dash, vous pouvez faire:

console.log(_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

http://underscorejs.org/#union

http://lodash.com/docs#union

Concaténez d'abord les deux tableaux, puis filtrez uniquement les éléments uniques:

var a = [1, 2, 3], b = [101, 2, 1, 10]
var c = a.concat(b)
var d = c.filter((item, pos) => c.indexOf(item) === pos)

console.log(d) // d is [1, 2, 3, 101, 10]

Éditer

Comme suggéré, une solution plus performante serait de filtrer les éléments uniques bavant de les concaténer avec a:

var a = [1, 2, 3], b = [101, 2, 1, 10]
var c = a.concat(b.filter((item) => a.indexOf(item) < 0))

console.log(c) // c is [1, 2, 3, 101, 10]

Il s'agit d'une solution ECMAScript 6 utilisant l' opérateur générique et les génériques de tableau.

Actuellement, cela ne fonctionne qu'avec Firefox, et éventuellement avec la prévisualisation technique d'Internet Explorer.

Mais si vous utilisez Babel , vous pouvez l'avoir maintenant.

const input = [
  [1, 2, 3],
  [101, 2, 1, 10],
  [2, 1]
];
const mergeDedupe = (arr) => {
  return [...new Set([].concat(...arr))];
}

console.log('output', mergeDedupe(input));

ES6

array1.push(...array2) // => don't remove duplication 

OU

[...array1,...array2] //   =>  don't remove duplication 

OU

[...new Set([...array1 ,...array2])]; //   => remove duplication

À l'aide d'un ensemble (ECMAScript 2015), ce sera aussi simple que cela:

const array1 = ["Vijendra", "Singh"];
const array2 = ["Singh", "Shakya"];
console.log(Array.from(new Set(array1.concat(array2))));

Voici une version légèrement différente de la boucle. Avec certaines des optimisations de la dernière version de Chrome, c'est la méthode la plus rapide pour résoudre l'union des deux tableaux (Chrome 38.0.2111).

http://jsperf.com/merge-two-arrays-keeping-only-unique-values

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

var arr = array1.concat(array2),
  len = arr.length;

while (len--) {
  var itm = arr[len];
  if (array3.indexOf(itm) === -1) {
    array3.unshift(itm);
  }
}

en boucle: ~ 589 k ops / s
filtre: ~ 445 k ops / s
lodash: 308k ops / s
pour les boucles: 225k ops / s

Un commentaire a souligné qu'une de mes variables de configuration faisait que ma boucle devançait le reste, car elle n'avait pas à initialiser un tableau vide pour écrire. Je suis d'accord avec cela, j'ai donc réécrit le test pour uniformiser les règles du jeu et inclus une option encore plus rapide.

http://jsperf.com/merge-two-arrays-keeping-only-unique-values/52

let whileLoopAlt = function (array1, array2) {
    const array3 = array1.slice(0);
    let len1 = array1.length;
    let len2 = array2.length;
    const assoc = {};

    while (len1--) {
        assoc[array1[len1]] = null;
    }

    while (len2--) {
        let itm = array2[len2];

        if (assoc[itm] === undefined) { // Eliminate the indexOf call
            array3.push(itm);
            assoc[itm] = null;
        }
    }

    return array3;
};

Dans cette solution alternative, j'ai combiné la solution de tableau associatif d'une réponse pour éliminer l' .indexOf()appel dans la boucle qui ralentissait beaucoup les choses avec une deuxième boucle, et j'ai inclus certaines des autres optimisations que d'autres utilisateurs ont suggérées dans leurs réponses. .

La meilleure réponse ici avec la double boucle sur chaque valeur (i-1) est encore beaucoup plus lente. lodash se porte toujours bien, et je le recommanderais toujours à tous ceux qui ne veulent pas ajouter une bibliothèque à leur projet. Pour ceux qui ne le souhaitent pas, ma boucle while est toujours une bonne réponse et la réponse du filtre a une très bonne indication ici, battant tout sur mes tests avec le dernier Canary Chrome (44.0.2360) au moment de la rédaction de cet article.

Découvrez la réponse de Mike et la réponse de Dan Stocker si vous voulez à l' étape d'un cran dans la vitesse. Ce sont de loin les résultats les plus rapides de tous les résultats après avoir examiné presque toutes les réponses viables.

Vous pouvez le faire simplement avec ECMAScript 6,

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
var array3 = [...new Set([...array1 ,...array2])];
console.log(array3); // ["Vijendra", "Singh", "Shakya"];

• Utilisez l' opérateur d'étalement pour concaténer le tableau.
• Utilisez Set pour créer un ensemble distinct d'éléments.
• Utilisez à nouveau l'opérateur d'étalement pour convertir l'ensemble en un tableau.

Array.prototype.merge = function(/* variable number of arrays */){
    for(var i = 0; i < arguments.length; i++){
        var array = arguments[i];
        for(var j = 0; j < array.length; j++){
            if(this.indexOf(array[j]) === -1) {
                this.push(array[j]);
            }
        }
    }
    return this;
};

Une bien meilleure fonction de fusion de tableaux.

Je jette juste mes deux cents.

function mergeStringArrays(a, b){
    var hash = {};
    var ret = [];

    for(var i=0; i < a.length; i++){
        var e = a[i];
        if (!hash[e]){
            hash[e] = true;
            ret.push(e);
        }
    }

    for(var i=0; i < b.length; i++){
        var e = b[i];
        if (!hash[e]){
            hash[e] = true;
            ret.push(e);
        }
    }

    return ret;
}

C'est une méthode que j'utilise beaucoup, elle utilise un objet comme table de hachage pour effectuer la vérification des doublons. En supposant que le hachage est O (1), cela s'exécute dans O (n) où n est a.length + b.length. Honnêtement, je n'ai aucune idée de la façon dont le navigateur effectue le hachage, mais il fonctionne bien sur plusieurs milliers de points de données.

Évitez simplement les boucles imbriquées (O (n ^ 2)) et .indexOf()(+ O (n)).

function merge(a, b) {
    var hash = {}, i;
    for (i=0; i<a.length; i++) {
        hash[a[i]]=true;
    } 
    for (i=0; i<b.length; i++) {
        hash[b[i]]=true;
    } 
    return Object.keys(hash);
}

Le meilleur de cette réponse simplifié et transformé en une belle fonction:

function mergeUnique(arr1, arr2){
    return arr1.concat(arr2.filter(function (item) {
        return arr1.indexOf(item) === -1;
    }));
}

Pourquoi n'utilisez-vous pas un objet? On dirait que vous essayez de modéliser un ensemble. Cependant, cela ne préservera pas la commande.

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
}

La meilleure solution...

Vous pouvez vérifier directement dans la console du navigateur en appuyant sur ...

Sans doublon

a = [1, 2, 3];
b = [3, 2, 1, "prince"];

a.concat(b.filter(function(el) {
    return a.indexOf(el) === -1;
}));

Avec doublon

["prince", "asish", 5].concat(["ravi", 4])

Si vous voulez sans doublon, vous pouvez essayer une meilleure solution à partir d'ici - Shouting Code .

[1, 2, 3].concat([3, 2, 1, "prince"].filter(function(el) {
    return [1, 2, 3].indexOf(el) === -1;
}));

Essayez sur la console du navigateur Chrome

 f12 > console

Production:

["prince", "asish", 5, "ravi", 4]

[1, 2, 3, "prince"]

Mon centime et demi:

Array.prototype.concat_n_dedupe = function(other_array) {
  return this
    .concat(other_array) // add second
    .reduce(function(uniques, item) { // dedupe all
      if (uniques.indexOf(item) == -1) {
        uniques.push(item);
      }
      return uniques;
    }, []);
};

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

var result = array1.concat_n_dedupe(array2);

console.log(result);

Vous pouvez y parvenir en utilisant simplement Underscore.js => uniq :

array3 = _.uniq(array1.concat(array2))

console.log(array3)

Il imprimera ["Vijendra", "Singh", "Shakya"] .

Pour ES6, une seule ligne:

a = [1, 2, 3, 4]
b = [4, 5]
[...new Set(a.concat(b))]  // [1, 2, 3, 4, 5]

Je sais que cette question ne concerne pas les tableaux d'objets, mais les chercheurs se retrouvent ici.

il vaut donc la peine d'ajouter pour les futurs lecteurs une méthode de fusion ES6 appropriée, puis de supprimer les doublons

tableau d'objets :

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} ]

//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
  }

L'implémentation de la indexOfméthode pour les autres navigateurs provient de MDC

Nouvelle solution (qui utilise Array.prototype.indexOfet 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 )
};

Usage:

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

Array.prototype.indexOf (pour 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;
  };

Cela peut être fait en utilisant Set.

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

var array3 = array1.concat(array2);
var tempSet = new Set(array3);
array3 = Array.from(tempSet);

//show output
document.body.querySelector("div").innerHTML = JSON.stringify(array3);

<div style="width:100%;height:4rem;line-height:4rem;background-color:steelblue;color:#DDD;text-align:center;font-family:Calibri" > 
  temp text 
</div>

Il existe de nombreuses solutions pour fusionner deux tableaux. Ils peuvent être divisés en deux catégories principales (à l'exception de l'utilisation de bibliothèques tierces comme lodash ou underscore.js).

a) combinez deux tableaux et supprimez les éléments en double.

b) filtrer les éléments avant de les combiner.

Combinez deux tableaux et supprimez les éléments en double

Combiner

// 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

Unificateur

Il existe de nombreuses façons d'unifier un tableau, je suggère personnellement ci-dessous deux méthodes.

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

Filtrer les éléments avant de les combiner

Il existe également de nombreuses façons, mais je suggère personnellement le code ci-dessous en raison de sa simplicité.

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

Array.prototype.add = function(b){
    var a = this.concat();                // clone current object
    if(!b.push || !b.length) return a;    // if b is not an array, or empty, then return a unchanged
    if(!a.length) return b.concat();      // if original is empty, return b

    // go through all the elements of b
    for(var i = 0; i < b.length; i++){
        // if b's value is not in a, then add it
        if(a.indexOf(b[i]) == -1) a.push(b[i]);
    }
    return a;
}

// Example:
console.log([1,2,3].add([3, 4, 5])); // will output [1, 2, 3, 4, 5]

array1.concat(array2).filter((value, pos, arr)=>arr.indexOf(value)===pos)

La bonne chose à propos de celui-ci est la performance et que vous en général, lorsque vous travaillez avec des tableaux, vous enchaînez des méthodes comme le filtre, la carte, etc. afin que vous puissiez ajouter cette ligne et elle concaténera et dédupliquera array2 avec array1 sans avoir besoin d'une référence à la dernière. une (lorsque vous enchaînez des méthodes que vous n'avez pas), par exemple:

someSource()
.reduce(...)
.filter(...)
.map(...) 
// and now you want to concat array2 and deduplicate:
.concat(array2).filter((value, pos, arr)=>arr.indexOf(value)===pos)
// and keep chaining stuff
.map(...)
.find(...)
// etc

(Je n'aime pas polluer Array.prototype et ce serait le seul moyen de respecter la chaîne - la définition d'une nouvelle fonction la brisera - donc je pense que quelque chose comme ça est le seul moyen d'y parvenir)

Vous pouvez essayer ceci:

const union = (a, b) => Array.from(new Set([...a, ...b]));

console.log(union(["neymar","messi"], ["ronaldo","neymar"]));

Une approche fonctionnelle avec ES2015

Suivant l'approche fonctionnelle, a unionde deux Arrays n'est que la composition de concatet filter. Afin de fournir des performances optimales, nous avons recours au Settype de données natif , qui est optimisé pour les recherches de propriétés.

Quoi qu'il en soit, la question clé associée à une unionfonction est de savoir comment traiter les doublons. Les permutations suivantes sont possibles:

Array A      + Array B

[unique]     + [unique]
[duplicated] + [unique]
[unique]     + [duplicated]
[duplicated] + [duplicated]

Les deux premières permutations sont faciles à manipuler avec une seule fonction. Cependant, les deux derniers sont plus compliqués, car vous ne pouvez pas les traiter tant que vous comptez sur les Setrecherches. Étant donné que le passage à Objectdes recherches de propriétés anciennes simples entraînerait une sérieuse performance, l'implémentation suivante ignore simplement les troisième et quatrième permutations. Vous devrez créer une version distincte de unionpour les prendre en charge.

// small, reusable auxiliary functions

const comp = f => g => x => f(g(x));
const apply = f => a => f(a);
const flip = f => b => a => f(a) (b);
const concat = xs => y => xs.concat(y);
const afrom = apply(Array.from);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// de-duplication

const dedupe = comp(afrom) (createSet);


// the actual union function

const union = xs => ys => {
  const zs = createSet(xs);  
  return concat(xs) (
    filter(x => zs.has(x)
     ? false
     : zs.add(x)
  ) (ys));
}


// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,4,5,6,6];


// here we go

console.log( "unique/unique", union(dedupe(xs)) (ys) );
console.log( "duplicated/unique", union(xs) (ys) );

À partir de là, il devient trivial d'implémenter une unionnfonction, qui accepte n'importe quel nombre de tableaux (inspiré des commentaires de naomik):

// small, reusable auxiliary functions

const uncurry = f => (a, b) => f(a) (b);
const foldl = f => acc => xs => xs.reduce(uncurry(f), acc);

const apply = f => a => f(a);
const flip = f => b => a => f(a) (b);
const concat = xs => y => xs.concat(y);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// union and unionn

const union = xs => ys => {
  const zs = createSet(xs);  
  return concat(xs) (
    filter(x => zs.has(x)
     ? false
     : zs.add(x)
  ) (ys));
}

const unionn = (head, ...tail) => foldl(union) (head) (tail);


// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,4,5,6,6];
const zs = [0,1,2,3,4,5,6,7,8,9];


// here we go

console.log( unionn(xs, ys, zs) );

Il s'avère que unionnc'est juste foldl(aka Array.prototype.reduce), qui prend unioncomme réducteur. Remarque: Étant donné que l'implémentation n'utilise pas d'accumulateur supplémentaire, elle générera une erreur lorsque vous l'appliquerez sans arguments.

pour le plaisir ... voici une solution monoligne:

const x = [...new Set([['C', 'B'],['B', 'A']].reduce( (a, e) => a.concat(e), []))].sort()
// ['A', 'B', 'C']

Pas particulièrement lisible, mais cela peut aider quelqu'un:

1. Applique une fonction de réduction avec la valeur initiale de l'accumulateur définie sur un tableau vide.
2. La fonction de réduction utilise concat pour ajouter chaque sous-tableau au tableau d'accumulateurs.
3. Le résultat de ceci est passé en tant que paramètre constructeur pour créer un nouveau Set .
4. L'opérateur d'étalement est utilisé pour convertir le Seten un tableau.
5. La sort()fonction est appliquée au nouveau tableau.

DeDuplicate single or Merge and DeDuplicate multiple array inputs. Exemple ci-dessous.

utilisation d'ES6 - Définir, pour, déstructurer

J'ai écrit cette fonction simple qui prend plusieurs arguments de tableau. Fait à peu près la même chose que la solution ci-dessus, il a juste un cas d'utilisation plus pratique. Cette fonction ne concatène pas les valeurs en double dans un seul tableau afin de pouvoir les supprimer ultérieurement.

DÉFINITION DE LA FONCTION COURTE (seulement 9 lignes)

/**
* This function merging only arrays unique values. It does not merges arrays in to array with duplicate values at any stage.
*
* @params ...args Function accept multiple array input (merges them to single array with no duplicates)
* it also can be used to filter duplicates in single array
*/
function arrayDeDuplicate(...args){
   let set = new Set(); // init Set object (available as of ES6)
   for(let arr of args){ // for of loops through values
      arr.map((value) => { // map adds each value to Set object
         set.add(value); // set.add method adds only unique values
      });
   }
   return [...set]; // destructuring set object back to array object
   // alternativly we culd use:  return Array.from(set);
}

UTILISER L'EXEMPLE CODEPEN :

// SCENARIO 
let a = [1,2,3,4,5,6];
let b = [4,5,6,7,8,9,10,10,10];
let c = [43,23,1,2,3];
let d = ['a','b','c','d'];
let e = ['b','c','d','e'];

// USEAGE
let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e);
let uniqueArraySingle = arrayDeDuplicate(b);

// OUTPUT
console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"]
console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10]

var arr1 = [1, 3, 5, 6];
var arr2 = [3, 6, 10, 11, 12];
arr1.concat(arr2.filter(ele => !arr1.includes(ele)));
console.log(arr1);

output :- [1, 3, 5, 6, 10, 11, 12]