Utilisation de jQuery pour comparer deux tableaux d'objets Javascript

Il est un moyen facile...

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

Si le ci-dessus renvoie la valeur 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 de jquery < 3.0.0 lors de l'utilisation d'objets JSON

Mon approche était tout à fait différents, je les aplatis, les deux collections en utilisant JSON.stringify et utilisé une normale de comparaison de chaîne pour vérifier l'égalité.

I. e.

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és de manière similaire, si non, il serait de vous donner un résultat faux!

J'ai trouvé cette discussion parce que j'ai besoin d'un moyen de profondeur de comparer les tableaux et les objets. En utilisant les exemples ici, je suis venu avec la suivante (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;
}
});

Tests

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

Je ne pense pas qu'il y a un bon "jQuery" à la façon de le faire, mais si vous avez besoin de l'efficacité, de la carte de l'un des tableaux à l'aide d'une clef (un des champs d'objet), et ensuite faire la comparaison en boucle dans l'autre tableau et comparer par rapport à la carte ou tableau associatif, vous avez juste construit.

Si l'efficacité n'est pas un problème, il suffit de comparer tous les objets dans Une pour chaque objet dans B. Tant que |A| et |B| sont de petite taille, vous devriez être bien.

Changement de tableau à la chaîne et comparer

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

J'ai également trouvé ce que quand on cherche à faire quelques matrice de comparaisons avec jQuery. Dans mon cas, j'ai eu chaînes qui je savais être des tableaux:

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

Mais ce qui m'importait si c'était un jeu complet ou seulement une partie du match, alors j'ai utilisé quelque chose comme ce qui suit, basé sur Sudhakar R réponse:

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

JS:

var arr1 = [
{name: 'a', Val: 1}, 
{name: 'b', Val: 2}, 
{name: 'c', Val: 3}
];
var arr2 = [
{name: 'c', Val: 3},
{name: 'x', Val: 4}, 
{name: 'y', Val: 5}, 
{name: 'z', Val: 6}
];
var _isEqual = _.intersectionWith(arr1, arr2, _.isEqual);//common in both array
var _difference1 = _.differenceWith(arr1, arr2, _.isEqual);//difference from array1 
var _difference2 = _.differenceWith(arr2, arr1, _.isEqual);//difference from array2 
console.log(_isEqual);//common in both array
console.log(_difference1);//difference from array1 
console.log(_difference2);//difference from array2 

HTML:

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