javascript笔记

day05流程控制语句和this及自定义属性

## 1.回顾

```js

== 和 ===的区别

如何操作标签属性？

```

## 2.流程控制语句

- 顺序结构

- 选择结构(分支结构)：if if-else  if-else if -else switch

- 循环结构(for while do-while for-in)

### 2.1for循环

```js

for(初始化循环变量;循环判断条件;更新循环变量){

  重复执行的代码(循环体)

}

```

### 2.2双重for循环

- 基础用法

```js

<script>

        // 双重for循环

        for (var i = 0; i < 5; i++) {//i = 0 1 2 3 4

            for (var j = 0; j < 3; j++) {

                console.log("文字");

            }

        }

        /*

            i=0

                j=0 1 2

            i=1

                j=0 1 2

            i=2

                j=0 1 2

            i=3

                j=0 1 2

            i=4

                j=0 1 2

            i=5

        */

 

        //双重for循环数组

        var arr = [

            ["哈哈", "呵呵", "嘻嘻", null],//4

            ["1", "2", "3"],//3

            ["周一", "周二", "周三"],//3

            [true, false]//3

        ];

        // console.log(arr[0][0]);//"哈哈"

        // console.log(arr[0][1]);//"呵呵"

        // console.log(arr[0][2]);//"嘻嘻"

        // console.log(arr[1][0]);//"1"

        // console.log(arr[1][1])//"2"

        // console.log(arr[1][2])//"3"

        // console.log(arr[2][0])//"周一"

        // console.log(arr[2][1])//"周二"

        // console.log(arr[2][2])//"周三"

 

        for (var i = 0; i < 3; i++) {//外层循环 i = 0 1 2

            for (var j = 0; j < 3; j++) {

                // console.log(i, j);

                console.log(arr[i][j]);

            }

        }

        //循环次数根据length确定

        for (var i = 0; i < arr.length; i++) {//外层循环 i = 0 1 2

            for (var j = 0; j < arr[i].length; j++) {

                // console.log(i, j);

                console.log(arr[i][j]);

            }

        }

    </script>

```

- 双重for循环生成标签

```js

<script>

        // 模拟后台的数据结构

        var arr = [

            ["唐朝诡事录", "诛仙", "庆余年", "雪中悍刀行", "仙剑奇侠传3", "行尸走肉"],

            ["流浪地球", "绿皮书", "肖申克的救赎", "寄生虫", "釜山行", "谋杀1"],

            ["火影忍者", "蜡笔小新", "东京喰种", "名侦探柯南"],

            ["火影忍者", "蜡笔小新", "东京喰种", "名侦探柯南1"],

        ]

        // arr[0] 给第一个ul  arr[1]  给第二个ul  arr[2]  给第三个ul

        var oUl = document.getElementsByTagName("ul");

 

        // for (var i = 0; i < arr[0].length; i++) {

        //     oUl[0].innerHTML += "<li>" + arr[0][i] + "</li>";

        // }

        // for (var i = 0; i < arr[1].length; i++) {

        //     oUl[1].innerHTML += "<li>" + arr[1][i] + "</li>";

        // }

        // for (var i = 0; i < arr[2].length; i++) {

        //     oUl[2].innerHTML += "<li>" + arr[2][i] + "</li>";

        // }

        // 双重for循环

        for (var j = 0; j < arr.length; j++) {//j = 0 1 2

            for (var i = 0; i < arr[j].length; i++) {

                oUl[j].innerHTML += "<li>" + arr[j][i] + "</li>";

            }

        }

        /*

            j = 0

                i= 0 i<arr[0].length i++

                    oul[0].inerHTML = "<li>"+arr[0][i]+"</li>"

            j = 1

                i=0 i<arr[1].length i++

                     oul[1].inerHTML = "<li>"+arr[1][i]+"</li>"

        */

    </script>

```

### 2.3while循环

- 基础语法

```js

  1.初始化循环变量

            while(循环结束条件){

                重复执行的代码(循环体)

                更新循环条件

            }

```

- 基础使用

```js

 <script>

        for (var i = 1; i <= 10; i++) {

            console.log(i);

        }

        //输出1-10之间的数

        var i = 1;

        while (i <= 10) {

            console.log("while", i);

            i++;

        }

    </script>

```

### 2.4do-while循环

- 基础语法

```js

 1.初始化循环变量;

     do{

          循环体;

           更新循环变量;

    }while(循环判断条件)

```

- 使用

```js

 <script>

        //1-10之间的数

        var i = 1;

        do {

            console.log(i);

            i++

        } while (i <= 10)

    </script>

```

- ==while和do-while的区别==

```js

while：先判断后执行，如果初始条件为false  循环体一次也不执行

do-while:先执行后判断，如果初始条件为false 循环体至少会执行一次

```

### 2.5break和continue

- break 结束整个循环

- continue 结束本次循环

```js

 <script>

        for (var i = 1; i <= 10; i++) {

            // 吃到第5个水饺的时候 碗里面进了一个苍蝇

            if (i == 5) {

                console.log("掉进去一个苍蝇");

                break;//结束后面整个循环

            }

            console.log("这是第" + i + "个水饺")

        }

        for (var i = 1; i <= 10; i++) {

            if (i == 5) {

                console.log("这个水饺掉了");

                continue;//结束本次循环

            }

            console.log("这是第" + i + "个水饺");

        }

    </script>

```