ネストされたオブジェクトの反復は、私がFlatiron学校で私の最初の月の間に私に紹介されたとき、私が私の頭を包むのに苦労した最大のもののうちの1つでした.それは本質的に難しい仕事であるということではありません、あるいは、この信じられないほど複雑な仕事であるということではありません.この説明において、私はそれをあなたが反復の範囲内でどこにいるかをよりよく理解するのを助ける小さい塊に壊します.
まず最初に、JavaScriptのオブジェクトデータにアクセスする方法がいくつかあります.

既知のキーを使用して手動でデータにアクセスします.objName['keyName'] //=> keyValue これはユーザ入力に便利です.objName.keyName //=> keyValue 厳密なキー名が既知の場合に使用します.

データにアクセスするには、オブジェクトクラスに接続されている関数を組み込みます.Object.keys(objName) //=> すべてのキーの配列を返します.Object.values(objName) //=> すべての値の配列を返します.Object.entries(objName) //=> プロパティ配列の配列を返します.

…を使う.ループ内のすべてのキーを繰り返します.

この例では、複数を使用します.ループ内の私たちの入れ子になったオブジェクトには、しかし、誰もが私は非常にお勧めしますmdn 上記の最初の2つの例で.
それで、入れ子にされたオブジェクトの反復について新参者に与える最良の説明について説明します.

タスク

つのチームに分けられたおもちゃ会社を持っていると言いましょう.そして、各々は彼ら自身の個々の生産と販売部門を持ちます:

const toyCompany = {
    redTeam: {
        production: {
            'redProdManager': 'Dan',
            'redWorkerOne': 'Steve',
            'redWorkerTwo': 'Larry'

        },
        sales: {
            'redSalesManager': 'Linda',
            'redSalesOne': 'Tony',
            'redSalesTwo': 'Matt'
        }
    },
    blueTeam: {
        production: {
            'blueProdManager': 'Stacy',
            'blueworkerOne': 'Kevin',
            'blueWorkerTwo': 'Robbie'

        },
        sales: {
            'blueSalesManager': 'Todd',
            'blueSalesOne': 'Jess',
            'blueSalesTwo': 'Nick'
        }
    }
};

私たちは、従業員の名前をストリングとして与えられる仕事タイトルを見つける機能を書くよう頼まれました.

最初に.インループ

これを行うには、我々の機能を作ることによって開始されますfindEmployee() そして、我々のために我々の最初を加えること...インループ.また、Aを加えることから始めますconsole.log() 我々の関数では、我々の最初のループが何を繰り返すかを正確に見る.その後、この関数を呼び出します.この場合、名前で従業員を探しています'Todd' :

function findEmployee(stringName) {
    for (const team in toyCompany) {
        console.log(team);
    }
}

findEmployee('Todd');

ここで我々のconsole.log(team) 生産// LOG: redTeam // LOG: blueTeamこれを壊してください.ループダウンで少し.私たちのループは、我々のループが第1のレベルのオブジェクトを通して繰り返されたログ文を見ることができますtoyCompany 変数、チーム名(すなわちRedTeam、BlueTeam).forループは本質的に言っています.
"各キーの最初のレベルのtoyCompany , 私はそのキーをconst team 次に、このループ内で定義されたコードを実行します."
我々の場合では、以下のコードは単純ですconsole.log(team) . そして、それはまさにコードがするものです.For redTeam , ループは、その名前をconst team その後、次のコードに進みましたconsole.log(team) . ループは、そのレベルで次のキーのために同じことをするために続けた.blueTeam . 2つのキーしかないので、ループはその後停止した.

…のためにインループ

それで、我々は最初のレベルを通して成功しました、しかし、現在、我々は次のレベルのオブジェクトにどうやって行きますか?そうですね.もう一つの...ループで!閉じるこの動画はお気に入りから削除されています.関数とコンソールにループします.log ()結果

function findEmployee(stringName) {
    for (const team in toyCompany) {
        const teamObj = toyCompany[team];
        for (const department in teamObj) {
            console.log(department);
        }
    }
}

findEmployee('Todd');

