對象數組與 lodash 的深度比較

Question

我有 2 個對象數組，可以與lodash深入比較

但是，我有一個問題：

> var x = [{a:1, b:2}, {c:3, d:4}];
> var y = [{b:2, a:1}, {d:4, c:3}];
> _.difference(x,y, _.isEqual);
[ { a: 1, b: 2 }, { c: 3, d: 4 } ]

我應該如何比較才能看到兩者相等？

Answer 1

您可以將differenceWith（）與isEqual（）比較器一起使用，並調用isEmpty來檢查它們是否相等。

 var isArrayEqual = function(x, y) { return _(x).differenceWith(y, _.isEqual).isEmpty(); }; var result1 = isArrayEqual( [{a:1, b:2}, {c:3, d:4}], [{b:2, a:1}, {d:4, c:3}] ); var result2 = isArrayEqual( [{a:1, b:2, c: 1}, {c:3, d:4}], [{b:2, a:1}, {d:4, c:3}] ); document.write([ '<div><label>result1: ', result1, '</label></div>', '<div><label>result2: ', result2, '</label></div>', ].join('')); 

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

更新2018年6月22日

此更新是對以下評論的回應：

@ryeballar如果任何數組未定義則返回true。 你怎么解決這個問題 在此提前感謝好友

如differenceWith文件中所述：

結果值的順序和引用由第一個數組確定。

這意味着只要第一個數組中的所有項都與第二個數組中的其他所有項匹配，那么來自differenceWith調用的結果數組將為空。

真正解決問題的另一種解決方案是使用xorWith()與上述解決方案中的相同功能鏈。

 var isArrayEqual = function(x, y) { return _(x).xorWith(y, _.isEqual).isEmpty(); }; var result1 = isArrayEqual( [{a:1, b:2}, {c:3, d:4}], [{b:2, a:1}, {d:4, c:3}] ); var result2 = isArrayEqual( [{a:1, b:2, c: 1}, {c:3, d:4}], [{b:2, a:1}, {d:4, c:3}] ); var result3 = isArrayEqual( [{a:1, b:2, c: 1}, {c:3, d:4}], [{b:2, a:1}, {d:4, c:3}, undefined] ); console.log('result1:', result1); console.log('result2:', result2); console.log('result3:', result3); 

 .as-console-wrapper{min-height:100%;top:0} 

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

Answer 2

我更喜歡純JS，因為我沒有耐心學習下划線或lodash。 所以我發明了我一直夢寐以求的東西。 Object.prototype.compare() 。 v0.0.2雖然只進行淺層比較，但足以滿足這個問題。

 Object.prototype.compare = function(o){ var ok = Object.keys(this); return typeof o === "object" && ok.length === Object.keys(o).length ? ok.every(k => this[k] === o[k]) : false; }; var obj1 = {a:1,b:2,c:3}, obj2 = {c:3,a:1,b:2}, obj3 = {b:2,c:3,a:7}; document.write ("<pre>" + obj1.compare(obj2) + "</pre>\\n"); document.write ("<pre>" + obj2.compare(obj3) + "</pre>\\n"); document.write ("<pre>" + new Object({a:1, b:2, c:3}).compare({c:3,b:2,a:1,d:0}) + "</pre>\\n"); 

很酷......所以接下來讓我們繼續問題...我猜...因為我們已經有了一個Object.prototype.compare()所以在Array.prototype.compare()的發明中應該沒有任何損害。 讓我們這次更聰明。 它應該告訴對象的原語。 另一件事是，數組是有序的; 所以在我的書中[1,2]不等於[2,1] 。 這也使工作更簡單。

 Object.prototype.compare = function(o){ var ok = Object.keys(this); return typeof o === "object" && ok.length === Object.keys(o).length ? ok.every(k => this[k] === o[k]) : false; }; Array.prototype.compare = function(a){ return this.every((e,i) => typeof a[i] === "object" ? a[i].compare(e) : a[i] === e); } var x = [{a:1, b:2}, {c:3, d:4}], y = [{b:2, a:1}, {d:4, c:3}], a = [1,2,3,4,5], b = [1,2,3,4,5], p = "fourtytwo", r = "thirtyseven", n = 42, m = 37; document.writeln(x.compare(y)); // the question is answered here document.writeln(a.compare(b)); document.writeln(p.compare(r)); // these primitives end up at Object prototype document.writeln(n.compare(m)); // so modify Object.prototype.compare () accordingly 

Answer 3

在@ryeballar回答之后，如果您只想導入特定的lodash方法，可以使用以下表示法：

import { isEmpty, isEqual, xorWith } from 'lodash';


export const isArrayEqual = (x, y) => isEmpty(xorWith(x, y, isEqual));

Answer 4

僅當在第二個數組中找到當前項時，如果數組具有不同的長度，則上面使用xorWith和differenceWith兩個答案都不計算在內。

 var isArrayEqual = function(x, y) { return _(x).xorWith(y, _.isEqual).isEmpty(); }; var result = isArrayEqual( [{a:1, b:2}], [{a:1, b:2}, {a:1, b:2}] ); console.log('result should be false:', result);

 .as-console-wrapper{min-height:100%;top:0}

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

在這種特殊情況下，我們還必須比較兩個數組的長度。

 const isArrayEqual = function(x, y) { const isSameSize = _.size(x) === _.size(y); return isSameSize && _(x).xorWith(y, _.isEqual).isEmpty(); }; const result = isArrayEqual( [{a:1, b:2}], [{a:1, b:2}, {a:1, b:2}] ); console.log('result should be false:', result);

 .as-console-wrapper{min-height:100%;top:0}

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