使用JavaScript filter()过滤notebookUsers中指定ID用户的问题排查

核心问题梳理 #

1. 变量名错误
   • 代码中定义了filteredUsers，但返回条件里误用了未声明的filteredNotebookUsers，这会导致逻辑判断失效（实际运行会抛出ReferenceError）
   • 打印时使用的filteredUsersByNotebookArray和定义的变量filteredUsersArray名称不匹配，导致输出的不是目标结果
2. 逻辑方向偏差
   • x.filter()的作用是筛选数组x中的整个notebook对象（保留/移除），但你的需求是修改每个notebook对象内的notebookUsers数组，移除出现在y中的值，而非过滤整个notebook对象

修复后的代码 #

const x = [
      {
        notebookId: "abc",
        notebookUsers: [1, 2, 3, 4],
      },
      {
        notebookId: "cde",
        notebookUsers: [2, "foo", 4, 3],
      },
      {
        notebookId: "fgh",
        notebookUsers: ["bla", 4, 5, "123"],
      },
      {
        notebookId: "qqq",
        notebookUsers: [33, 16, 12],
      },
      {
        notebookId: "ab",
        notebookUsers: ["abc", 23213, 2131, 33],
      },
    ];

const y = ["abc", "123", "bla", "foo"];

// 先过滤符合notebookId要求的对象，再修改每个对象的notebookUsers数组
const filteredUsersArray = x
  .filter(nb => {
    return nb.notebookId !== "welcome" && nb.notebookId !== "null" && nb.notebookId !== "1234";
  })
  .map(nb => {
    // 复制原对象并替换过滤后的notebookUsers
    return {
      ...nb,
      notebookUsers: nb.notebookUsers.filter(user => !y.includes(user))
    };
  });

console.log(filteredUsersArray);

修复后输出结果 #

[
  { notebookId: 'abc', notebookUsers: [ 1, 2, 3, 4 ] },
  { notebookId: 'cde', notebookUsers: [ 2, 4, 3 ] },
  { notebookId: 'fgh', notebookUsers: [ 4, 5 ] },
  { notebookId: 'qqq', notebookUsers: [ 33, 16, 12 ] },
  { notebookId: 'ab', notebookUsers: [ 23213, 2131, 33 ] }
]

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