Comment fusionner deux tableaux en JavaScript et dé-dupliquer les éléments ?

Question

J'ai deux tableaux JavaScript :

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

Je veux que la sortie soit :

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

Les mots répétés doivent être supprimés du tableau de sortie.

Comment fusionner deux tableaux en JavaScript afin d'obtenir uniquement les éléments uniques de chaque tableau dans le même ordre qu'ils ont été insérés dans les tableaux d'origine ?

Answer 1

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));

Utilisation de la version ES6 déstructuration

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

Puisqu'il n'existe pas de moyen "intégré" de supprimer les doublons ( ECMA-262 a en fait Array.forEach qui serait idéal 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 permet également de conserver l'ordre des tableaux (c'est-à-dire qu'aucun tri n'est nécessaire).

Puisque de nombreuses personnes sont contrariées par l'augmentation du prototype de Array.prototype et for in boucles, 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.defineProperty comme ça :

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;
    }
});

Answer 2

Avec Underscore.js ou Lo-Dash vous pouvez le 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

Answer 3

Tout d'abord, concaténer les deux tableaux, puis filtrer 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]

Modifier

Comme nous l'avons suggéré, une solution plus performante consisterait à filtrer les éléments uniques dans la base de données de l'UE. b avant de le 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]

Answer 4

Voici un point de vue légèrement différent sur la boucle. Grâce à certaines 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);
  }
}

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

Un commentaire m'a fait remarquer que l'une de mes variables de configuration permettait à ma boucle de prendre de l'avance sur les autres, car elle n'avait pas à initialiser un tableau vide pour y écrire. Je suis d'accord avec cela, donc j'ai réécrit le test pour égaliser le terrain de jeu, et j'ai 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 du tableau associatif d'une réponse pour éliminer le problème de l'association. .indexOf() dans la boucle qui ralentissait beaucoup les choses avec une deuxième boucle, et a inclus certaines des autres optimisations que d'autres utilisateurs ont suggéré dans leurs réponses aussi.

La meilleure réponse ici, avec la double boucle sur chaque valeur (i-1), est toujours significativement plus lente. lodash est toujours aussi performant, et je le recommande toujours à tous ceux qui n'ont pas peur d'ajouter une bibliothèque à leur projet. Pour ceux qui ne veulent pas le faire, ma boucle while est toujours une bonne réponse et la réponse avec le filtre est très forte ici, battant tous mes tests avec la dernière version de Canary Chrome (44.0.2360) au moment où j'écris ces lignes.

Vérifiez La réponse de Mike et La réponse de Dan Stocker si vous voulez monter d'un cran dans la vitesse. Ce sont de loin les résultats les plus rapides après avoir passé en revue presque toutes les réponses viables.

Answer 5

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.