Utilisation de jQuery pour comparer deux tableaux d'objets Javascript

J'ai deux tableaux d'objets JavaScript que j'aimerais comparer pour voir s'ils sont identiques. Les objets peuvent ne pas (et ne seront probablement pas) dans le même ordre dans chaque tableau. Chaque tableau ne doit pas avoir plus de 10 objets. Je pensais que jQuery pourrait avoir une solution élégante à ce problème, mais je n'ai pas pu trouver grand-chose en ligne.

Je sais qu'une $.each(array, function(){})solution imbriquée brute pourrait fonctionner, mais y a-t-il une fonction intégrée dont je ne suis pas au courant?

Merci.

Il existe un moyen simple ...

$(arr1).not(arr2).length === 0 && $(arr2).not(arr1).length === 0

Si ce qui précède renvoie true, les deux tableaux sont identiques même si les éléments sont dans un ordre différent.

REMARQUE: cela ne fonctionne que pour les versions jquery <3.0.0 lors de l'utilisation d'objets JSON

Je cherchais également ceci aujourd'hui et j'ai trouvé: http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256BFB0077DFFD

Je ne sais pas si c'est une bonne solution, bien qu'ils mentionnent certaines considérations de performances prises en compte.

J'aime l'idée d'une méthode d'aide jQuery. @David Je préfère voir votre méthode de comparaison fonctionner comme:

jQuery.compare(a, b)

Je n'ai pas de sens à faire:

$(a).compare(b)

où a et b sont des tableaux. Normalement, lorsque vous $ (quelque chose), vous passez une chaîne de sélection pour travailler avec des éléments DOM.

En ce qui concerne également le tri et la mise en cache des tableaux triés:

