如何在 es6 中仅比较和过滤两个对象数组中不匹配的数组

Question

在我的 Angular 应用程序中，我试图仅获取从 UI 修改的更新数组。

在这里，我有两个数组，其中一个角色名称已更改。我想比较并过滤掉修改过的对象，只返回那些修改过的数组。 （在这种情况下，role_name 值被修改）

我尝试在 ES6 的帮助下进行过滤，但它不起作用。

有人可以帮我解决我在哪里失踪吗？

var arr1 = [ {
  "num" : null,
  "role_name" : "ABC",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "1",
  "user_name" : "Rywan"
},
{
  "num" : null,
  "role_name" : "DEF",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "2",
  "user_name" : "adecg"
},
{
  "num" : null,
  "role_name" : "GHJ",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "3",
  "user_name" : "dde"
},
{
  "num" : null,
  "role_name" : "RRT",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "4",
  "user_name" : "kumar"
},
{
  "num" : null,
  "role_name" : "SFR",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "5",
  "user_name" : "SASI"
}
];

var arr2 = [ {
  "num" : null,
  "role_name" : "ABC",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "1",
  "user_name" : "Rywan"
},
{
  "num" : null,
  "role_name" : "ROLE_CHANGED",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "2",
  "user_name" : "adecg"
},
{
  "num" : null,
  "role_name" : "GHJ",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "3",
  "user_name" : "dde"
},
{
  "num" : null,
  "role_name" : "RRT",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "4",
  "user_name" : "kumar"
},
{
  "num" : null,
  "role_name" : "SFR",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "5",
  "user_name" : "SASI"
}
];

   let filteredData;
     filteredData = arr1.filter(function(o1){
      //filter out (!) items in arr2
       return arr2.some(function(o2){
           return o1.role_name !== o2.role_name;  
      });
   });
   
   console.log(filteredData);

输出应该是

[
{
      "num" : null,
      "role_name" : "ROLE_CHANGED",
      "profile" : "ff",
      "user" : "1234",
      "rn" : "2",
      "user_name" : "adecg"
    }
]

Answer 1

我们已有的解决方案有点不同。

在Object.keys() 使用filter() 时，如果值已更改为arr1[index].role_name !== arr2[index].role_name，我们还可以根据数组的索引比较role_name 属性。这将返回我们已更改值的数组的所有索引。然后使用map() 根据找到的数组键为这些元素生成一个新数组。

所以解决办法是：

Object.keys(arr1).filter(index => arr1[index].role_name !== arr2[index].role_name)
                 .map(index => arr2[index]);

Object.keys():

Object.keys() 方法返回一个给定对象自己的可枚举属性名称的数组，其顺序与我们在正常循环中得到的顺序相同。

Array.prototype.filter():

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

Array.prototype.map():

map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

我认为您可以尝试以下方法：

const arr1 = [{
  "num" : null,
  "role_name" : "ABC",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "1",
  "user_name" : "Rywan"
},
{
  "num" : null,
  "role_name" : "DEF",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "2",
  "user_name" : "adecg"
},
{
  "num" : null,
  "role_name" : "GHJ",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "3",
  "user_name" : "dde"
},
{
  "num" : null,
  "role_name" : "RRT",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "4",
  "user_name" : "kumar"
},
{
  "num" : null,
  "role_name" : "SFR",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "5",
  "user_name" : "SASI"
}];

const arr2 = [{
  "num" : null,
  "role_name" : "ABC",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "1",
  "user_name" : "Rywan"
},
{
  "num" : null,
  "role_name" : "ROLE_CHANGED",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "2",
  "user_name" : "adecg"
},
{
  "num" : null,
  "role_name" : "GHJ",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "3",
  "user_name" : "dde"
},
{
  "num" : null,
  "role_name" : "RRT",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "4",
  "user_name" : "kumar"
},
{
  "num" : null,
  "role_name" : "SFR",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "5",
  "user_name" : "SASI"
}];

const changedObjects = Object.keys(arr1).filter(index => arr1[index].role_name !== arr2[index].role_name)
                                        .map(index => arr2[index]);
   
console.log(changedObjects);

希望对你有帮助！

Answer 2

您的逻辑有点缺陷，因为您的 .some() 将始终返回 true，因为总有一个元素会有所不同。您要做的是实际检查任何一个角色名称是否相同。如果没有找到匹配项（即.some() 返回 false），那么您就知道 role_name 已更改：

const filteredData = arr2.filter((o1, i) => {
  return !arr1.some((o2) => {
    return o1.role_name === o2.role_name;
  });
});

var arr1 = [{
    "num": null,
    "role_name": "ABC",
    "profile": "ff",
    "user": "1234",
    "rn": "1",
    "user_name": "Rywan"
  },
  {
    "num": null,
    "role_name": "DEF",
    "profile": "ff",
    "user": "1234",
    "rn": "2",
    "user_name": "adecg"
  },
  {
    "num": null,
    "role_name": "GHJ",
    "profile": "ff",
    "user": "1234",
    "rn": "3",
    "user_name": "dde"
  },
  {
    "num": null,
    "role_name": "RRT",
    "profile": "ff",
    "user": "1234",
    "rn": "4",
    "user_name": "kumar"
  },
  {
    "num": null,
    "role_name": "SFR",
    "profile": "ff",
    "user": "1234",
    "rn": "5",
    "user_name": "SASI"
  }
];

var arr2 = [{
    "num": null,
    "role_name": "ABC",
    "profile": "ff",
    "user": "1234",
    "rn": "1",
    "user_name": "Rywan"
  },
  {
    "num": null,
    "role_name": "ROLE_CHANGED",
    "profile": "ff",
    "user": "1234",
    "rn": "2",
    "user_name": "adecg"
  },
  {
    "num": null,
    "role_name": "GHJ",
    "profile": "ff",
    "user": "1234",
    "rn": "3",
    "user_name": "dde"
  },
  {
    "num": null,
    "role_name": "RRT",
    "profile": "ff",
    "user": "1234",
    "rn": "4",
    "user_name": "kumar"
  },
  {
    "num": null,
    "role_name": "SFR",
    "profile": "ff",
    "user": "1234",
    "rn": "5",
    "user_name": "SASI"
  }
];

const filteredData = arr2.filter((o1, i) => {
  return !arr1.some((o2) => {
    return o1.role_name === o2.role_name;
  });
});

console.log(filteredData);