オブジェクトからプロパティ名や値の一覧を配列で取得する(key, values, entries)

広告

Object オブジェクトのメソッドである keys メソッド、 values メソッド、 entries メソッドを使うことで、オブジェクトに含まれるプロパティ名やプロパティの値の一覧を配列として取得することができます。ここでは JavaScript でオブジェクトからプロパティ名や値の一覧を配列で取得する方法について解説します。

プロパティ名の一覧を取得する(keys)

オブジェクトに含まれるプロパティのプロパティ名の一覧を取得するには Object オブジェクトの keys メソッドを使います。書式は次の通りです。

Object.keys(オブジェクト)

引数に指定したオブジェクトに含まれるプロパティ名の一覧を配列として取得します。

次のサンプルをみてください。

let user = {
  name:'山田太郎', 
  age:32,
  address:'大阪府'
};

let keyArray = Object.keys(user);
console.log(keyArray);
--> (3) ["name", "age", "address"]

プロパティ名の一覧を取得する(keys)(1)

オブジェクトに含まれる 3 つのプロパティのプロパティ名を要素とした配列を取得することができました。それぞれのプロパティ名は文字列として配列に格納されています。

配列の要素を順に取得する Array オブジェクトの forEach メソッドをあわせて使うことでプロパティの値を順に取得することもできます。

let user = {
  name:'山田太郎', 
  age:32,
  address:'大阪府'
};

let keyArray = Object.keys(user);
keyArray.forEach(function(element){
  console.log(user[element]);
});
--> 山田太郎
    32
    大阪府

プロパティ名の一覧を取得する(keys)(2)

オブジェクトに含まれるプロパティ名の一覧を配列で取得したあと、配列から要素を順に取り出しオブジェクトのプロパティの値を順に取得しコンソールに表示しました。

※ forEach メソッドについては「配列の要素を順に取得する」を参照されてください。

プロパティの値の一覧を取得する(values)

オブジェクトに含まれるプロパティの値の一覧を取得するには Object オブジェクトの values メソッドを使います。書式は次の通りです。

Object.values(オブジェクト)

引数に指定したオブジェクトに含まれるプロパティの値の一覧を配列として取得します。

次のサンプルをみてください。

let user = {
  name:'山田太郎', 
  age:32,
  address:'大阪府'
};

let valueArray = Object.values(user);
console.log(valueArray);
--> (3) ["山田太郎", 32, "大阪府"]

プロパティの値の一覧を取得する(values)(1)

オブジェクトに含まれる 3 つのプロパティの値を要素とした配列を取得することができました。

プロパティの名前と値の一覧を取得する(entries)

オブジェクトに含まれるプロパティの名前と値のペアの一覧を取得するには Object オブジェクトの entries メソッドを使います。書式は次の通りです。

Object.entries(オブジェクト)

引数に指定したオブジェクトに含まれるプロパティ毎に [プロパティ名, 値] の一覧を配列として取得します。

次のサンプルをみてください。

let user = {
  name:'山田太郎', 
  age:32,
  address:'大阪府'
};

let propertyArray = Object.entries(user);
propertyArray.forEach(function(element){
  console.log(element);
});
--> (2) ["name", "山田太郎"]
    (2) ["age", 32]
    (2) ["address", "大阪府"]

プロパティの名前と値の一覧を取得する(entries)(1)

オブジェクトに含まれる 3 つのプロパティについて、プロパティ名と値を配列にして要素とした配列を取得することができました。

-- --

JavaScript でオブジェクトからプロパティ名や値の一覧を配列で取得する方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。