vue 过滤两个对象数组不同得值？

Question

如何过滤下面两个个不同的对象数组？然后展示它们之间不同数据
第一个对象数组：

arr1 = [
  {
     fieldName: "aa"
  },
{
     fieldName: "bb"
  },
{
     fieldName: "cc"
  },
{
     fieldName: "dd"
  },
]

第二个对象数组：

arr2 = [
      {
         fieldName: "[{\"fieldName\":\"bb\"}]"
      },
      {
         fieldName: "[{\"fieldName\":\"cc\"}]"
      }
]

过滤后找出不同的数据祖晨更新的数组：

newArr = [
  {
     fieldName: "aa"
  },
{
     fieldName: "dd"
  },
]

Answer 1

其实1楼写的没啥问题，你自己写的如果没有作用的话，你得把你自己写的函数贴上来啊。

var arr1 = [
  { fieldName: "aa" },
  { fieldName: "bb" },
  { fieldName: "cc" },
  { fieldName: "dd" },
]
var arr2 = [
  { fieldName: "[{\"fieldName\":\"bb\"}]" },
  { fieldName: "[{\"fieldName\":\"cc\"}]" }
]
// 转换 arr 的JSON内容，并且推平数组
var transfList = arr2.map(item => JSON.parse(item.fieldName)).flat()
// 过滤结果
var filterList = arr1.filter(data => {
  // 如果有在转换后的列表中匹配到相同的 fieldName 则返回 false
  return !transfList.some(d => d. fieldName === data.fieldName)
})
// 输出过滤结果
console.log(filterList)
// Array [ {…}, {…} ]
//   0: Object { fieldName: "aa" }
//   1: Object { fieldName: "dd" }
//   length: 2

Answer 2

let arr1 = [
  { fieldName: "aa" },
  { fieldName: "bb" },
  { fieldName: "cc" },
  { fieldName: "dd" },
];

let arr2 = [
  { fieldName: '[{"fieldName":"cc"},{"fieldName":"bb"}]' }
];

let parsedArr2 = JSON.parse(arr2[0].fieldName);

let diff = arr1.filter(a1 => !parsedArr2.some(a2 => a1.fieldName === a2.fieldName));

console.log(diff); // 输出：[ { fieldName: 'aa' }, { fieldName: 'dd' } ]