如何使用Lodash比較和發現兩個復雜對象的差異？

Question

我現在正在嘗試學習Lodash，因為我認為這對我當前的項目可能會有很大幫助。 但是，我有一個我無法解決的問題，而且，由於我是Lodash的新秀，因此我認為我會發布一些內容，看看是否可以得到一些指導。

我有兩個復雜的對象（請參見下面的結構）–使用angular.copy（original，copy）制成（我的應用程序顯然是Angular應用程序）。

復制后，兩者

original and copy =
{
    name: 'name',
    date: 'date',
    rows: [  // array of objects
        {
            // this is row 1
            columns: [  // array of objects
                {
                    // this is column 1
                    widgets: [  // array of objects
                        {
                            // this is 1 widget in this column
                            createdDate: 'createdDate1',
                            widgetName: 'widgetName1',
                            widgetParameters: [  // array of objects
                                { parameterName: 'parameterName1', parameterValue: 'parameterValue1' },
                                { parameterName: 'parameterName2', parameterValue: 'parameterValue2' },
                                { parameterName: 'parameterName3', parameterValue: 'parameterValue3' }
                            ]
                        }
                    ]
                },
                {
                    // this is column 2
                    widgets: [
                        {
                            // this is 1 widget in this column
                            createdDate: 'createdDate2',
                            widgetName: 'widgetName2',
                            widgetParameters: [  // array of objects
                                { parameterName: 'parameterName1a', parameterValue: 'parameterValue1a' },
                                { parameterName: 'parameterName2a', parameterValue: 'parameterValue2a' }
                            ]
                        },
                        {
                            // this is 2 widget in this column
                            // ...
                        }
                    ]
                },
                {
                    // this is column 3
                    widgets: [
                        {
                            // this is 1 widget in this column
                            createdDate: 'createdDate3',
                            widgetName: 'widgetName3',
                            widgetParameters: [  // array of objects
                                { parameterName: 'parameterName1b', parameterValue: 'parameterValue1a' }
                            ]
                        },
                        {
                            // this is 2 widget in this column
                            // ...
                        },
                        {
                            // this is 3 widget in this column
                            // ...
                        }
                    ]
                }
            ]  // end columns array
        },
        {
            // this is row 2
            // ... same structure as above with columns, widgets, widgetParameters
        }
    ]  // end rows array
}

經過一些進一步的處理和屬性值的更改后，我現在需要將復制對象中的某些屬性（不是全部）重新同步回原始對象。 具體來說，我需要遍歷整個副本對象，找到所有“小部件”，從小部件中獲取“ widgetName”值和完整的“ widgetParameters”集合，然后遍歷整個原始對象，找到與之完全匹配的“ widget” ，並使用復制對象中的值更新匹配的小部件的“ widgetName”和“ widgetParameters”。

我已經使用蠻力方法進行了很多努力（請參閱下文），但是我認為Lodash中可能有一種更優雅，更有效的方法來完成我想做的事情。

// brute force it
angular.forEach(copy.rows, function (row) {
    angular.forEach(row.columns, function (column) {
        angular.forEach(column.widgets, function (widget) {
            var widgetName = widget.widgetName;
            var createdDate = widget.createdDate;
            var widgetParameters = widget.widgetParameters;

            angular.forEach(original.rows, function (row1) {
                angular.forEach(row1.columns, function (column1) {
                    angular.forEach(column1.widgets, function (widget1) {

                        if ((widgetName === widget1.widgetName) && (createdDate === widget1.createdDate))
                        {
                            widget1.widgetName = widgetName;
                            angular.copy(widgetParameters, widget1.widgetParameters);
                        }

                    });
                });
            });

        });
    });
});

有任何想法，幫助，想法等嗎？

謝謝！

Answer 1

基於JavaScript的Deep-diff實用程序取得了巨大的成功。 例如：

// this would be a node.js way to require it, or you could use the DeepDiff object in the browser's global window object
var diff = require('deep-diff').diff;
var differences = diff(original, copy);

如果您想在瀏覽器級別應用一些更改，則可以遍歷更改（差異）並對接收到的每個差異執行以下操作：

DeepDiff.applyChange(original, {}, difference);

我不知道在Lodash中沒有重新構建deep-diff庫功能的優雅而簡單的方法。

Answer 2

您可以做的是構建一個較小的對象，該對象僅包含要保留的內容，我們將其diffObject ，因此您只需要執行以下操作：

// Puts the diff back into the original object
_.merge( originalObject, diffObject );

現在，要構造這樣的diff對象，您可能仍然需要遍歷所有對象，或者具有一些巧妙的遞歸構建函數來跟蹤其經過的路徑以及所有路徑。