【Javascript】連想配列にないキーを検索して無い分の要素を追加したい

Question

前提・実現したいこと

groupに含まれないlistAの値の組み合わせがあれば、time:0を加えて新たに要素をgroupに追加したいです。
groupには {name: 'A', type: 'typeD'}、 {name: 'B', type: 'typeC'}の組み合わせがないのでこれらを
listAを使って特定し、追加するというようなことがしたいです。

const group=[

{
stuff: {name: 'A'}
time: 60
style: {type: 'typeA'}},

{
stuff: {name: 'A'}
time: 120
style: {type: 'typeB'}},


{
stuff: {name: 'A'}
time: 83
style: {type: 'typeC'}},


{
stuff: {name: 'B'}
time: 257
style: {type: 'typeB'}},


{
stuff: {name: 'B'}
time: 120
style: {type: 'typeD'}},


{
stuff: {name: 'B'}
time: 66
style: {type: 'typeA'}}

]

検索キー

const listA=[

  {name: 'A', type: 'typeA'},
  {name: 'A', type: 'typeB'},
  {name: 'A', type: 'typeC'},
  {name: 'A', type: 'typeD'},
  {name: 'B', type: 'typeA'},
  {name: 'B', type: 'typeB'},
  {name: 'B', type: 'typeC'},
  {name: 'B', type: 'typeD'},

]

最終的にgroupに追加したい要素

{
stuff: {name: 'A'}
time: 0
style: {type: 'typeD'}},


{
stuff: {name: 'B'}
time: 0
style: {type: 'typeC'}},

試したこと

groupのtypeの値　と listAのtypeの値
groupのnameの値　と listAのnameの値

を比較しているのですが、groupのtype、nameの値に'typeD'、'typeC'が
ないことをどう示せばいいかわかりません。

type、nameの種類と数は動的に変わるので、文字列を直接指定して
の比較はしてません

listA.map(x=>group.filter(y=>y.style.type !== x.type)
   

Answer 1

計算量を気にするなら name と type の組み合わせが group に存在するかどうかのチェックを O(1) でやるために Set や Object を利用すべきです。が、group がそんなに大きくないなら、シンプルにループを回して存在チェックしても良いのではないでしょうか。

for (let {name, type} of listA) {
  if (group.findIndex(
      item => name == item.stuff.name && type == item.style.type)
      == -1)
    group.push({stuff:{name}, time:0, style:{type}});
}

Comments

[asahiko123]

回答ありがとうございます。
groupはそんなに多くないのでループを使いたいと思います。

Answer 2

name と type をハイフンでつなげた、"A-typeB" のような形式の文字列を、配列groupおよび配列listAの要素のキー（key) と呼ぶことにして、
(1) group に含まれる全要素のキーの集合（Set)を作る。
(2) listAの要素のうち、groupに追加すべきオブジェクトの元になる要素をfilterで抽出する。その際に(1)のSetを使う。
(3) (2)で作った、listAをfilterして出来た配列の要素を加工して、groupの要素の形式にする。（mapを使う)
(4) (3)で出来た配列の要素を、group に追加する。（forEachを使う）

という流れをコードにすると、こんなんでいけるっしょ

const setOfKeys = new Set(group.map(e => `${e.stuff.name}-${e.style.type}`));

listA
  .filter(({ name, type }) => !setOfKeys.has(`${name}-${type}`))
  .map(({ name, type }) => ({ stuff: { name }, time: 0, style: { type } }))
  .forEach(e => {
    group.push(e);
  });

???? Codepen で動かしてみる

または、Set を使わないでやるんだったら、

listA
  .filter(({ name, type }) =>
    group.every(e => name !== e.stuff.name || type !== e.style.type)
  )   
  .map(({ name, type }) => ({ stuff: { name }, time: 0, style: { type } }))
  .forEach(e => {
    group.push(e);
  });

???? Codepen で動かしてみる

Comments

[asahiko123]

回答ありがとうございます。
過程まで示していただけて理解しやすかったです。