• Je ne pense pas que le tri une fois au début de la méthode au lieu de chaque fois à travers la boucle est une «mise en cache». Le tri se produira toujours à chaque fois que vous appelez compare (b). C'est juste de la sémantique, mais ...
• for (var i = 0; t [i]; i ++) { ... cette boucle se termine tôt si votre tableau t contient une fausse valeur quelque part, donc $ ([1, 2, 3, 4]). compare ( [1, false, 2, 3]) renvoie vrai !
• Plus important encore, la méthode array sort () trie le tableau sur place , donc faire var b = t.sort () ... ne crée pas une copie triée du tableau d'origine, elle trie le tableau d' origine et attribue également une référence à il en b . Je ne pense pas que la méthode de comparaison devrait avoir des effets secondaires.

Il semble que ce que nous devons faire est de copier les tableaux avant de travailler dessus. La meilleure réponse que j'ai pu trouver pour savoir comment faire cela d'une manière jQuery était par nul autre que John Resig ici sur SO! Quelle est la manière la plus efficace de cloner en profondeur un objet en JavaScript? (voir les commentaires sur sa réponse pour la version tableau de la recette de clonage d'objet)

Dans ce cas, je pense que le code pour cela serait:

jQuery.extend({
    compare: function (arrayA, arrayB) {
        if (arrayA.length != arrayB.length) { return false; }
        // sort modifies original array
        // (which are passed by reference to our method!)
        // so clone the arrays before sorting
        var a = jQuery.extend(true, [], arrayA);
        var b = jQuery.extend(true, [], arrayB);
        a.sort(); 
        b.sort();
        for (var i = 0, l = a.length; i < l; i++) {
            if (a[i] !== b[i]) { 
                return false;
            }
        }
        return true;
    }
});

var a = [1, 2, 3];
var b = [2, 3, 4];
var c = [3, 4, 2];

jQuery.compare(a, b);
// false

jQuery.compare(b, c);
// true

// c is still unsorted [3, 4, 2]

Mon approche était assez différente - j'ai aplati les deux collections en utilisant JSON.stringify et utilisé une chaîne normale de comparaison pour vérifier l'égalité.

C'est à dire

var arr1 = [
             {Col: 'a', Val: 1}, 
             {Col: 'b', Val: 2}, 
             {Col: 'c', Val: 3}
           ];

var arr2 = [
             {Col: 'x', Val: 24}, 
             {Col: 'y', Val: 25}, 
             {Col: 'z', Val: 26}
           ];

if(JSON.stringify(arr1) == JSON.stringify(arr2)){
    alert('Collections are equal');
}else{
    alert('Collections are not equal');
}

NB: Veuillez noter que sa méthode suppose que les deux Collections sont triées de la même manière, sinon, cela vous donnerait un faux résultat!

Convertir les deux tableaux en chaîne et comparer

if (JSON.stringify(array1) == JSON.stringify(array2))
{
    // your code here
}

J'ai trouvé cette discussion parce que j'avais besoin d'un moyen de comparer en profondeur les tableaux et les objets. En utilisant les exemples ici, j'ai trouvé ce qui suit (divisé en 3 méthodes pour plus de clarté):

jQuery.extend({
    compare : function (a,b) {
        var obj_str = '[object Object]',
            arr_str = '[object Array]',
            a_type  = Object.prototype.toString.apply(a),
            b_type  = Object.prototype.toString.apply(b);

            if ( a_type !== b_type) { return false; }
            else if (a_type === obj_str) {
                return $.compareObject(a,b);
            }
            else if (a_type === arr_str) {
                return $.compareArray(a,b);
            }
            return (a === b);
        }
});

jQuery.extend({
    compareArray: function (arrayA, arrayB) {
        var a,b,i,a_type,b_type;
        // References to each other?
        if (arrayA === arrayB) { return true;}

        if (arrayA.length != arrayB.length) { return false; }
        // sort modifies original array
        // (which are passed by reference to our method!)
        // so clone the arrays before sorting
        a = jQuery.extend(true, [], arrayA);
        b = jQuery.extend(true, [], arrayB);
        a.sort(); 
        b.sort();
        for (i = 0, l = a.length; i < l; i+=1) {
            a_type = Object.prototype.toString.apply(a[i]);
            b_type = Object.prototype.toString.apply(b[i]);

            if (a_type !== b_type) {
                return false;
            }

            if ($.compare(a[i],b[i]) === false) {
                return false;
            }
        }
        return true;
    }
});

jQuery.extend({
    compareObject : function(objA,objB) {

        var i,a_type,b_type;

        // Compare if they are references to each other 
        if (objA === objB) { return true;}

        if (Object.keys(objA).length !== Object.keys(objB).length) { return false;}
        for (i in objA) {
            if (objA.hasOwnProperty(i)) {
                if (typeof objB[i] === 'undefined') {
                    return false;
                }
                else {
                    a_type = Object.prototype.toString.apply(objA[i]);
                    b_type = Object.prototype.toString.apply(objB[i]);

                    if (a_type !== b_type) {
                        return false; 
                    }
                }
            }
            if ($.compare(objA[i],objB[i]) === false){
                return false;
            }
        }
        return true;
    }
});

Essai

var a={a : {a : 1, b: 2}},
    b={a : {a : 1, b: 2}},
    c={a : {a : 1, b: 3}},
    d=[1,2,3],
    e=[2,1,3];

console.debug('a and b = ' + $.compare(a,b)); // a and b = true
console.debug('b and b = ' + $.compare(b,b)); // b and b = true
console.debug('b and c = ' + $.compare(b,c)); // b and c = false
console.debug('c and d = ' + $.compare(c,d)); // c and d = false
console.debug('d and e = ' + $.compare(d,e)); // d and e = true

Dans mon cas, les tableaux comparés ne contiennent que des nombres et des chaînes . Cette solution a fonctionné pour moi:

function are_arrs_equal(arr1, arr2){
    return arr1.sort().toString() === arr2.sort().toString()
}

Testons-le!

arr1 = [1, 2, 3, 'nik']
arr2 = ['nik', 3, 1, 2]
arr3 = [1, 2, 5]

console.log (are_arrs_equal(arr1, arr2)) //true
console.log (are_arrs_equal(arr1, arr3)) //false

Je ne pense pas qu'il y ait un bon moyen "jQuery" de faire cela, mais si vous avez besoin d'efficacité, mappez l'un des tableaux par une certaine clé (l'un des champs d'objet uniques), puis faites une comparaison en passant par l'autre tableau et en comparant avec la carte, ou le tableau associatif, que vous venez de construire.

Si l'efficacité n'est pas un problème, comparez simplement chaque objet de A à chaque objet de B. Tant que | A | et | B | sont petits, ça devrait aller.

Eh bien, si vous souhaitez comparer uniquement le contenu des tableaux, il existe une fonction jQuery utile $ .inArray ()

var arr = [11, "String #1", 14, "String #2"];
var arr_true = ["String #1", 14, "String #2", 11]; // contents are the same as arr
var arr_false = ["String #1", 14, "String #2", 16]; // contents differ

function test(arr_1, arr_2) {
    var equal = arr_1.length == arr_2.length; // if array sizes mismatches, then we assume, that they are not equal
    if (equal) {
        $.each(arr_1, function (foo, val) {
            if (!equal) return false;
            if ($.inArray(val, arr_2) == -1) {
                equal = false;
            } else {
                equal = true;
            }
        });
    }
    return equal;
}

alert('Array contents are the same? ' + test(arr, arr_true)); //- returns true
alert('Array contents are the same? ' + test(arr, arr_false)); //- returns false

Changer le tableau en chaîne et comparer

var arr = [1,2,3], 
arr2 = [1,2,3]; 
console.log(arr.toString() === arr2.toString());

Le joli one liner de Sudhakar R comme méthode globale jQuery.

/**
 * Compare two arrays if they are equal even if they have different order.
 *
 * @link https://stackoverflow.com/a/7726509
 */
jQuery.extend({
  /**
   * @param {array} a
   *   First array to compare.
   * @param {array} b
   *   Second array to compare.
   * @return {boolean}
   *   True if both arrays are equal, otherwise false.
   */
  arrayCompare: function (a, b) {
    return $(a).not(b).get().length === 0 && $(b).not(a).get().length === 0;
  }
});

J'ai également trouvé cela en cherchant à faire des comparaisons de tableaux avec jQuery. Dans mon cas, j'avais des chaînes que je savais être des tableaux:

var needle = 'apple orange';
var haystack = 'kiwi orange banana apple plum';

Mais je me souciais si c'était une correspondance complète ou seulement une correspondance partielle, alors j'ai utilisé quelque chose comme ce qui suit, basé sur la réponse de Sudhakar R:

function compareStrings( needle, haystack ){
  var needleArr = needle.split(" "),
    haystackArr = haystack.split(" "),
    compare = $(haystackArr).not(needleArr).get().length;

  if( compare == 0 ){
    return 'all';
  } else if ( compare == haystackArr.length  ) {
    return 'none';
  } else {
    return 'partial';
  }
}

Si les doublons ont une importance telle qu'ils [1, 1, 2]ne devraient pas être égaux [2, 1]mais devraient être égaux [1, 2, 1], voici une solution de comptage de référence:

  const arrayContentsEqual = (arrayA, arrayB) => {
    if (arrayA.length !== arrayB.length) {
      return false}

    const refCount = (function() {
      const refCountMap = {};
      const refCountFn = (elt, count) => {
          refCountMap[elt] = (refCountMap[elt] || 0) + count}
      refCountFn.isZero = () => {
        for (let elt in refCountMap) {
          if (refCountMap[elt] !== 0) {
            return false}}
        return true}
      return refCountFn})()

    arrayB.map(eltB => refCount(eltB, 1));
    arrayA.map(eltA => refCount(eltA, -1));
    return refCount.isZero()}

Voici le violon avec lequel jouer .

Essaye ça

function check(c,d){
  var a = c, b = d,flg = 0;
  if(a.length == b.length) 
  { 
     for(var i=0;i<a.length;i++) 
           a[i] != b[i] ? flg++ : 0; 
  } 
  else  
  { 
     flg = 1; 
  } 
  return flg = 0;
}