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

JavaScriptでネストされたオブジェクトのキーが存在するかどうかを確認する方法

JavaScriptでは、深くネストされたオブジェクトのプロパティにアクセスする際、途中の階層が存在するかどうかを事前に確認したいケースがよくあります。この記事では、任意の数のキーを受け取り、そのネストされたパスがオブジェクト内に存在するかどうかを判定する関数の実装方法を解説します。

前提となるオブジェクトの例

まず、次のようなオブジェクトへの参照があるとします。

let test = {};

このオブジェクトには、後から次のようにネストされたオブジェクトが設定される可能性があります。

test = {level1: {level2: {level3: "level3"}}};

要件

ここで求められるのは、第一引数としてオブジェクトを受け取り、それ以降の引数として任意の数のキー文字列を受け取るJavaScript関数を作成することです。

この関数は、引数として渡されたキーの組み合わせが示すネストされた構造が、オブジェクト内に実際に存在するかどうかを判定する必要があります。すべてのキーが順番に存在すればtrueを返し、途中で一つでも存在しないキーがあればfalseを返します。

実装コード

以下がその実装例です。

const checkNested = function(obj = {}){
    const args = Array.prototype.slice.call(arguments, 1);
    for (let i = 0; i < args.length; i++) {
        if (!obj || !obj.hasOwnProperty(args[i])) {
            return false;
        }
        obj = obj[args[i]];
   };
    return true;
}
let test = {
    level1:{
        level2:{
            level3:'level3'
        }
    }
};
console.log(checkNested(test, 'level1', 'level2', 'level3'));
console.log(checkNested(test, 'level1', 'level2', 'foo'));

実行結果

コンソールに出力される結果は次のとおりです。

true
false

コードのポイント

  • Array.prototype.slice.call(arguments, 1)を使用することで、第一引数(オブジェクト)を除いた残りの引数すべてを配列として取得しています。
  • ループ内では、現在のオブジェクトが有効であり、かつhasOwnProperty()によって指定されたキーが直接のプロパティとして存在するかをチェックします。
  • キーが存在する場合は、obj = obj[args[i]]によって一段深い階層へ移動し、次のキーの検証に進みます。
  • 途中で無効なオブジェクトや存在しないキーが見つかった時点で即座にfalseを返すため、余計な処理を行いません。

このアプローチにより、安全に深くネストされたプロパティの存在を確認でき、undefinednullにアクセスしてエラーが発生するリスクを回避できます。

  1. 【JavaScript】配列内のネストされたオブジェクトの値を合計する方法

    この記事では、JavaScriptを使って、配列内にネストされた(入れ子構造の)オブジェクトの値を合計する方法を解説します。サンプルコードでは、JSONデータの複数階層に格納された数値(costNum)を順番に取り出し、その合計をブラウザ上に表示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d

  2. 【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

    はじめにJavaScriptでオブジェクトごとに一意のIDを作成したい場合、Symbol()を使うのが最も簡単かつ確実な方法です。Symbolは呼び出されるたびに必ず新しい一意の値を生成するため、たとえ同じ説明文字列を渡しても、二度と同じ値にはなりません。以下は、各オブジェクトに対して一意のIDを作成するサンプルコードです。実装例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp