JavaScript中如何比对数组对象属性值并移除匹配的对应对象

需求场景 #

现有两个结构化对象：

• obj1 为歌单对象，内部嵌套 songs 歌曲数组
• obj2 为单首歌曲对象
  需要遍历 obj1.songs 数组，严格比对每个数组项的 songId 属性值与 obj2.songId，将属性值完全相等的歌曲项从 songs 数组中移除。

原始示例数据 #

let obj1 = {
  "name": "Gym",
  "createdAt": "2021/01/14 04:17:01",
  "id": "1f137fd1-0d3c-4eb0-b045-a13a77971887",
  "songs": [
    {
      "userId": 1,
      "id": 1,
      "title": "quidem molestiae enim",
      "songId": "36a8d4a7-eeb1-4f1a-81d4-20f3ce682da9"
    },
    {
      "userId": 1,
      "id": 1,
      "title": "quidem molestiae enim",
      "songId": "e0009b28-cfe4-455f-ada4-21d2b79c9ee9"
    }
  ]
}

let obj2 = {
  userId: 1, 
  id: 1, 
  title: "quidem molestiae enim", 
  songId: "36a8d4a7-eeb1-4f1a-81d4-20f3ce682da9"
}

具体实现方式 #

方式1：使用 Array.filter() 过滤（推荐） #

写法简洁易读，通过过滤规则生成符合要求的新数组，直接赋值回 obj1.songs 即可完成更新：

// 保留 songId 与目标值不相等的数组项
obj1.songs = obj1.songs.filter(song => song.songId !== obj2.songId)

比对时使用严格不等运算符 !==，会同时校验值和数据类型，避免隐式类型转换带来的匹配偏差，完全符合严格相等的比对要求。

执行完代码后，songs 数组会自动过滤掉 songId 与 obj2.songId 相等的项，最终结构与预期输出完全一致。

方式2：原数组直接修改（使用 Array.splice()） #

如果要求不生成新数组，直接在原 songs 集合上完成删除操作，需要从数组末尾向前倒序遍历，避免正序删除元素导致的索引偏移漏匹配问题：

// 倒序遍历数组，从最后一项开始往前匹配
for (let i = obj1.songs.length - 1; i >= 0; i--) {
  // 严格比对 songId 值
  if (obj1.songs[i].songId === obj2.songId) {
    // 删除当前匹配项，第二个参数为要删除的元素个数
    obj1.songs.splice(i, 1)
  }
}

两种实现方式的最终输出结果完全一致，可根据实际业务场景选择使用。

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