ホームページ > ウェブフロントエンド > jsチュートリアル > ネストされた JavaScript オブジェクトを反復処理するにはどうすればよいでしょうか?

ネストされた JavaScript オブジェクトを反復処理するにはどうすればよいでしょうか?

Mary-Kate Olsen
リリース: 2024-11-03 05:24:31
オリジナル
723 人が閲覧しました

How Can You Iterate Through Nested JavaScript Objects?

ネストされた JavaScript オブジェクトの反復処理

ネストされた JavaScript オブジェクトの反復処理は、特に、特定のプロパティ値。以下の例を考えてみましょう:

var cars = {
  label: 'Autos',
  subs: [
    {
      label: 'SUVs',
      subs: []
    },
    {
      label: 'Trucks',
      subs: [
        {
          label: '2 Wheel Drive',
          subs: []
        },
        {
          label: '4 Wheel Drive',
          subs: [
            {
              label: 'Ford',
              subs: []
            },
            {
              label: 'Chevrolet',
              subs: []
            }
          ]
        }
      ]
    },
    {
      label: 'Sedan',
      subs: []
    }
  ]
};
ログイン後にコピー

再帰的反復アプローチ:

オブジェクト階層を深く横断するには、再帰的アプローチを利用できます:

const iterate = (obj) => {
    Object.keys(obj).forEach(key => {

    console.log(`key: ${key}, value: ${obj[key]}`)

    if (typeof obj[key] === 'object' && obj[key] !== null) {
            iterate(obj[key])
        }
    })
}
ログイン後にコピー

この関数はオブジェクトを再帰的に反復し、各レベルでキーと値のペアを出力します。検出されたプロパティが別のオブジェクトを保持している場合、関数はそのオブジェクトを引数として自身を呼び出します。

非再帰的反復アプローチ:

代替の非再帰的アプローチには、次のようなものがあります。スタック データ構造の使用:

const iterate = (obj) => {
    const stack = [obj];
    while (stack?.length > 0) {
        const currentObj = stack.pop();
        Object.keys(currentObj).forEach(key => {
            console.log(`key: ${key}, value: ${currentObj[key]}`);
            if (typeof currentObj[key] === 'object' && currentObj[key] !== null) {
                stack.push(currentObj[key]);
            }
        });
    }
};
ログイン後にコピー

この関数は、スタックを利用してオブジェクト階層を反復処理します。スタックから最後の要素をポップし、そのプロパティを反復処理します。プロパティがオブジェクトを保持している場合、さらなる反復のためにそのオブジェクトをスタックにプッシュします。

以上がネストされた JavaScript オブジェクトを反復処理するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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