JS(ES6含む）での深い連想配列の変数チェック

以下のような場合、もっとシンプルにかけないものでしょうか？

 var info = {
"aaa":{
"bbb":{"ccc":1}
}
}

if(info.aaa.bbb.ccc==1){
//ここに処理を書く
}

ここで info.aaa.bbb.ccc==1のチェックするためには、

if(info && info.aaa && info.aaa.bbb && info.aaa.bbb.ccc && info.aaa.bbb.ccc==1)

とキーごとに存在チェックを書いていかなければならないのでしょうか？

phpでいうと、

if(empty($info['aaa']['bbb']['ccc'])==false && $info['aaa']['bbb']['ccc']==1)

のようにキーの存在チェックは一気にできますが、JSではできないのでしょうか？

ES6を使ってbabelで es2015に変換して使っていますので、ES6ならシンプルに書けるならそれでも結構です。

行動規範の内容に同意します

回答4件

前半がnullやundefinedならそのままスルーされる?.演算子が「Optional Chaining」として、追加を提案中の段階です（tc39/proposal-optional-chaining）。Babelではプラグインを入れれば使うことも可能です。

javascript
1if(info?.aaa?.bbb?.ccc==1){
2//ここに処理を書く
3}

投稿2019/01/22 07:37

maisumakun

総合スコア146324

ar3qna

2019/01/22 07:41

おー！素晴らしいですね！これ試してみたいと思います。

行動規範の内容に同意します

ベストアンサー

こんにちは。

ご質問のような状況のとき、個人的によく使う手としては、info が持っているべきプロパティのデフォルト値という意味合いのオブジェクトを定義しておいて、Lodash の _.defaultsDeep によって、対象オブジェクトに足りないプロパティをそのデフォルト値を集めたオブジェクトから追加することです。

例えば、以下のように DEFAULT_INFO を用意しておきます。

javascript
1const DEFAULT_INFO = {
2  aaa: { 
3    bbb: { ccc : 0, }, 
4    bbb2: { ccc2 : 0, },
5  },
6};

その上で、DEFAULT_INFO の持つプロパティの一部は持っているかもしれないけれども、すべてを持っているかどうかは分からないオブジェクトを参照している変数 info があった場合に、これを使う前に

javascript
1_.defaultsDeep(info, DEFAULT_INFO);

とします。そうすると、 DEFAULT_INFO にはあって、info には無いプロパティを、infoに追加してくれて、かつ、DEFAULT_INFO とinfo の両方にあるプロパティはDEFAULT_INFOの値で上書きしない、ということをやってくれます。

たとえば、infoに { aaa: { bbb2: { ccc2: 1 } } } が入っていたときに、
_.defaultsDeep(info, DEFAULT_INFO);
をやっておくと、以下のようになります。

javascript
1console.log(info.aaa.bbb2.ccc2);  // => 1
2console.log(info.aaa.bbb.ccc);  // => 0

動作確認用サンプル： https://jsfiddle.net/jun68ykt/Lm72k5jz/27/

投稿2019/01/22 18:11

jun68ykt

総合スコア9058

ar3qna

2019/01/22 18:43

ありがとうございます！Lodash初めて知りました。美しい解決方法ですね。素晴らしいです！ただ、今回のは一切の外部jsが使えなくてJQuery相当のものも最低限の処理を自前で作っていることもあってこの方法だといけないのですが、外部JS使えるところではぜひこちらの方法を参考にさせていただきます。ありがとうございました。

jun68ykt

2019/01/22 18:54

どういたしまして。Lodash、お勧めですよ。

行動規範の内容に同意します

先日全く同じ趣旨の質問がありましたね。
Javascript Objectのプロパティの存在チェックについて

babel使っているとのことなので、proposal-optional-chainingで一撃ですが、
ESLintとかが上手く動かないようならLodashやRamda.jsを検討しても良いかもしれません。

投稿2019/01/22 07:42

miyabi-sun

総合スコア21222

ar3qna

2019/01/22 18:46

ありがとうございます。こちらの質問を見つけられていませんでした。同じことでしたね。先の人に教えていただいたproposal-optional-chainingをインストールして動かそうとしてみたのですが、babel7をうまく動かせなくて、チェックする関数を作って対応しました。せっかくbabel使ってるんだからそういう部分は任せてしまいたかったんですが、落ち着いたらbabelでもトライしてみたいと思います。ありがとうございました。

行動規範の内容に同意します

チェックする関数を作ってそれを呼び出すと良いのではないでしょうか。