【JavaScript】Objectのkeyとvalueを取得する【Object.entries】

【JavaScript】Objectのkeyとvalueを取得する【Object.entries】

はじめに

コジマです。

Objectのkeyとvalueをそれぞれ変数として取りたいときありますよね。

これは習うより慣れろ。

この書き方覚えましょう。

const user = {
  id: 1,
  name: 'Tanaka',
  age: 30,
  sex: 'Male'
};

for (const [key, value] of Object.entries(user)) {
  console.log(`KEY is ${key}, VALUE is ${value}`);
}

出力結果

> "KEY is id, VALUE is 1"
> "KEY is name, VALUE is Tanaka"
> "KEY is age, VALUE is 30"
> "KEY is sex, VALUE is Male"

簡単に解説

Object.entries()というメソッドを使用します。
Object.entries()メソッドはオブジェクトを引数にとり、key, valueの配列を返します。

これをfor文で回してやることでkey, valueを取得できるというわけです。

Object.entiries()の戻り値を観察する

const user = {
  id: 1,
  name: 'Tanaka',
  age: 30,
  sex: 'Male'
};

console.log(Object.entries(user));

出力結果

> Array [Array ["id", 1], Array ["name", "Tanaka"], Array ["age", 30], Array ["sex", "Male"]]

実際にkey, valueを要素に持つ配列が返ってきてることが分かります。

さいごに

key, valueが欲しいときにはObject.entries()が使えるよ~って話でした。

公式ページは以下です。
Object.entries()

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


JavaScriptカテゴリの最新記事