時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

【解説】JavaScriptのObject.keys/values/entries【使い方】

記事内に広告を含みます

【解説】JavaScriptのObject.keys/values/entries【使い方】

JavaScriptのObjectで使える下記メソッドを解説していきます。

・Object.keys

・Object.values

・Object.entries

順に見ていきましょう。

Object.keys

「Object.keys」を使えば、オブジェクトの中のプロパティを配列として取得することができます。

書き方がこちら。

Object.keys(オブジェクト名);

例として下記コードを書いた結果の出力がこちら。

const apple = {
  name: 'りんご',
  color: '赤色',
  num: 3,
};


console.log(Object.keys(apple));
(3) ['name', 'color', 'num']

appleというオブジェクトのキーを、配列で取得することができました。

オブジェクトを配列として活用

配列として取得することができるので、オブジェクトを「for of」のループで活用することができます。

for(const key of Object.keys(apple)) {
  console.log(key);
}
【解説】JavaScriptのループ文をまとめてみた【for/while】

forEachで回すことも可能ですね!

Object.keys(apple).forEach((key) => {
  console.log(key);
});
【JavaScript】配列の各要素に処理をする方法【foreEach/map/filterなど】

Object.values

「Object.values」を使えば、オブジェクトの中の値を配列として取得することができます。

書き方がこちら。

Object.values(オブジェクト名);

例として下記コードを実装して出力した結果がこちら。

const apple = {
  name: 'りんご',
  color: '赤色',
  num: 3,
};


console.log(Object.values(apple));
(3) ['りんご', '赤色', 3]

Object.entries

「Object.entries」を使えば、オブジェクトの中のキーと値をセットとした配列を、配列で取得することができます。

書き方がこちら。

Object.entries(オブジェクト名);

例として下記コードを実行した結果がこちら。

const apple = {
  name: 'りんご',
  color: '赤色',
  num: 3,
};


console.log(Object.entries(apple));
0 : (2) ['name', 'りんご']
1 : (2) ['color', '赤色']
2 : (2) ['num', 3]

キーと値が配列になったものが、配列として出力されていますね。

【解説】JavaScriptのObject.keys/values/entries【使い方】:まとめ

  • Object.keys⇒オブジェクトのキーを配列として取得
  • Object.values⇒オブジェクトの値を配列として取得
  • Object.entries⇒オブジェクトのキーと配列をセットにした配列を、配列として取得
ジト
ジト

オブジェクトのキーや値を配列として使いたい時はためしてみてね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA