JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】オブジェクトを再帰的に走査して、falsyな「enabled」プロパティを削除する方法

JavaScriptを扱っていると、ネストされたJSONオブジェクトの中から、特定の条件に合致するプロパティだけを取り除きたい場面があります。本記事では、オブジェクト内のすべての enabled プロパティの中から、値が falsy(false)であるものだけを、再帰的に検索して削除する方法を解説します。

対象となるオブジェクトの例

たとえば、次のようなJSONオブジェクトがあったとします。

const obj = {
    a: {
        someKey: {
            propOne: '',
            enabled: true
        }
    },
    b: {
        someKey: {
            propOne: '',
            enabled: false
        }
    },
    c: {
        someKey: {
            propOne: '',
            enabled: false
        }
    },
    someKey: {
        ab: {
            propOne: '',
            enabled: true
        }
    }
};

要件

このようなオブジェクトを引数として受け取り、値が falsy であるすべての enabled プロパティを、オブジェクト全体から再帰的に探して元のオブジェクトから削除する関数を作成します。

ポイントは以下の2点です。

  • enabled === false を持つキーは、そのキー自体を親オブジェクトから削除する
  • ネストされたオブジェクトに対しては再帰処理を行い、削除後に空になったオブジェクトも親から削除する

実装コード

実際のコードは以下のようになります。

const deleteFalsyKey = obj => {
    const keys = Object.keys(obj);
    keys.forEach(key => {
        if(obj[key].enabled === false){
            delete obj[key];
            return;
        };
        if(obj[key] && typeof obj[key] === 'object'){
            deleteFalsyKey(obj[key]);
            if (!Object.keys(obj[key]).length) {
                delete obj[key];
            };
        }
    });
};
deleteFalsyKey(obj);
console.log(obj);

コードの解説

この関数の動作を順番に見ていきましょう。

  1. Object.keys(obj) で、現在の階層にあるすべてのキーを配列として取得します。
  2. 各キーに対して forEach でループ処理を行います。
  3. obj[key].enabled === false の場合、そのキーを delete 演算子で削除し、return で以降の処理をスキップします。厳密等価演算子(===)を使うことで、undefined や他の falsy 値との誤判定を防いでいます。
  4. enabled が存在しない場合は、その値がオブジェクトかどうかを確認し、オブジェクトであれば deleteFalsyKey再帰呼び出しして、さらに深い階層へと処理を進めます。
  5. 再帰処理が終わった後、Object.keys(obj[key]).length をチェックすることで、中身が空になったオブジェクトも親から削除しています。これにより、不要な空オブジェクトが残ることを防げます。

実行結果

コンソールに出力される結果は以下の通りです。

{
    a: { someKey: { propOne: '', enabled: true } },
    someKey: { ab: { propOne: '', enabled: true } }
}

ご覧のとおり、bc(それぞれ内部の someKeyenabled: false)が完全に削除され、enabled: true を持つノードだけが元の構造のまま残っています。

まとめ

このように、Object.keys()forEach、そして再帰的な関数呼び出しを組み合わせることで、任意の深さにネストされたオブジェクトから条件に合うプロパティを効率的に削除できます。
なお、この手法は元のオブジェクトを直接変更する(ミューテートする)方式です。元データを保持したい場合は、事前にディープコピーを作成しておくか、イミュータブルなアプローチで新しいオブジェクトを生成する方法を検討してください。

  1. JavaScriptでオブジェクトに特定のプロパティが存在するか確認する方法

    JavaScriptでオブジェクトのプロパティ存在を確認する方法 JavaScriptでは、オブジェクトに特定のプロパティが存在するかどうかを確認したい場面がよくあります。最も基本的な方法は、すべてのオブジェクトが持つhasOwnProperty()メソッドを使用することです。このメソッドは、指定したプロパティがオブジェクト自身に直接定義されている場合にtrueを返し、存在しない場合にはfalseを返します。 hasOwnProperty()メソッドの構文 object.hasOwnProperty(propertyName) propertyName: 存在を確認したいプロパティ名(文字列

  2. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta