循环遍历 2 个对象以查看更改 - javascript答案

【问题标题】：Loop trough 2 objects to see changes - javascript循环遍历 2 个对象以查看更改 - javascript
【发布时间】：2020-11-09 16:29:13
【问题描述】：

我有两个具有这种结构的对象：

对象1：

{
 0: {name:"", id: 0},
 1: {"age": "", id:0},
 2: {name:"", id: 1},
 3: {"age": "", id:1},
}

我触发了其中一个属性，最终得到以下结果：

对象2：

{
 0: {name:"", id: 0},
 1: {"age": "", id:0},
 2: {name:"john", id: 1},
 3: {"age": "", id:1},
}

我需要创建一个函数来循环遍历 2 个对象，查看是否有更改并返回这些更改，在这种情况下，返回的内容类似于 [{name:"john", id:1}]

我已经搜索了一些答案，但我只能通过平面对象找到循环

我也尝试启动该函数，但我一直卡住，因为我不知道如何同时循环通过 obj2

function objDiff(object1, object2){
   for(var set in object1) {
      for(property in set) {
        // Do the comparison
      }
   } 
}

id 并没有真正改变，只有第一个属性。

我需要一些关于如何同时开始循环低谷的见解

【问题讨论】：

这能回答你的问题吗？ Generic deep diff between two objects
它们是对象还是数组？

标签： javascript loops object

【解决方案1】：

我不知道这对您的对象有多有效，但您可以遍历第二个对象的值的元素并将它们字符串化，然后过滤不属于字符串化的第一个对象的 noes：

let obj1 = {
 0: {name:"", id: 0},
 1: {"age": "", id:0},
 2: {name:"", id: 1},
 3: {"age": "", id:1},
}

let obj2 = {
 0: {name:"", id: 0},
 1: {"age": "", id:0},
 2: {name:"john", id: 1},
 3: {"age": "", id:1},
}
let obj1String = JSON.stringify(obj1);
let result = Object.values(obj2).filter((e) => !obj1String.includes(JSON.stringify(e)))
console.log(result);

【讨论】：

【解决方案2】：

我将建议您重写代码，以便为您提供更好的数据结构。我知道这可能不是最受欢迎的答案，也绝对不是最容易做的事情，也不会被其他使用您的代码库的人所接受，但从长远来看，它可能会对您有所帮助。

而不是这样：

obj1 = {
 0: {name:"", id: 0},
 1: {"age": "", id:0},
 2: {name:"", id: 1},
 3: {"age": "", id:1}
};

你应该有这个：

obj1 = [
 {name:"", "age": "", id: 0},
 {name:"", "age": "", id: 1},
 ...
];

这变成了一个对象数组，其中每个“人”或您要处理的任何东西都有一个对象。然后，当您获得新数据时，您只需搜索id 并更新任何必要的内容。

在同一个数组中包含 2 个不同的对象不是一个好主意，并且会导致这种问题，即您不知道每个数组元素中要处理的对象是什么。您的代码将它与它复合，而不是它是一个数组，它是一个伪装成数组的对象，这更难处理。您可能必须将您的 key 列表转换为一个数组来循环遍历所有内容，这效率不高。

let obj1 = {
 0: {name:"", id: 0},
 1: {"age": "", id:0},
 2: {name:"", id: 1},
 3: {"age": "", id:1}
};

let keys = Object.keys(obj1);

for (let i = 0; i < keys.length; i++){
  console.log(obj1[i]);
}

将它作为一个数组避免了从对象中提取keys 的额外步骤。对于一个小型应用程序，这可能不是什么大问题，但如果它是一个游戏或股票市场应用程序，时间是相当关键的，并且每秒或循环执行多次，它很快就会加起来。作为一个数组，它更简单、更快捷，并且您可以轻松地以预期的方式添加更多元素。

在单个数组中保留多个对象意味着您必须测试每个元素的对象类型，花费您可能不想花费的时间。

let obj1 = [
 {name:"", id: 0},
 {"age": "", id:0},
 {name:"", id: 1},
 {"age": "", id:1}
];

for (let i = 0; i < obj1.length; i++){
  console.log(obj1[i]);
}

作为一个仅供参考，您不应该像现在这样混合您的财产声明。在所有属性名称周围使用引号，或者不要在任何属性名称上使用它。 {name:"", "age": "", id: 0} 变为 {name:"", age: "", id: 0} 或 {"name":"", "age": "", "id": 0}。浏览器通常不在乎，但有时它们会在乎，而当它们这样做时，它会严重困扰您，给您带来难以追踪的奇怪错误。

当您的数据位于数组中时，您也不需要确保ids 的顺序“正确”。因此，将其转换为数组中的单个对象，这应该会大大简化您的代码，并使其以后更容易扩展，变为：

let obj1 = [
 {name: "", age: "", id: 0},
 {name: "", age: "", id: 1}
];

let obj2 = [
 {name: "john", age: "", id: 1},
 {name: "jacob", age: "", id: 0}
];

for (let i = 0; i < obj1.length; i++){
  console.log(obj1[i]);

  for (let j = 0; j < obj2.length; j++){
    console.log(obj2[j]);

    if (obj1[i].id === obj2[j].id)
    {
      obj1[i].age = obj2[j].age;
      obj1[i].name = obj2[j].name;
      break;
    }
  }
}

即使您以最初布局的方式从 API 获取数据，您仍然可以在 JavaScript 中将其转换为更好的格式，然后，如果/当您需要将数据发送回 API 时，在发送之前将其转换回来。这会使发送数据的过程复杂化，但应该会简化客户端应用程序中的其他所有内容。

【讨论】：