ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptで「オブジェクト」を反復処理する方法

JavaScriptで「オブジェクト」を反復処理する方法

WBOY
リリース: 2024-07-17 05:57:39
オリジナル
518 人が閲覧しました

ays to iterate over “objects” in javascript

JavaScript オブジェクトにはキーと値のペアのプロパティが含まれており、オブジェクトの反復処理は配列とは異なります。オブジェクトは、for...in ループと Object.keys()、Object.values()、および Object.entries() を使用して反復できます。それぞれのメソッドの使用方法を見てみましょう:

1. for...in メソッドを使用

const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
 for(let key in persons){
     console.log(`${person[key]} : ${key}`)
}
   //output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'
ログイン後にコピー

2.Object.keys() の使用: メソッド

object.keys() は、引数としてオブジェクトを受け取り、キーの配列を返す JavaScript メソッドです

const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);
console.log(Object_keys)// [ 'name', 'age', 'occupation']```




ログイン後にコピー

object.keys() を使用してオブジェクトを反復処理できます


const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);

//here first i have used Object_keys array which i got from Object.keys(person);
for(let i = 0 ; i<Object_keys.length;i++){
  console.log(`${Object_keys[i]} : ${person[Object_keys[i]]}`);
}

//here i have used Object_keys array which i got from Object.keys(person);
for(let keys of Object_keys){
  console.log(`${keys} : ${person[keys]}`);
}

// here i have just directly use object.key() method
for(let keys of Object.keys(person)){
  console.log(`${keys}: ${person[keys]}`);
}

// all three ways will give same output
name : John
age : 30
occupation : Engineer


ログイン後にコピー

3.Object.entries() の使用:

Object.entries() は、引数としてオブジェクトを受け取り、キーと値のペアの 2 次元配列を返す JavaScript メソッドです


const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

const Object_keyValue = Object.entries(person);

//output
// [ [ 'name', 'John' ], [ 'age', 30 ], [ 'occupation', 'Engineer' ] ]


ログイン後にコピー

Object.entries() を使用してオブジェクトを反復処理できます


const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

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

//output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'


ログイン後にコピー

4. Object.values() の使用:

Object.values() は、オブジェクト独自の列挙可能なプロパティ値の配列を返します。これは、キーではなく値のみに興味がある場合に便利です。


const myObject = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

const values = Object.values(myObject);

for (const value of values) {
  console.log(value);
}



ログイン後にコピー

以上がJavaScriptで「オブジェクト」を反復処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート