JavaScript实现筛选商品编辑页待删除图片数组的逻辑

业务背景 #

基于React前端+Node后端搭建商品编辑页面时，商品关联图片更新无需全量解绑删除原有图片，仅需对编辑过程中被移除的图片执行删除操作、对新上传的图片执行绑定操作即可，避免误删仍处于使用状态的存量图片。
已知新旧图片数组定义如下：

// 编辑前商品初始关联的图片数组
let prevImages = ['a.png', 'b.png', 'c.png','d.png']
// 编辑提交时当前选中的图片数组
let images = ['b.png','c.png', 'd.png', 'e.png']

本场景需要筛选得到待删除图片数组，预期结果为["a.png"]。

实现代码 #

核心逻辑是遍历旧图片数组，筛选出不存在于新图片数组中的项，就是用户编辑时移除、需要执行删除操作的图片：

const toDeleteImages = prevImages.filter(oldImg => !images.includes(oldImg))
console.log(toDeleteImages) // 输出: ['a.png']，完全符合预期

扩展：同步筛选待新增图片 #

如果需要同时拿到需要新增绑定的图片，反向筛选即可：

const toAddImages = images.filter(newImg => !prevImages.includes(newImg))
console.log(toAddImages) // 输出: ['e.png']

适配复杂数据结构的注意事项 #

如果你的图片数组存储的是对象而非字符串（比如包含图片id、存储路径、排序值等字段），不能直接用includes判断，需要对比唯一标识字段，示例：

// 假设数组元素为图片对象
let prevImages = [{id: 1, url: 'a.png'}, {id:2, url:'b.png'}]
let images = [{id:2, url:'b.png'}, {id: null, url:'e.png'}]

// 对比唯一url字段筛选待删除项
const toDeleteImages = prevImages.filter(oldImg => !images.some(newImg => newImg.url === oldImg.url))

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