我有两个对象:oldObj和newObj。
oldObj中的数据用于填充表单，而newObj是用户更改该表单中的数据并提交的结果。
这两个物体都很深。它们具有对象或对象数组等属性-它们可以有n层深，因此diff算法需要递归。
现在我不仅需要弄清楚从oldObj到newObj更改了什么(如添加/更新/删除)，而且还需要知道如何最好地表示它。
到目前为止，我的想法只是构建一个通用的deepdiffbetweenobjects方法，该方法将返回窗体上的对象{add:{…}，upd:{…}，del:{…但我转念一想:以前一定有人需要它。
所以…有没有人知道一个库或一段代码可以做到这一点，并且可能有更好的方式来表示差异(以一种仍然是JSON可序列化的方式)?
更新:
我想到了一个更好的方法来表示更新的数据，通过使用与newObj相同的对象结构，但将所有属性值转换为窗体上的对象:
{type: '<update|create|delete>', data: <propertyValue>}
如果newObj。prop1 = 'new value'和oldObj。prop1 = 'old value'它将设置returnbj。Prop1 = {type: 'update'， data: 'new value'}
更新2:
当我们处理数组的属性时，它会变得非常麻烦，因为数组[1,2,3]应该被计算为等于[2,3,1]，这对于基于值的类型的数组(如string, int和bool)来说足够简单，但是当涉及到引用类型的数组(如对象和数组)时就很难处理了。
数组的示例应该是相等的:
[1,[{c: 1},2,3],{a:'hey'}] and [{a:'hey'},1,[3,{c: 1},2]]
不仅要检查这种类型的深度值相等相当复杂，而且要找出一种表示可能发生的变化的好方法。
使用下划线，一个简单的差异:
var o1 = {a: 1, b: 2, c: 2},
o2 = {a: 2, b: 1, c: 2};
_.omit(o1, function(v,k) { return o2[k] === v; })
o1中对应但o2值不同的部分的结果:
{a: 1, b: 2}
如果是深差的话就不一样了
function diff(a,b) {
var r = {};
_.each(a, function(v,k) {
if(b[k] === v) return;
// but what if it returns an empty object? still attach?
r[k] = _.isObject(v)
? _.diff(v, b[k])
: v
;
});
return r;
}
正如@Juhana在评论中指出的那样，上面只是一个diff a- >b，并且不可逆(这意味着b中的额外属性将被忽略)。用a——>b——>a代替:
(function(_) {
function deepDiff(a, b, r) {
_.each(a, function(v, k) {
// already checked this or equal...
if (r.hasOwnProperty(k) || b[k] === v) return;
// but what if it returns an empty object? still attach?
r[k] = _.isObject(v) ? _.diff(v, b[k]) : v;
});
}
/* the function */
_.mixin({
diff: function(a, b) {
var r = {};
deepDiff(a, b, r);
deepDiff(b, a, r);
return r;
}
});
})(_.noConflict());
完整的示例+tests+mixins请参见http://jsfiddle.net/drzaus/9g5qoxwj/
我知道我迟到了，但我需要类似的东西，上面的答案没有帮助。
我使用了Angular的$watch函数来检测变量的变化。我不仅需要知道变量上的属性是否发生了变化，而且还需要确保发生变化的属性不是一个临时的计算字段。换句话说，我想忽略某些属性。
代码如下:
function diff(obj1,obj2,exclude) {
var r = {};
if (!exclude) exclude = [];
for (var prop in obj1) {
if (obj1.hasOwnProperty(prop) && prop != '__proto__') {
if (exclude.indexOf(obj1[prop]) == -1) {
// check if obj2 has prop
if (!obj2.hasOwnProperty(prop)) r[prop] = obj1[prop];
// check if prop is object and
// NOT a JavaScript engine object (i.e. __proto__), if so, recursive diff
else if (obj1[prop] === Object(obj1[prop])) {
var difference = diff(obj1[prop], obj2[prop]);
if (Object.keys(difference).length > 0) r[prop] = difference;
}
// check if obj1 and obj2 are equal
else if (obj1[prop] !== obj2[prop]) {
if (obj1[prop] === undefined)
r[prop] = 'undefined';
if (obj1[prop] === null)
r[prop] = null;
else if (typeof obj1[prop] === 'function')
r[prop] = 'function';
else if (typeof obj1[prop] === 'object')
r[prop] = 'object';
else
r[prop] = obj1[prop];
}
}
}
}
return r;
}
https://jsfiddle.net/rv01x6jo/
下面是如何使用它:
// To only return the difference
var difference = diff(newValue, oldValue);
// To exclude certain properties
var difference = diff(newValue, oldValue, [newValue.prop1, newValue.prop2, newValue.prop3]);
希望这能帮助到一些人。
下面的方法将创建一个只更改字段的新对象
const findDiff = (obj1, obj2) => {
const isNativeType1 = typeof obj1 !== "object";
const isNativeType2 = typeof obj2 !== "object";
if (isNativeType1 && isNativeType2) {
return obj1 === obj2 ? null : obj2;
}
if (isNativeType1 && !isNativeType2) {
return obj2;
}
if (!isNativeType1 && isNativeType2) {
return obj2;
}
const isArray1 = Array.isArray(obj1);
const isArray2 = Array.isArray(obj2);
if (isArray1 && isArray2) {
const firstLenght = obj1.length;
const secondLenght = obj2.length;
const hasSameLength = firstLenght === secondLenght;
if (!hasSameLength) return obj2;
let hasChange = false;
for (let index = 0; index < obj1.length; index += 1) {
const element1 = obj1[index];
const element2 = obj2[index];
const changed = findDiff(element1, element2);
if (changed) {
hasChange = true;
}
}
return hasChange ? obj2 : null;
}
if (isArray1 || isArray2) return obj2;
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
const hasSameKeys = keys1.length === keys2.length;
if (!hasSameKeys) {
const retObj = { ...obj2 };
for (let index = 0; index < keys1.length; index += 1) {
const key = keys1[index];
if (!keys2.includes(key)) {
retObj[key] = null;
// eslint-disable-next-line no-continue
continue;
}
delete retObj[key];
}
return retObj;
}
let hasChange = false;
const retObj = {};
for (let index = 0; index < keys1.length; index += 1) {
const key = keys1[index];
const element1 = obj1[key];
const element2 = obj2[key];
const changed = findDiff(element1, element2);
if (changed) {
hasChange = true;
}
if (changed) {
retObj[key] = changed;
}
}
return hasChange ? retObj : null;
};
console.log(
JSON.stringify(findDiff(
{
a: 1,
b: 2,
c: {
a: ['1', 'b', { a: 'b', c: false }, true],
},
},
{
a: 1,
b: 2,
c: {
a: ['1','b', { a: 'b', c: true }, true],
},
}
), null, 2)
);
我只是使用ramda，为了解决同样的问题，我需要知道在新对象中有什么改变。这是我的设计。
const oldState = {id:'170',name:'Ivab',secondName:'Ivanov',weight:45};
const newState = {id:'170',name:'Ivanko',secondName:'Ivanov',age:29};
const keysObj1 = R.keys(newState)
const filterFunc = key => {
const value = R.eqProps(key,oldState,newState)
return {[key]:value}
}
const result = R.map(filterFunc, keysObj1)
结果是属性的名称和状态。
[{"id":true}, {"name":false}, {"secondName":true}, {"age":false}]
