JavaScriptサイクル

JavaScriptには様々な循環方式があります.ここでは2つのサイクルを紹介します.それぞれfor とfor in です.そして、最後にforループで作成したリストのループの色を変える機能を実現します.forサイクル四部曲:

は、初期値var i=0を設定する.

循環実行の条件i＜5;

は、循環体の内容{[循環体]}

を実行する.

は各サイクルが完了したら、i＋アキュムレータ動作を実行します.

文法は以下の通りです

for (var i = 0; i < 10; i++) {
  //    
}

たとえば:

for (var i = 0; i < 10; i++) {
    console.log(i); //     0，1，2，3，4，5，6，7，8，9
}

break/continueは循環体の中でこの二つのキーワードに出会って、循環体の中で後のコードはもう実行しなくなりました.

for (var i = 0; i < 5; i++) {
        break; //       
        console.log(i); //     
    }
    for (var i = 0; i < 5; i++) {
        continue; //      ，        
        console.log(i);
    }

break:循環体の中でbreakが現れて、全体の循環は直接的に終わりました.i++最後の積算作業ももう行われません.continue:循環体の中で、continueが現れて、現在のこのラウンドのサイクルは終わって、次のサイクルを続けて、後のアキュムレータ操作は引き続き実行します.次は面接問題を見ます.

    for (var i = 0; i < 10; i++) {
        if (i <= 5) {
            i += 2;
            continue;
        }
        i += 3;
        break;
        console.log(i); //    
    }
    console.log(i); //    9

for inサイクルfor inサイクル:オブジェクトの属性名と属性値を循環させるために使用されます.まずオブジェクトを定義します.

    var obj = {
        name: 'derrick',
        age: 20,
        height: '180cm',
        hobby: 'coding',
        birtyday: '1/1'
    }

このオブジェクトの属性名と属性値を巡回するには、for inループが必要です.

    for (var key in obj) {
        console.log(key + ', ' + obj[key]);
        // key->   ，obj[key]->   
        //   for in  ，        [key]      ，       .key   
    }

注意点の対象の中でキーパッドの数が合っているかどうかは、何回繰り返しますか?順序問題:for inサイクルの場合は、まず数字の属性名(数字の小さいものから大きいものまで)を循環し、残りの属性名を書く順番で循環します.
実例

    //         ：
    //      li，         ，    class      ，    c1,    c2
    //               
    // document.getElementsByTagName('      ');
    //       （     ，   ），          (div, li, p...)       
    //           li，      ，         （     ），             
    //   (   )：                 ，    0   ，   0     li，   1     li, ... ,    n   n+1 li
    // length:        ，           li
    // oLis[0] ->           oLis[  ]
    //   DOM             .item(  )         -> oLis.item(0)

    var oList = document.getElementById('list');
    var oLis = oList.getElementsByTagName('li');
    for (var i = 0; i < oLis.length; i++) {
        // i = 0            li oLis[0]
        // i = 1            li oLis[1]
        var oLi = oLis[i]; //                  li   
        i % 2 === 0 ? oLi.className = 'c1' : oLi.className = 'c2';

        //      li        ，        ，      li          ，       li className  
        i % 2 === 0 ? oLi.dataClassName = 'c1' : oLi.dataClassName = 'c2';

        //      
        oLi.onmouseover = function () {
            this.className = 'c3';
        }
        //     
        oLi.onmouseout = function () {
            this.className = this.dataClassName;
        }
    }
</code></pre> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1186511969658707968"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">