React中遍历对象数组按条件批量删除匹配指定邮箱的实现方法

你之前单条匹配删除的写法核心是保留「mailId不等于目标值」的条目，当需要匹配移除的mailId为列表形式时，只需要把单值判断替换为「当前条目mailId不在待移除列表中」的判断即可。

实现方式1：数组includes写法（适合小数据量） #

写法和你之前的单值过滤逻辑几乎一致，代码最简洁：

// 原始数组
const originalArray = [
  {mailId: 'one@gmail.com', firstName: 'one'},
  {mailId: 'two@gmail.com', firstName: 'two'},
  {mailId: 'three@gmail.com', firstName: 'three'},
  {mailId: 'four@gmail.com', firstName: 'four'},
  {mailId: 'five@gmail.com', firstName: 'five'}
];

// 待移除的邮箱列表
const mailsToRemove = ['three@gmail.com', 'five@gmail.com'];

// 过滤逻辑
const filteredArray = originalArray.filter(item => !mailsToRemove.includes(item.mailId));

过滤后得到的filteredArray和你预期的结果完全一致。

实现方式2：Set写法（推荐，适合所有数据量场景） #

如果原始数组数据量较大，建议先把待移除列表转成Set，Set的查找时间复杂度为O(1)，比数组includes()的O(n)查找性能高很多：

const mailsToRemove = ['three@gmail.com', 'five@gmail.com'];
// 转成Set优化查找效率
const removeMailSet = new Set(mailsToRemove);

const filteredArray = originalArray.filter(item => !removeMailSet.has(item.mailId));

React场景使用注意 #

• filter方法会返回全新的数组，不会修改原数组，完全符合React状态更新的不可变要求，过滤后的结果可以直接用于state更新
• 不管待移除的邮箱列表有多少个条目，只需要维护mailsToRemove数组即可，不需要修改过滤逻辑

内容的提问来源于stack exchange，提问作者Ganesh