有两个数组对象，数组一是原始数据，数组二为基于数组一编辑后的数据，写一段代码实现对数组一编辑后筛选出AddItem和RemoveItem

～眸

于 2023-10-17 16:00:29 发布

阅读量77

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/xiaoniaozl/article/details/133886312

本文介绍了如何在JavaScript中使用数组操作符filter来处理数据更新，包括识别新添加的(Item5)和被移除的(Item2)items。展示了如何通过对比originalData和editedData来追踪变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例：

interface Item {
  id: number;
  name: string;
}

const originalData: Item[] = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' }
];

const editedData: Item[] = [
  { id: 1, name: 'Item 1' },
  { id: 3, name: 'Item 3 (Updated)' },
  { id: 5, name: 'Item 5 (New)' }
];

const addedItems: Item[] = editedData.filter(
  editedItem => !originalData.some(originalItem => originalItem.id === editedItem.id)
);

const removedItems: Item[] = originalData.filter(
  originalItem => !editedData.some(editedItem => editedItem.id === originalItem.id)
);

console.log('Added Items:', addedItems);
console.log('Removed Items:', removedItems);