Reading dynamic property on Object [JavaScript]

Reading dynamic property on Object [JavaScript]

Objectのkeyを抽出するには、Object.keys()を使います

const settings = {
    theme: "Dark",
    version: "2.4.1",
    beta: false
};

const keys = Object.keys(settings);
console.log(keys); // ["theme", "version", "beta"]

Object.keys()のObjectはglobal variable in Javascript.
Number.parseInt()のNumberと同じです。
Object.keys()を1まとまりで覚えると良いでしょう。

keyに対応する値を取得する

const user = {
    id: 1,
    name: "Sakura Miko",
    age: 18
};

const key = "id";
user[key]; // 1

keyという変数を使う場合、dot notation(.)は使えません(user.keyにすると、JavaScriptはkeyという名前のプロパティを探すが、存在しないため)。
この場合は、[]を使います。

keyに対応する値をすべて抽出する

const settings = {
    theme: "Dark",
    version: "2.4.1",
    beta: false
};

const keys = Object.keys(settings);
console.log(keys); // ["theme", "version", "beta"]
keys.forEach(key => {
    // log the value of every key dynamically
    console.log(settings[key]);
});

実行すると、下記のとおりコンソールに表示されます。

"Dark"
"2.4.1"
false

Objectのvalueをarrayの形で抽出する

Object.values()

const user = {
    id: 1,
    name: "Sam Green",
    age: 20
};

const values = Object.values(user);
console.log(values); // [1, "Sam Green", 20]

Objectのkey/valueペアをセットにして、arrayの形に抽出する

Object.entries()

const user = {
    id: 1,
    name: "Sam Green",
    age: 20
};

const entries = Object.entries(user);

上のコードを実行すると、

[
    ["id", 1],
    ["name", "Sam Green"],
    ["age", 20]
]

JavaScriptカテゴリの最新記事