从打字稿/javascript角度中的两个对象获取差异对象

Question

我正在尝试使用角度打字稿从两个对象中获取更改对象。

例如

this.productPreviousCommand = {
"id": "60f910d7d03dbd2ca3b3dfd5",
"active": true,
"title": "ss",
"description": "<p>ss</p>",
"category": {
    "id": "60cec05df64bde4ab9cf7460"
},
"subCategory": {
    "id": "60cec18c56d3d958c4791117"
},
"vendor": {
    "id": "60ced45b56d3d958c479111c"
},
"type": "load_product_success"

}

model = {
"active": true,
"title": "ss",
"description": "<p>ss sss</p>",
"category": "60cec05df64bde4ab9cf7460",
"subCategory": "60cec18c56d3d958c4791117",
"vendor": "60ced45b56d3d958c479111c",
"tags": []

}

现在两个物体之间的差异是

description: "<p>hello hello 1</p>"

。所以我想回来

{description: "<p>hello hello 1</p>"}

我使用了lodash https://github.com/lodash/lodash

import { transform, isEqual, isObject, isArray} from 'lodash';

function difference(origObj, newObj) {
  function changes(newObj, origObj) {
    let arrayIndexCounter = 0
    return transform(newObj, function (result, value, key) {
      if (!isEqual(value, origObj[key])) {
        let resultKey = isArray(origObj) ? arrayIndexCounter++ : key
        result[resultKey] = (isObject(value) && isObject(origObj[key])) ? changes(value, origObj[key]) : value
      }
    })
  }
  return changes(newObj, origObj)
}

这个库不适合我，它使用此代码 const 返回整个对象

differenc = difference(this.productPreviousCommand, model);

上面代码的输出是

{
    active: true
    description: "<p>hello hello 1</p>"
    id: "60f8f29dd03dbd2ca3b3dfd1"
    title: "hello"
    }

Answer 1

试试这个功能

differenceInObj(firstObj: any, secondObj: any): any {
        let differenceObj: any = {};
        for (const key in firstObj) {
            if (Object.prototype.hasOwnProperty.call(firstObj, key)) {
                if(firstObj[key] !== secondObj[key]) {
                    differenceObj[key] = firstObj[key];
                }
                
            }
        }

        return differenceObj;
    }

Answer 2

您可以检查第一个对象的每个键的循环并将其与第二个对象进行比较。

function getPropertyDifferences(obj1, obj2) {
  return Object.entries(obj1).reduce((diff, [key, value]) => {
    // Check if the property exists in obj2.
    if (obj2.hasOwnProperty(key)) {
      const val = obj2[key];

      // Check if obj1's property's value is different from obj2's.
      if (val !== value) {
        return {
          ...diff,
          [key]: val,
        };
      }
    }

    // Otherwise, just return the previous diff object.
    return diff;
  }, {});
}

const a = {
  active: true,
  description: '<p>hello</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};
const b = {
  active: true,
  description: '<p>hello hello 1</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};
const c = {
  active: true,
  description: '<p>hello hello 2</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'world',
};

console.log(getPropertyDifferences(a, b));
console.log(getPropertyDifferences(b, c));

Answer 3

function difference(origObj, newObj) {
  const origObjKeyList = Object.keys(origObj),
    newObjKeyList = Object.keys(newObj);

  // if objects length is not same
  if (origObjKeyList?.length !== newObjKeyList?.length) {
    return;
  }

  // if object keys some difference in keys
  if (Object.keys(origObj).filter((val) => !Object.keys(newObj).includes(val))?.length) {
    return;
  }

  return Object.entries(origObj).reduce(
    (acc, [key, value]) => (newObj[key] !== value ? { ...acc, ...{ [key]: newObj[key] } } : acc),
    []
  );
}


const a = {
  active: true,
  description: '<p>hello</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};

const b = {
  active: true,
  description: '<p>hello hello 1</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};


console.log(difference(a, b));

你可以试试这个代码。

function difference(origObj, newObj) {
  const origObjKeyList = Object.keys(origObj),
    newObjKeyList = Object.keys(newObj);

  // if objects length is not same
  if (origObjKeyList?.length !== newObjKeyList?.length) {
    return;
  }

  // if object keys is not same
  if (Object.keys(origObj).filter((val) => !Object.keys(newObj).includes(val))?.length) {
    return;
  }

  return Object.entries(origObj).reduce(
    (acc, [key, value]) => (newObj[key] !== value ? { ...acc, ...{ [key]: newObj[key] } } : acc),
    []
  );
}

Answer 4

您可以创建一个 TypeScript 函数来比较两个对象并返回它们的差异（包括嵌套对象），方法是递归遍历对象并比较它们的属性。这是一个示例实现：

function getObjectDifferences(obj1: any, obj2: any): any {
  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {
    return obj1 !== obj2 ? [obj1, obj2] : undefined;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  const uniqueKeys = new Set([...keys1, ...keys2]);

  const differences: any = {};

  for (const key of uniqueKeys) {
    const value1 = obj1[key];
    const value2 = obj2[key];

    if (typeof value1 === 'object' && typeof value2 === 'object') {
      const nestedDifferences = getObjectDifferences(value1, value2);
      if (nestedDifferences) {
        differences[key] = nestedDifferences;
      }
    } else if (value1 !== value2) {
      differences[key] = [value1, value2];
    }
  }

  return Object.keys(differences).length === 0 ? undefined : differences;
}

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001',
  },
};

const obj2 = {
  name: 'Jane',
  age: 28,
  address: {
    city: 'San Francisco',
    zip: '94101',
  },
};

const differences = getObjectDifferences(obj1, obj2);
console.log(differences);

输出

{
  "name": [
    "John",
    "Jane"
  ],
  "age": [
    30,
    28
  ],
  "address": {
    "city": [
      "New York",
      "San Francisco"
    ],
    "zip": [
      "10001",
      "94101"
    ]
  }
} 

这个函数

getObjectDifferences

接受两个对象，递归地比较它们的属性，并返回一个表示它们之间差异的对象。如果没有差异，则返回

undefined

。提供的示例比较两个对象

obj1

和

obj2

，包括其中的嵌套对象。

请记住，此实现是一个基本示例，您可以进一步完善它以满足您的特定需求并处理各种数据类型和边缘情况。