Angular进行深度比较，并返回每一项的差值

Angular equals with deep comparison and return difference on each item

本文关键字：一项 深度 比较 返回 Angular      更新时间：2023-09-26

我想使用angular.equals比较两个数组，并获得彼此不同的项列表。

例如:

var obj1 = [
    { id: 1, name: 'john', age: 30, height: 6 },
    { id: 2, name: 'ben' , age: 20, height: 5 }
];
var obj2 = [
    { id: 1, name: 'martin', age: 25, height: 6 },
    { id: 2, name: 'ben'   , age: 20, height: 5 }
];

现在执行angular.equals(obj1, obj2)将返回false。

这里我想比较不同数组中的每个项目，并在UI中显示时警告差异或显示不同的颜色。

假设obj1来自HTML表单，obj2来自服务。

结果预期:

。id[1]姓名改为john，年龄改为25岁
或
。当我比较中的每个条目时，得到false或true

Angular没有这样的内置函数。您应该使用库deep-diff。

var first = [
    { id: 1, name: 'john', age: 30, height: 6 },
    { id: 2, name: 'ben' , age: 20, height: 5 }
];
var second = [
    { id: 1, name: 'martin', age: 25, height: 6 },
    { id: 2, name: 'ben'   , age: 20, height: 5 }
];
var result = diff(first, second);
// result => [
//    { kind: 'E', path: [0, 'name'], lhs: 'john', rhs: 'martin' },
//    { kind: 'E', path: [0, 'age' ], lhs: 30    , rhs: 25       }
// ]

正如klode在这里所说的，有一个选项可以只使用angular 来深度比较，而不需要额外的依赖项:

angular.equals(obj1, obj2)
相关文章：