jsでオブジェクトのプロパティをトラバースする方法

ここに画像の説明を挿入します

JavaScript では、オブジェクトのプロパティを反復処理する方法が数多くありますが、パフォーマンスに大きな違いはありません。ほとんどのユースケースでは、for-inループまたはObject.keys()メソッドを使用するのが最も一般的です。

ただし、微細な最適化を求め、多数のオブジェクトを反復処理する必要がある場合は、パフォーマンスを向上させるために次のオプションを検討してください。

for-inループを使用します:

for-inループは、オブジェクトのプロパティを反復処理する基本的な方法です。古い JavaScript エンジンではパフォーマンスが若干劣る場合がありますが、最新のエンジンではパフォーマンスが最適化されています。

let obj = {
    
     a: 1, b: 2, c: 3 };
for (let key in obj) {
    
    
    console.log(key, obj[key]);
}

Object.keys()とを使用しますforEach:

Object.keys()このメソッドは、オブジェクトのすべてのキーを含む配列を返します。この配列は、をArray.prototype.forEach使用して反復処理できます。このアプローチは、場合によっては、特に大量のデータを処理する場合に若干高速になる可能性があります。

let obj = {
    
     a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(key => {
    
    
    console.log(key, obj[key]);
});

Object.entries()とを使用しますforEach:

Object.entries()指定されたオブジェクト独自の列挙可能なプロパティのキーと値のペアの配列を、ループを使用する場合と同じ順序で返しますfor...in(違いは、for-in ループがプロトタイプチェーン内のプロパティも列挙することです)。次に、を使用してArray.prototype.forEachこの配列を反復処理します。

let obj = {
    
     a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {
    
    
    console.log(key, value);
});

for...ofループを使用します:

for...ofループは ES6 で導入された配列を走査する新しい方法で、オブジェクトのプロパティを走査するためにも使用できます。パフォーマンスはfor-inループに似ています。

let obj = {
    
     a: 1, b: 2, c: 3 };
for (let [key, value] of Object.entries(obj)) {
    
    
    console.log(key, value);
}

mapとを使用しますObject.entries():

オブジェクトの値のみに興味があり、それらを新しい配列に変換したい場合は、Array.prototype.mapとを使用できますObject.entries()。

let obj = {
    
     a: 1, b: 2, c: 3 };
let values = Object.entries(obj).map(([key, value]) => value);
console.log(values); // [1, 2, 3]

注: オブジェクトを反復処理する場合は、オブジェクト自体を変更しないように注意してください。これにより、予期しない結果が生じる可能性があります。トラバース中にオブジェクトを変更する必要がある場合は、最初にコピーを作成できます。

jsでオブジェクトのプロパティをトラバースする方法

おすすめ