Использование jQuery для сравнения двух массивов объектов Javascript
У меня есть два массива объектов JavaScript, которые я хотел бы сравнить, чтобы увидеть, если они одинаковы. Объекты не могут (и, скорее всего, не будет) в том же порядке в каждом массиве. Каждый массив не должен иметь более 10 объектов. Я думал, что у jQuery может быть элегантное решение этой проблемы, но я не смог найти много онлайн.
Я знаю, что скотина вложена $.each(array, function(){})
решение может работать, но есть ли встроенная функция, которую я не знаю чего?
спасибо.
14 ответов:
есть простой способ...
$(arr1).not(arr2).length === 0 && $(arr2).not(arr1).length === 0
Если вышеизложенное возвращает true, оба массива одинаковы, даже если элементы находятся в другом порядке.
Примечание: это работает только для версий jquery
Я тоже искал и нашел: http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256BFB0077DFFD
не знаю, если это хорошее решение, хотя они упоминают некоторые соображения производительности, принятые во внимание.
мне нравится идея вспомогательного метода jQuery. @David я бы предпочел, чтобы ваш метод сравнения работал так:
jQuery.compare(a, b)
мне не имеет смысла делать:
$(a).compare(b)
где a и b есть массивы. Обычно, когда вы $(что-то) вы будете передавать строку селектора для работы с элементами DOM.
также относительно сортировки и "кэширования" отсортированных массивов:
- я не думаю, что сортировка один раз в начале метода, а не каждый раз через цикл является "кэширование". Сортировка будет происходить каждый раз, когда вы вызываете compare(b). Это просто семантика, но.....
- for (var i = 0; t[i]; i++) { ...эта петля заканчивается рано, если ваш t массив содержит ложное значение в нем где-то, так что $([1, 2, 3, 4]).сравните([1, false, 2, 3]) возвращает правда!
- что еще более важно, метод array sort () сортирует массив на месте, так что var b = t. sort () ...не создает отсортированную копию исходного массива, он сортирует оригинал массив, а также назначает ссылка в b. Я не думаю, что метод сравнения должен иметь побочные эффекты.
кажется, что нам нужно сделать, это скопировать массивы, прежде чем работать над ними. Лучший ответ, который я мог найти для того, как это сделать в jQuery, был не кем иным, как John Resig here on SO! каков наиболее эффективный способ глубокого клонирования объекта в JavaScript?(см. комментарии к его ответу для версии массива рецепта клонирования объекта)
In я думаю, что код для нее будет такой:
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]
мой подход был совершенно другим-я сгладил обе коллекции с помощью JSON.stringify и использовал обычную строку compare для проверки равенства.
т. е.
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: обратите внимание, что его метод предполагает, что обе коллекции сортируются аналогичным образом, если нет, это даст вам ложный результат!
преобразовать оба массива в строку и сравнить
if (JSON.stringify(array1) == JSON.stringify(array2)) { // your code here }
Я нашел это обсуждение, потому что мне нужен был способ глубокого сравнения массивов и объектов. Используя примеры здесь, я придумал следующее (разбитый на 3 метода для ясности):
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; } });
тестирование
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
в моем случае сравниваемые массивы содержат только цифры и строки. Это решение работало для меня:
function are_arrs_equal(arr1, arr2){ return arr1.sort().toString() === arr2.sort().toString() }
давайте проверим это!
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
Я не думаю, что есть хороший способ "jQuery" для этого, но если вам нужна эффективность, сопоставьте один из массивов определенным ключом (одним из уникальных полей объекта), а затем выполните сравнение, пройдя через другой массив и сравнивая с картой или ассоциативным массивом, который вы только что построили.
Если эффективность не является проблемой, просто сравните каждый объект в A с каждым объектом в B. Пока |A| и |B| малы, вы должны быть в порядке.
Ну, если вы хотите сравнить только содержимое массивов, есть полезная функция jQuery $.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
изменить массив на строку и сравнить
var arr = [1,2,3], arr2 = [1,2,3]; console.log(arr.toString() === arr2.toString());
хороший один лайнер от Судхакар Р как глобальный метод 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; } });
Я также нашел это, когда искал, чтобы сделать некоторые сравнения массива с jQuery. В моем случае у меня были строки, которые я знал, чтобы быть массивы:
var needle = 'apple orange'; var haystack = 'kiwi orange banana apple plum';
но меня волновало, было ли это полное совпадение или только частичное совпадение, поэтому я использовал что-то вроде следующего, основываясь на ответе Судхакара 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'; } }
если дубликаты имеют такое значение, что
[1, 1, 2]
не должно быть равным[2, 1]
но должен быть равен[1, 2, 1]
, вот решение для подсчета ссылок: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()}
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>