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

文字列キーを使ってネストされたJavaScriptオブジェクトに安全にアクセスする方法

JavaScriptでネストされたオブジェクトのプロパティにアクセスする際、存在しないパスを指定するとエラーが発生する可能性があります。そんなときに便利なのが、lodashライブラリが提供する get メソッドです。このメソッドを使えば、任意の階層のプロパティを安全に取得できます。

第一階層のプロパティへのアクセスは比較的シンプルですが、深くネストされたプロパティへのアクセスは注意が必要です。独自の実装で対応するよりも、lodashのように十分にテストされたライブラリを活用するのがおすすめです。

lodashのgetメソッドを使ったアクセス方法

lodashの get メソッドを使用すると、以下のように深くネストされたオブジェクトにアクセスできます。

let _ = require("lodash");
let obj = {
    a: {
        b: {
            foo: "test"
        },
        c: 2
    }
};
console.log(_.get(obj, "a.b.foo"));
console.log(_.get(obj, "a.c"));
console.log(_.get(obj, "a.test"));
console.log(_.get(obj, "a.test.x"));

出力結果

上記のコードを実行すると、次のような出力が得られます。

test
2
undefined
undefined

注目すべき点として、存在しないパス(a.testa.test.x)を指定してもエラーが発生せず、単に undefined が返される点が挙げられます。これにより、安全にプロパティへアクセスできるのです。

独自のgetProp関数を実装する

外部ライブラリに依存したくない場合は、以下のように再帰処理を使って独自の getProp 関数を定義することもできます。

const getProp = (object, path) => {
    if (path.length === 1) return object[path[0]];
    else if (path.length === 0) throw error;
    else {
        if (object[path[0]]) return getProp(object[path[0]], path.slice(1));
        else {
            object[path[0]] = {};
            return getProp(object[path[0]], path.slice(1));
        }
    }
};

この関数は、パスを配列として渡して使用します。

使用例

var obj = {
    level1:{
        level2:{
            level3:{
                name: "Foo"
            }
        },
        anotherLevel2: "bar"
    }
};
console.log(getProp(obj, ["level1", "level2"]));

出力結果

実行すると、以下のオブジェクトが出力されます。

{level3: {name: "Foo"}}

まとめ

ネストされたオブジェクトへの安全なアクセスには、lodashの get メソッドを使うのが最も手軽で信頼性の高い方法です。一方、依存関係を減らしたい場合や特殊な要件がある場合は、再帰を使った独自関数の実装も有効な選択肢となります。プロジェクトの規模や要件に応じて、適切な方法を選びましょう。

  1. セパレータ区切りの文字列をJavaScriptでオブジェクトの配列に変換する方法

    JavaScriptでは、特定のセパレータ(区切り文字)で連結された文字列を、扱いやすいデータ構造へ変換したい場面がよくあります。本記事では、「|」で区切られた文字列を、キーと値のペアを持つオブジェクトの配列へ変換する方法を解説します。問題の概要例として、次のような文字列が与えられたとします。const str = Option 1|false|Option 2|false|Option 3|false|Option 4|true;この文字列は、「オプション名」と「真偽値」が交互に「|」で連結された形式になっています。ここで求められるのは、この文字列を入力として受け取り、「|」で分割しながらオ

  2. JavaScriptで数値と文字数が一致する文字列を検証する方法

    問題文字列 str を引数として受け取るJavaScript関数を作成することを考えます。この関数は、文字列内の英字部分を、その直前にある数字に基づいて検証する必要があります。具体的には、文字列を数字で分割し、各数字とそれに続く部分文字列の文字数を比較します。すべての組み合わせが一致していれば、その文字列は有効であるとして true を返し、一箇所でも不一致があれば false を返します。例えば、以下のような文字列を見てみましょう。5hello4from2meこの文字列に対しては、true を返す必要があります。なぜなら、数字で分割すると「hello」「from」「me」という3つの部分文字