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>
```