JavaScriptでオブジェクトのキーと値を反復処理する方法

複数のキーと値のペアを取得するために、JavaScriptでオブジェクトを反復処理する必要があ この記事では、JavaScriptでオブジェクトプロパティをループする四つの異なる方法を見ていきます。ES6より前は、オブジェクトをループする唯一の方法は、オブジェクトをループする唯一の方法でした。

for…in ループ オブジェクトの反復処理を容易にするために、ES6でObject.keys()メソッドが導入されました。 その後、ES8では、Object.entries()Object.values()の二つの新しいメソッドが追加されました。 最新のメソッドは、オブジェクトを配列に変換し、配列ループメソッドを使用してその配列を反復処理します。

最初の方法から始めましょう！

for…in Loop

オブジェクトプロパティを反復処理する最も簡単で簡単な方法は、for...inステートメントを使用することです。 この方法は、Internet Explorer6以降を含むすべての最新および古いブラウザで動作します。ここでは、for...inループを使用してオブジェクトを反復処理する例を示します:p>

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

for...inループの問題は、プロトタイプチェーン内のプロパティも反復処理することです。 JavaScriptのオブジェクトはプロトタイプからプロパティを継承できるため、fo...inステートメントはこれらのプロパティもループします。

オブジェクトのループ中にプロトタイププロパティを反復処理しないようにするには、hasOwnProperty()for...inhasOwnProperty()メソッドに依存する必要はなくなりました。 利用可能なより良い方法があります。

オブジェクト。keys()メソッド

Object.keys()メソッドはES6で導入されました。 これは、反復処理するオブジェクトを引数として受け取り、すべてのプロパティ名（またはキー）を含む配列を返します。その後、forEach()などの任意の配列ループメソッドを使用して、配列を反復処理し、各プロパティの値を取得できます。ここに例があります：

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

上記の関数宣言では、ES6構文を使用しました。 私はあなたがすでにES6、特に矢印関数に精通していると仮定します。 ES6を初めて使用する場合は、arrow functions guideを参照して、ES6について学習してください。

オブジェクト。values()メソッド

オブジェクト。values()メソッドはES8で導入され、Object.key()の反対を行います。 オブジェクト内のすべてのプロパティの値を配列として返します。 その後、任意の配列ループメソッドを使用してvalues配列をループできます。

例を見てみましょう：

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

オブジェクト。entries()メソッド

オブジェクト。entries()は、ES8で導入された別のメソッドであり、オブジェクトのトラバースに使用できます。 オブジェクト内の値の配列を作成するObject.values()Object.entries()は配列の配列を生成します。 各内部配列には2つの要素があります。 最初の要素はプロパティで、2番目の要素は値です。

ここに例があります:p>

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

Object.entries()によって返された配列を反復処理するには、forを使用することができます。..以下に示すように、ループまたはforEach()メソッドのうち：

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

結論

これは、JavaScriptでオブジェクトプロパティを反復処理するためのすべてです。 このタスクを達成するために、4つの異なる方法を検討しました。 古いブラウザをサポートしたい場合は、for...inObject.keys()Object.values()Object.entries()。

✌ ️この記事のように？ Twitterで@attacomsianをフォローしてください。 また、LinkedInとDEVで私に従うこともできます。 RSSの供給を予約購読しなさい。 あなたは私の記事を読んで楽しみ、無料のチュートリアルを作成し続けるために私をサポートしたい場合は、♥私にコーヒー（コスト$5）を購入します。

♥