[JavaScript] 一部の配列を削除したい

Question

すみません。
mapやらfilterやら使って試行錯誤してたんですが、どうしてもわからないので教えてください。

2つのリストがあります。
リストAのexistが1の場合(3.jpg)に、そのファイル名を元にリストAから"3.jpg"を削除するにはどのようにすればよいでしょうか？

// リストA
const listA= [
  { filename: "3.jpg", exist: 1 },
  { filename: "5.jpg", exist: 0 },
  { filename: "6.jpg", exist: 0 }
];

// リストB
const listB = {
  Items: [
    { filename: "1.jpg", size: 1024 },
    { filename: "2.jpg", size: 1024 },
    { filename: "3.jpg", size: 1024 },
    { filename: "4.jpg", size: 1024 }
  ]
};

求める形

  Items: [
    { filename: "1.jpg", size: 1024 },
    { filename: "2.jpg", size: 1024 },
    { filename: "4.jpg", size: 1024 }
  ]
};

どうかよろしくお願いします。

Answer 1

こんにちは

以下は、 exist が1の filename の値（ファイル名）を要素とする Set を作っておいて、フィルターするときに使う案です。

// 既存ファイル名のSetを作成
const existingFiles = new Set(listA.filter(e => e.exist).map(e => e.filename));

// 既存ファイルSetの内容を確認
console.log([...existingFiles])

// listB.Itemsの要素で既存ファイルSetにあるものを除外
listB.Items = listB.Items.filter(item => !existingFiles.has(item.filename));

// 結果の確認
console.log(listB.Items)

以下は、上記の動作確認用のサンプルです。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/abOZRba?editors=0012

上記のサンプルでは、確認のため、listA に追加で exist が 1 の要素{ filename: "7.jpg", exist: 1 }を加え、listB.Items に 7.jpg の要素を2個追加しています。これらも除外されることを確認できます。

追記

exist が1の filename の値を集めたSet（または他の回答者様から提示されているように、配列）を作ってから、これを使って filter するのが効率的だと思いますが、これらの中間生成物を作らないでやろうとすると、以下で出来ます。

listB.Items = listB.Items.filter(e1 => !listA.find(e2 => e1.filename === e2.filename));

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/OJVXBXN?editors=0012

ただしこれは、filter のループの中で、毎回 find するので非効率です。

Comments

[inukujira]

ありがとうございました！
とても助かりました！感謝です！

[jun68ykt]

どういたしまして。参考になれば幸いです。

Answer 2

const excluder = (obj) => obj.exist === 1;
const excludes = listA.filter(excluder).map(e=>e.filename);
const listC = {Items:listB.Items.filter(e=> !excludes.includes(e.filename))};
console.log(listC);

Comments

[inukujira]

ありがとうございました！
とても助かりました！感謝です！

Answer 3

「リストAのexistが1の場合(3.jpg)に、そのファイル名を元にリストBから"3.jpg"を削除する」といことであれば、以下のように書くとできると思います。

// リストA
const listA = [
  { filename: "3.jpg", exist: 1 },
  { filename: "5.jpg", exist: 0 },
  { filename: "6.jpg", exist: 0 }
];

// リストB
const listB = {
  Items: [
    { filename: "1.jpg", size: 1024 },
    { filename: "2.jpg", size: 1024 },
    { filename: "3.jpg", size: 1024 },
    { filename: "4.jpg", size: 1024 }
  ]
};

const existItem = listA.filter(item => item.exist === 1)[0];
const result = listB.Items.filter(item => item.filename !== existItem.filename);
console.log(result);

=>
[
  { filename: "1.jpg", size: 1024 },
  { filename: "2.jpg", size: 1024 },
  { filename: "4.jpg", size: 1024 }
]

もし、最初のリストにexist: 1のオブジェクトが複数ある場合は、以下のように書くとフィルタリングできると思います。

// リストC
const listC = [
  { filename: "1.jpg", exist: 1 },
  { filename: "3.jpg", exist: 1 },
  { filename: "6.jpg", exist: 0 }
];

// リストD
const listD = {
  Items: [
    { filename: "1.jpg", size: 1024 },
    { filename: "2.jpg", size: 1024 },
    { filename: "3.jpg", size: 1024 },
    { filename: "4.jpg", size: 1024 }
  ]
};

const existFilenames = listC
  .filter(item => item.exist === 1)
  .map(item => item.filename);
const result2 = listD.Items.filter(
  item => existFilenames.indexOf(item.filename) === -1
);
console.log(result2);

=>
[
  { filename: "2.jpg", size: 1024 },
  { filename: "4.jpg", size: 1024 }
]

サンプルコード

Comments

[inukujira]

ありがとうございました！
とても助かりました！感謝です！

Answer 4

const existFilenames = listA.reduce((acc, {filename, exist}) => exist ? [...acc, filename] : acc, []);
const listC = {
  Items: listB.Items.filter(({filename}) => !existFilenames.includes(filename))
};
console.log(listC);

Comments

[inukujira]

ありがとうございました！
とても助かりました！感謝です！

Answer 5

const delImgs=listA.map(x=>x.exist==1?x.filename:undefined).filter(Boolean);
listB.Items=listB.Items.filter(x=>!delImgs.includes(x.filename));
console.log(listB);

Comments

[inukujira]

ありがとうございました！
とても助かりました！感謝です！