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番目の配列に含まれているオブジェクトだけを残す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);

コードのポイント

• インデックス操作: ループ内でi++を意図的に手動で行っているのは、splice()で要素を削除した際に後続の要素が前にずれ、通常のi++では要素を見逃してしまうのを防ぐためです。
• 条件判定: names.includes(main[i].name)によって、現在のオブジェクトのnameが許可リストに含まれているかどうかをチェックしています。
• その場での削除: main.splice(i, 1)により、条件に合わない要素を元の配列から直接取り除いています。

出力結果

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

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

補足:元の配列を変更せずに済ませたい場合

上記の方法は元の配列を直接書き換えますが、元の配列を保持したまま新しい配列として結果が欲しい場合は、Array.prototype.filter()を使うのがより簡潔で安全です。

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

このように、目的に応じて「破壊的な処理(splice)」か「非破壊的な処理(filter)」を使い分けることで、意図しない副作用を避けられます。