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

☆html

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

☆JavaScript(jQuery)

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を今すぐマスター！