IT~情報と技術

ドットインストール「詳解JavaScriptオブジェクト編」で勉強#13(オブジェクトを操作してみる)

ドットインストールというオンラインのプログラミング講座に「詳解JavaScript」というのがあります。

これでJavaScriptの基礎を勉強していきましょう。「基礎文法編」の次は「オブジェクト編」です。

今日のメイントピックは、オブジェクトを操作してみる、です。

詳解JavaScript

ドットインストールのレッスン一覧に「②もっと詳しくJavaScriptを学ぼう」というセクションがあります。

ここに3つ並んでいる

  • 詳解JavaScript 基礎文法編(全24回)
  • 詳解JavaScript オブジェクト編(全23回)
  • 詳解JavaScript DOM編(全15回)

で勉強していきたいと思います。

これまでの勉強した内容はこちらです。

オブジェクト編 #13

詳解JavaScript 基礎文法編 #13 オブジェクトを操作してみよう

今回は、Object.keys(), Object.values(), Object.entries()を使います。

プロパティ(Property)の名前(Key)と値(Value)

良い機会なので、オブジェクトのおさらいをしておきましょう。

  • オブジェクトを構成する1つ1つの要素:プロパティ(Property)
  • プロパティ:名前(Key)と(Value)で構成されている

Object.keys()

Object.keys() メソッドは、指定されたオブジェクトが持つ names プロパティの配列を、通常のループで取得するのと同じ順序で返します。(MDNのObject.keys()から)

オブジェクトの中にある名前(Key)の一覧を、配列として取ってきてくれます。

Object.values()

Object.values() メソッドは引数に与えたオブジェクトが所有する列挙可能なプロパティの値からなる配列を返します。(MDNのObject.values()から)

オブジェクトの中にある値(Value)の一覧を、配列として取ってきてくれます。

Object.entries()

Object.entries() メソッドは、引数に与えたオブジェクトが所有する、列挙可能なプロパティの組 [key, value] からなる配列を返します。(MDNのObject.entries()から)

オブジェクトの中にある名前(Key)と値(Value)の一覧を、配列として取ってきてくれます。

オブジェクトに対してやってみましょう

sampleというオブジェクトを作ってやってみます。

結果は上から以下のようになります。

イメージはこんな感じ。

配列に対してやってみましょう

参考までに、配列に対してだとどうなるかやってみましょう。

結果は上から以下のようになります。

キーとして、0から数える配列の順番を取得しています。

forEach()を使う

Object.keys()の返り値は配列なので、forEach()を使うことができます。

Object.keys()の返り値である配列 ["name", "score"]に対して、forEach()でアロー関数を指定しています。

結果はこのようになります。

講座では、テンプレートリテラルを使って表示が見やすくなるように工夫していました。

今日のまとめ

  • オブジェクトを構成するプロパティ(Property)は、名前(Key)と値(Value)の組み合わせ
  • Object.keys(), Object.value(), Object.properties()で取り出す
  • Object.keys()の返り値である配列に、forEach()を適用

超スローペースなプログラミング学習ですが、マイペースでぼちぼち続けています。

JavaScriptはちょっと難しいですが、がんばって一通りやってみましょう!