如何在 2 个对象数组之间进行更改？ [罗达什/ JS]答案

【问题标题】：How to get changes between 2 arrays of objects? [ lodash/ JS]如何在 2 个对象数组之间进行更改？ [罗达什/ JS]
【发布时间】：2022-01-15 07:43:57
【问题描述】：

我有一个表已经填充了来自 API 的数据集。对于演示，假设我已经在从 API 获取的表上添加了 2 行。现在，我编辑了第二行也添加了另一行。所以我想要实现的是我想要获得一个新的对象数组，其中包含我刚刚编辑的行以及我刚刚添加的行。

以下是我拥有的 2 个带有虚拟数据集的数组。

第一个数组：

[
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 12, end: 24 }, point: 56 },
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 8, end: 36 }, point: 49 },
]

第二个数组：

[
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 12, end: 24 }, point: 56 },
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 36, end: 97 }, point: 15 },
  { id: null, count: { start: 123, end: 2135 }, point: 323 },
]

请注意，我编辑了 Second Array 中的第二行值。第二个数组的第三行没有用户 ID，因为userId 发布后会从服务器返回

预期输出：

[
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 36, end: 97 }, point: 15 },
  { id: null, count: { start: 123, end: 2135 }, point: 323 },
]

我试过 lodash _.differencWith / _.intersectWith 但使用它的输出如下所示

[
  { id: null, count: { start: 123, end: 2135 }, point: 323 },
]

只返回表中新添加的行，但忽略了我也更改了第二行的值。

注意：该表只有 3 列，所有列都是可编辑的。 coun: { start, end} 和 point

【问题讨论】：

你试过了吗：_.differenceWith(x, y, _.isEqual)？其中 x,y 是 2 个数组
@Mani 是的_.differenceWith(second, first, _.isEqual)。我试过这样。
我从那个函数得到了预期的输出，你能检查解决方案并从那个解决方案运行。

标签： javascript arrays object lodash

【解决方案1】：

你可以使用_.differenceWith(https://lodash.com/docs/4.17.15#differenceWith)

const first=[
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 12, end: 24 }, point: 56 },
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 8, end: 36 }, point: 49 },
]

const second=[
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 12, end: 24 }, point: 56 },
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 36, end: 97 }, point: 15 },
  { id: null, count: { start: 123, end: 2135 }, point: 323 },
]

let result=_.differenceWith(second, first, _.isEqual)

console.log(result)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"&gt;&lt;/script&gt;

_.differenceWith:

此方法与_.difference 类似，不同之处在于它接受比较器，该比较器被调用以将数组元素与值进行比较。结果值的顺序和引用由第一个数组确定。比较器使用两个参数调用：(arrVal, othVal)。

【讨论】：

这似乎有效，但在我的项目中却没有。您能否检查一下我在以下链接中添加的代码 sn-p。似乎只返回了新添加的行goonlinetools.com/snapshot/code/#iu37oyqaa7mbci0d8zipiv
ibb.co/6JMpzDh
对不起。可能是我弄错了...请让我再仔细检查一下..给您带来的不便，敬请原谅
好的，如果您遇到任何问题，请随时分享
我发现了问题。我正确地执行了 lodash 操作，但问题是我的 firstArray 在我更改 secondArray 时因为相同的引用而得到更新。现在我使用了 lodash 的_.cloneDeep 然后比较它现在可以工作了...感谢您的时间和精力，我能够意识到错误..

【解决方案2】：

const a = [
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 12, end: 24 }, point: 56 },
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 8, end: 36 }, point: 49 },
]

const b = [
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 12, end: 24 }, point: 56 },
  { id: '38sj3-23', user: { id: 21323 }, count: { start: 36, end: 97 }, point: 15 },
  { id: null, count: { start: 123, end: 2135 }, point: 323 },
];

result = _.differenceWith(b, a, _.isEqual)
console.log(result); // your excpected result.

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：