▲TOPへ戻る

【javascript】連想配列(オブジェクト)の値を取得するObject.keys Object.values Object.entriesの使い方

以下の配列を使って、いろいろ値を取得したいと思います。

  const players = [
    {
      No: 1,
      grade: "二冠",
      name: "藤井",
      age: 19,
    },
    {
      No: 2,
      grade: "竜王",
      name: "豊島",
      age: 31,
    },
    {
      No: 3,
      grade: "名人",
      name: "渡辺",
      age: 37,
    },
    {
      No: 4,
      grade: "王座",
      name: "永瀬",
      age: 28,
    },
    {
      No: 5,
      grade: "九段",
      name: "羽生",
      age: 50,
    },
    {
      No: 6,
      grade: "九段",
      name: "谷川",
      age: 59,
    },
    {
      No: 7,
      grade: "六段",
      name: "増田",
      age: 23,
    },
    {
      No: 8,
      grade: "五段",
      name: "藤森",
      age: 34,
    },
  ];

連想配列の値を取得する

  console.log(players); //  配列内のオブジェクトをすべてを取得

結果

object
  console.log(players[0]); //  配列の1番目のオブジェクトを取得

結果

object
  console.log("No",players[0].No); // 配列1番目のオブジェクトの中を取得
  console.log("name",players[0].name);
  console.log("age",players[0].age);
  console.log("grade",players[0].grade);

結果

object

オブジェクトとは?

オブジェクトは{ }で囲み、中にはkey(キー)value(値)を含みます。

object

Object.keys

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

  players.forEach((player)=>{
    console.log(Object.keys(player));
  })

結果 => keyがすべて配列で取得されました。

object

Object.values

Object.values() メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 for...in ループで提供される場合と同じ順序で配列にして返します。

  players.forEach((player)=>{
    console.log(Object.values(player));
  })

結果 => valueがすべて配列で取得されました。

object

Object.entries

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

  players.forEach((player)=>{
    console.log(Object.entries(player));
  })

結果

object

Object.keys, Object.values, Object.entriesの使い方について簡単に説明しました。次回、これを使ってテーブルできれいに表にまとめてみたいと思います。

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<