ここで我々のconsole.log(department) 生産// LOG: production // LOG: sales // LOG: production // LOG: salesそれを壊しましょう.我々のために我々の最初の後、それを決意しました.ループでは、我々は成功したredTeam and blueTeam . のための最初の後の{ carly括弧}内で起こるすべてを覚えておいてください.ループ内で1つのキーが発生します.したがって、すべてのコードが実行されますredTeam それから、すべてのコードはblueTeam .
最初にしたことは、別の変数を宣言することです.const teamObj = toyCompany[team] . 私はこれが混乱しているようであるかもしれないということを知っています、しかし、それを過剰に複雑にしないでください.この変数は以下の通りです.
ループの繰り返しでは、そのキーの中にすべてのオブジェクトデータを割り当てますteamObj ."
もしあなたがconsole.log(teamObj) 次のようになります.{production: {...}, sales: {...}} これはどちらかのチームオブジェクトの中のすべてですteamObj .
これは、我々が現在ネストしたオブジェクト(すなわち生産、販売)の部門レベルに達したことを意味します.変数を介してオブジェクトの部門レベルを参照できるようになりましたteamObj , 我々は、次を経由してそれらを反復するために設定されます.インループfor (const department in teamObj) {} このループは単に言っています.
"各キーの最初のレベルのteamObj , 私はそのキーをconst department 次に、このループ内で定義されたコードを実行します."
我々console.log(department) 私たちは、各部門(すなわち、生産、販売)が二度記録されているのを見ます.これは、最初のループがredTeam そして、2番目のループコンソールログproduction and sales . 次に、最初のループはblueTeam そして、2番目のループは再びコードを実行しますproduction and sales .

…のために3番目に.インループ

今私たちの最後のループにネストされたオブジェクトの最後のレベルに到達し、トッドを見つけるに潜ることができます.以下のコードを見てみましょう.

function findEmployee(employeeName) {
    for (const team in toyCompany) {
        const teamObj = toyCompany[team];
        for (const department in teamObj) {
            const jobTitleObj = teamObj[department];
            for (const jobTitle in jobTitleObj) {
                if (jobTitleObj[jobTitle] === employeeName) {
                    console.log(jobTitle);
                }
            }
        }
    }
};

結果// LOG: blueSalesManagerあなたが第2のループがどのように働いたかについて理解するならば、第3は単に最後にコードのわずかな変化による繰り返しです.それを通して歩くことができます.
我々の第2の...ループ内のオブジェクトの部門レベル(すなわち生産、販売)に私たちを得ている.番目のループは、従業員に私たちを取得します.再び変数を宣言しますconst jobTitleObj = teamObj[department] これは、一致する従業員名変数でジョブタイトルキーを含むオブジェクトの3番目のレベルに変数を割り当てます.速いconsole.log(jobTitleObj) つのプロパティを含むオブジェクト、各部門の各ジョブごとに1つのログの4つのログを生成します.以下は4つ目のログの例です.// LOG: {redProdManager: Dan, redWorkerOne: Steve, redWorkerTwo: Larry}次は次の3番目です.基本的に言うと、以下の通りです.
"各キーの最初のレベルのjobTitleObj , 私はそのキーをconst jobTitle 次に、このループ内で定義されたコードを実行します."
繰り返しますが、これは2番目とは異なります.インループ.
今、我々は、ジョブのタイトルキーにアクセスしているjobTitle 変数を使用すると、if文とjobTitle キーと値は何か、従業員の名前の別名を参照してください.オブジェクト名を使ってこれを行います.objName[keyName] ). 我々が加えるならばconsole.log(jobTitleObj[jobTitle]) …のために3番目の後.ループでは、それぞれの従業員の名前で12ログのリストを提出し、それぞれの従業員の名前をブラケット表記でアクセスできることを示しています.
if文は基本的に言っています.
従業員の名前が現在のキーに接続されている場合jobTitleObj[jobTitle] ) はemployeeName 関数が呼び出されたときに、その人のジョブのタイトルをログ出力します.console.log(jobtitle) )."
そしてfindEmployee('Todd'); あなたは結果を見るblueSalesManager どちらが、我々が我々の出発データにスクロールするならば、我々は正しいです!

まとめ

私はこの仕事を成し遂げることに関してより多くのコード効率的な方法があると非常に気づいていると言って、このポストを終えます、しかし、初心者として学習目的のために、この方法は物事がどのように働いているかの基本を理解するのを助けます.それは私自身のためのかなり急な学習曲線であることが証明され、おそらく私は想像できる他の人です.この説明に役立つ!
ハッピーコーディングとハッピー学習!