[解決済み] JavaScript、ネストされたオブジェクトのプロパティがNULL/未定義であることをチェックするエレガントな方法 [重複] (英語)
2022-08-12 18:14:45
質問
時々発生する問題ですが、例えば次のようなオブジェクトがあります。
user = {}
というオブジェクトがあり、アプリを使用しているうちに、このオブジェクトに値が入るようになります。たとえば、AJAX 呼び出しなどの後に、次のようにします。
user.loc = {
lat: 50,
long: 9
}
別の場所で
user.loc.lat
が存在するかどうかを調べたいのです。
if (user.loc.lat) {
// do something
}
存在しない場合は、エラーになります。もし
user.loc.lat
が
undefined
,
user.loc
はもちろんのこと
undefined
も同様です。
"Cannot read property 'lat' of null" - Dev Tools error
つまり、このようにチェックする必要があるんです。
if (user.loc) {
if (user.loc.lat) {
// do something
}
}
または
if (user.loc && user.loc.lat) {
// do something
}
これは本当にきれいではありませんし、オブジェクトが大きくなればなるほど、明らかに悪化します(10段階のネストを想像してみてください)。
それは
if(user.loc.lat)
を返すだけでなく
false
もし
user.loc
は
undefined
も同様です。
このような状況を確認するための理想的な方法は何でしょうか?
どのように解決するのですか?
このようなユーティリティ関数を使用することができます。
get = function(obj, key) {
return key.split(".").reduce(function(o, x) {
return (typeof o == "undefined" || o === null) ? o : o[x];
}, obj);
}
使用方法
get(user, 'loc.lat') // 50
get(user, 'loc.foo.bar') // undefined
または、値を取得せずにプロパティが存在するかどうかだけをチェックする場合。
has = function(obj, key) {
return key.split(".").every(function(x) {
if(typeof obj != "object" || obj === null || ! x in obj)
return false;
obj = obj[x];
return true;
});
}
if(has(user, 'loc.lat')) ...
関連
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] JavaScriptで値がオブジェクトであるかどうかを確認する
-
[解決済み] JavaScriptでオブジェクトのキー/プロパティの数を効率的にカウントする方法
-
[解決済み] JavaScript でオブジェクトが特定のプロパティを持つかどうかを確認するにはどうすればよいですか?
-
[解決済み] JavaScriptのnullとundefinedの違いは何ですか?
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] moment.jsでミュータビリティを回避するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ネストされたJavaScriptオブジェクトのキーが存在するかどうかをテストする
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] ECMAScriptとは?
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法