Javascript 配列の数値とオブジェクトのidを比較し、異なっているidだけのオブジェクトを生成したい。

Question

前提・実現したいこと

Vue.jsのcomputed内で、オブジェクトを基にして別の配列を使用し、新しいオブジェクトを生成したいと考えています。

すべてのスキル(allSkills)からユーザーの登録したスキル(userSkills)を除いた(unselectedSkills)を生成したいのですが、いろいろ調べて下記のようにやってみたのですが、元のオブジェクトと変わらなかったり、うまくいきません。

filterメソッドを使うとよさそうというとことまでは気付いたのですが、公式リファレンス等にも引数に配列を渡すやり方は載っておらず、先に進まない状態です。。。
ご教授の程よろしくお願いいたします。

該当のソースコード

const allSkills = [ { "id": 1, "name": "スキルA" }, { "id": 2, "name": "スキルB" }, { "id": 3, "name": "スキルC" } ]
const userSkills  = [ { "id": 2, "name": "スキルB" }, { "id": 5, "name": "スキルE" }, { "id": 7, "name": "スキルG" } ]

const userIDs = userSkills.map(obj => obj.id)
// [ 2, 5, 7, 8, 10 ]
      
const unselectedSkills = allSkills.filter(function(obj) {
  for ( id of this  ) {
    if (obj.id != id ) return true
  }
 }, userIDs)

Answer 1

filter条件は以下ではありませんか？

const unselectedSkills = allSkills.filter(skillObj => {
  for (let id of this) {
    if (skillObj.id === id ) return false
  }
  return true;
 }, userIDs)

Answer 2

結果としてどうなればいいのでしょうか？

const allSkills = [ { "id": 1, "name": "スキルA" }, { "id": 2, "name": "スキルB" }, { "id": 3, "name": "スキルC" } ]
const userSkills  = [ { "id": 2, "name": "スキルB" }, { "id": 5, "name": "スキルE" }, { "id": 7, "name": "スキルG" } ]
const unselectedSkills = allSkills.filter(x=>!userSkills .map(x=>x.id).includes(x.id));
console.log(unselectedSkills);

Comments

[IRIESS]

解答ありがとうございます。

結果として、
allSkillsのidが1,2,3,4,5
userSkillsのidが2,3,5だとしたら
console.log(unselectedSkills)で
[{id:"1", name:"スキルA"},{id:"4", name:"スキルD"}]

となるようにしたいのです。

[IRIESS]

その通りに書いてみたら解決できました。ご教授ありがとうございました。
書いていただいた式をしっかり理解していきたいと思います。