JavaScriptである配列を別の配列でフィルタリングする方法

問題の概要

例えば、次のようなオブジェクトを要素に持つ配列と、名前のリスト（文字列の配列）があるとします。

const main = [
    {name: "Karan", age: 34},
    {name: "Aayush", age: 24},
    {name: "Ameesh", age: 23},
    {name: "Joy", age: 33},
    {name: "Siddarth", age: 43},
    {name: "Nakul", age: 31},
    {name: "Anmol", age: 21},
];
const names = ["Karan", "Joy", "Siddarth", "Ameesh"];

ここで求められるのは、この2つの配列を受け取り、元の配列をその場で（in place）書き換えながら、name プロパティが2つ目の配列（names）に含まれているオブジェクトだけを残す JavaScript 関数を作成することです。

実装コード

以下がそのコード例です。

const main = [
{name: "Karan", age: 34},
{name: "Aayush", age: 24},
{name: "Ameesh", age: 23},
{name: "Joy", age: 33},
{name: "Siddarth", age: 43},
{name: "Nakul", age: 31},
{name: "Anmol", age: 21},
];
const names = ["Karan", "Joy", "Siddarth", "Ameesh"];
const filterUnwanted = (main, names) => {
    for(let i = 0; i < main.length; ){
       if(names.includes(main[i].name)){
          i++;
          continue;
       };
       main.splice(i, 1);
    };
};
filterUnwanted(main, names);
console.log(main);

コンソールには次のような出力が表示されます。

[
    { name: 'Karan', age: 34 },
    { name: 'Ameesh', age: 23 },
    { name: 'Joy', age: 33 },
    { name: 'Siddarth', age: 43 }
]

コードの解説

この関数では、for ループで配列を走査しながら条件に合わない要素を削除しています。処理のポイントは以下の通りです。

• includes() による判定： names.includes(main[i].name) で、現在のオブジェクトの name プロパティが許可リストに含まれているかどうかを確認します。
• 残す場合： 含まれていればインデックス i を進めて次の要素へ移動します。
• 削除する場合： 含まれていなければ Array.prototype.splice() でその要素を削除します。このとき i を進めていない点が重要です。splice で要素を削除すると後続の要素が一つ前に詰められるため、同じインデックスの再確認が必要になるからです。

代替アプローチ：filter() メソッドを使う

元の配列を直接書き換える必要がなく、結果を別の変数として受け取ってよい場合は、Array.prototype.filter() を使うことでより簡潔に記述できます。

const result = main.filter(obj => names.includes(obj.name));
console.log(result);

filter() は条件を満たす要素だけで構成された新しい配列を返すため、元の main 配列は変更されません。元のデータを保持したい場合はこちらの方法が安全です。一方、メモリや参照の関係で元の配列自体を更新したいケースでは、冒頭の splice を使った実装が有効です。要件に応じて使い分けるとよいでしょう。