1
1

More than 3 years have passed since last update.

【JavaScript】Object.keysとforEachを使ったプロパティ取得

Last updated at Posted at 2020-05-04

【JavaScript】Object.keysとforEachを使ったプロパティ取得

オブジェクトのプロパティを取得する方法をまとめました。
手順は2つ。

・Object.keysを使い、プロパティと値を取得
・forEachを使い、それぞれを表示

キャラクターの座標情報を格納する定数characterPositionがあったとして


    const characterPosition  = {
        x: 100,
        y: 200,
        z: 9
    };

定数keysにプロパティ(x,y,z)と値を格納、出力します。


    const keys = Object.keys(characterPosition);
    keys.forEach(key => {
        console.log(`Key:${key} Value: ${characterPosition[key]}`);//テンプレートリテラル
    });

console.logの結果は次の通りになりました。


    Key:x Value: 100
    Key:y Value: 200
    Key:z Value: 9

追記:Object.entries()を使い更に短く


    Object.entries(characterPosition).forEach(([key,value])=>{
        console.log(`Key:${key} Value: ${value}`);
    });

・Object.keysはkeysを使いまわして返す
・Object.entriesはオブジェクトのエントリ(=中身)を組で返す
1個ずつ渡すか、グループで渡すかの違いと理解した。

参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

謝辞:@Mihiraghi
ありがとうございました。

1
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1