読者です 読者をやめる 読者になる 読者になる

†でおきしブログ†

もうすぐ夏ですねヽ(•̀ω•́ )ゝ✧

【JavaScript】オブジェクトkey名に変数を使う2つの方法

☆html

See the Pen オブジェクトkey名を変数に by deokisi (@deokisi) on CodePen.


☆結果

See the Pen オブジェクトkey名を変数に by deokisi (@deokisi) on CodePen.


☆蛇足

★ES6に対応していないブラウザだと

結果が以下のように表示されてdivの値が非表示になるかと思います

連想配列的指定
〇直接指定

これは直接指定している箇所で構文エラーが起きているためです。
ChromeとかFireFoxなら動作しますけどES6に対応していないブラウザは多いです。

ECMAScript 6 compatibility table

現状はkey名を変数にしたい場合には連想配列的な指定をしとくが吉かな。

★そもそもKey名を変数(variable)にする必要が?

コーディング中、オブジェクトのkey名を変数にしたい場合がありました

  1. key名を使って処理を振り分けている
  2. 同様なオブジェクト構造で、key名だけ変えてvalueをセットしたい
  3. オブジェクト自体を複数用意すれば良いけれど、それだとスマートじゃない
    • …しかし、結果的にはスマートにならなかった(・・;)

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

広告を非表示にする