JavaScriptの Object.entries
メソッドは、指定されたオブジェクト自身の列挙可能な(enumerable)プロパティのキーと値のペアを、配列の配列として返すために使用されます。
これにより、オブジェクトのプロパティをループ処理したり、キーと値のペアをまとめて操作したりする際に非常に便利です。
Object.keys
がキーの配列を、Object.values
が値の配列を返すのに対し、Object.entries
は両方を同時に取得できるため、オブジェクトの反復処理において非常に強力なツールとなります。
この記事では、Object.entries
メソッドの基本的な使い方、引数、戻り値、主要な使用例、そして使用する際の重要な注意点について解説します。
Object.entriesメソッドの基本的な構文
Object.entries
メソッドの基本的な構文は以下の通りです。
Object.entries(obj)
obj
: 必須。キーと値のペアを取得したいオブジェクトです。
obj (引数)
- 必須です。
- キーと値のペアを取得したいオブジェクトを指定します。
obj
がプリミティブ値(文字列、数値、真偽値など)の場合、内部的にオブジェクトに変換されてからプロパティが抽出されます。例えば、文字列を渡すと、その文字列のインデックスと文字のペアが返されます(例:"abc"
を渡すと[['0', 'a'], ['1', 'b'], ['2', 'c']]
)null
またはundefined
を渡すと、TypeError
が発生します。
Object.entriesの戻り値
指定されたオブジェクトの列挙可能な自身のプロパティの[キー, 値]
ペアの配列が返されます。
元のオブジェクトは変更されません。
Object.entriesメソッドを使ってみる
Object.entries
のメソッドを使って、動作を確認してみます。
例1:基本的なオブジェクトでの使用
シンプルなオブジェクトのキーと値のペアを取得します。
const user = {
name: 'Alice',
age: 30,
city: 'New York'
};
const entries = Object.entries(user);
console.log(entries);
/*
出力:
[
[ 'name', 'Alice' ],
[ 'age', 30 ],
[ 'city', 'New York' ]
]
*/
user
オブジェクトを作成して、Object.entries
に渡しています。
これでuser
オブジェクトの各プロパティが、[キー, 値]
の形式の配列として取得されます。
そして、それらがさらに配列としてまとめられていることがわかります。
出力すると、プロパティと値が配列にまとめられていることが確認できました。
例2: for…ofループとの組み合わせ
Object.entries
は、for...of
ループと組み合わせることで、オブジェクトのプロパティを簡単に反復処理できます。
const product = {
id: 'P001',
name: 'Wireless Mouse',
price: 25.99,
inStock: true
};
console.log("--- 商品情報 ---");
for (const [key, value] of Object.entries(product)) {
console.log(`${key}: ${value}`);
}
/*
出力:
--- 商品情報 ---
id: P001
name: Wireless Mouse
price: 25.99
inStock: true
*/
for...of
を使用して、Object.entries
にproduct
オブジェクトを渡した結果を使用しています。
そして、分割代入([key, value]
)を使用することで、各ペアのキーと値を直接変数に割り当てて、読みやすいコードで処理できます。
結果を確認すると、それぞれプロパティとキーがある間ループして
key
変数にオブジェクトのプロパティ、value
変数に値が入ってくることが確認できました。
例3:オブジェクトをMapオブジェクトに変換する
Object.entries
は、オブジェクトをMap
オブジェクトに変換する際の中間ステップとして非常に便利です。
const settings = {
theme: 'dark',
notifications: true,
language: 'ja'
};
// Object.entries()でキーと値のペアの配列を取得し、Mapコンストラクタに渡す
const settingsMap = new Map(Object.entries(settings));
console.log(settingsMap);
// 出力: Map(3) { 'theme' => 'dark', 'notifications' => true, 'language' => 'ja' }
console.log(settingsMap.get('language')); // 出力: ja
new Map
でインスタンスを作るときに、Object.entries
の戻り値を使っています。
これで渡したオブジェクトがマップに変換されます。
Map
はキーの順序を保持し、任意の型のキーを使用できるため、オブジェクトの代替として利用されることがあります。
例4:数値キーを持つオブジェクト(配列のようなオブジェクト)
数値キーを持つオブジェクトの場合、Object.entries
は数値キーを昇順で返します。
const data = {
'10': 'Value 10',
'2': 'Value 2',
'5': 'Value 5',
'name': 'Test Data'
};
const entries = Object.entries(data);
console.log(entries);
/*
出力:
[
[ '2', 'Value 2' ],
[ '5', 'Value 5' ],
[ '10', 'Value 10' ],
[ 'name', 'Test Data' ]
]
*/
'2'
, '5'
, '10'
という文字列の数値キーが、数値として昇順に並べ替えられてから、文字列キーが追加されていることに注目してください。
Object.entries
を使った場合、このように要素がキーの昇順に並んで返ってきます。
Object.entriesを使う際の重要な注意点
Object.entriesを使う際の注意点です。
列挙可能な自身のプロパティのみを対象とする
Object.defineProperty
でenumerable: false
と設定されたプロパティは含まれません。- プロトタイプチェーン上の継承されたプロパティは含まれません。
const protoObj = { inheritedProp: 'I am inherited' };
const myObj = Object.create(protoObj);
myObj.ownProp = 'I am own';
Object.defineProperty(myObj, 'nonEnumerableProp', {
value: 'I am not enumerable',
enumerable: false // 列挙不可に設定
});
console.log(Object.entries(myObj));
// 出力: [ [ 'ownProp', 'I am own' ] ]
// inheritedProp と nonEnumerableProp は含まれない
シンボルプロパティは含まれない
Object.entries
は、Symbol
型のキーを持つプロパティを返しません。
シンボルプロパティを取得するにはObject.getOwnPropertySymbols
を使用します。
const objWithSymbol = {
a: 1,
[Symbol('b')]: 2
};
console.log(Object.entries(objWithSymbol));
// 出力: [ [ 'a', 1 ] ] (シンボルプロパティは含まれない)
順序
プロパティの順序は、for...in
ループで取得される順序と同じです。
これは、数値キーの場合は昇順、それ以外の文字列キーは定義順(またはエンジン依存)になります。
元のオブジェクトは変更されない
Object.entries
は元のオブジェクトを変更せず、新しい配列を返します。
nullまたはundefinedの引数
Object.entries(null)
やObject.entries(undefined)
を呼び出すとTypeError
が発生します。
まとめ
JavaScriptのObject.entries
メソッドは、オブジェクトの列挙可能な自身のプロパティを[キー, 値]
のペアの配列として取得するための非常に強力で便利なツールです。
for...of
ループと組み合わせることでオブジェクトの反復処理を簡潔に記述でき、Map
への変換など、様々なデータ操作に応用できます。
ただし、列挙可能な自身のプロパティのみを対象とすること、シンボルプロパティは含まれないこと、そして数値キーの順序付けの特性を理解して使用することが重要です。
これらの注意点を踏まえ、Object.entries
を効果的に活用し、JavaScriptアプリケーションにおけるオブジェクトデータの操作を効率化しましょう。
コメント