JavaScriptのObject.entriesについて簡単なサンプルコードで解説

JavaScriptのObject.entriesについて簡単なサンプルコードで解説

8 回閲覧されました

みなさんこんにちは、jonioです。

今回はJavaScriptのObject.entriesについて簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

Object.entriesとは

オブジェクトの要素のkeyとvalueのペアを配列に変換してそれを要素として新たに配列を作成します。

コードを見た方が理解できるのでコードで説明します。

サンプルコード

下記のコードで考えます。

const user = { id: 1, name: 'Jon', active: true };

オブジェクトの要素は「id: 1」・「name: ‘Jon’」・「active: true」があります。

「Object.entries(user)」の挙動は下記になります。

まずそれぞれの要素「id: 1」・「name: 'Jon'」・「active: true」を配列「[id: 1], [name: 'Jon'], [active: true]」に変換する。
[id: 1], [name: 'Jon'], [active: true]を要素とする配列[[id: 1], [name: 'Jon'], [active: true]]を作成する。

用途

例えばfor文を使って要素になる配列の要素を取り出すことができます。

下記のコードです。

const settings = { theme: 'dark', lang: 'ja', debug: false };

for (const [key, value] of Object.entries(settings)) {
  console.log(`${key} = ${value}`);
}

// 結果は以下
theme = dark
lang = ja
debug = false