循环结构
一 概念
#### 1、for循环
```js
for (循环变量①; 条件表达式②; 循环变量增量③) {
代码块④;
}
// 1.循环变量可以在外、在内声明
// 2.执行逻辑 ① ②④③ ... ②④③ ②,入口为①,出口为②,②④③个数为[0, n]
```
#### 2、while循环
```js
while (条件表达式) {
代码块;
}
```
#### 3、do...while循环
```js
do {
代码块;
} while (条件表达式);
```
#### 4、for...in循环
```js
obj = {"name": "zero", "age": 8}
for (k in obj) {
console.log(k, obj[k])
}
// 用于遍历对象:遍历的结果为key,通过[]语法访问对应的value
```
#### 5、for...of循环
```js
iter = ['a', 'b', 'c'];
for (i of iter) {
console.log(iter[i])
}
// 1.用于遍历可迭代对象:遍历结果为index,通过[]语法访问对应的value
// 2.ES6新增,可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等
```
#### 6、break,continue关键词
- break:结束本层循环
- continue:结束本次循环进入下一次循环
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环结构</title>
</head>
<body>
循环结构
</body>
<script type="text/javascript">
// 1.for循环
// 语法:
/*
for (循环变量①; 条件表达式②; 循环变量增量③) {
代码块④;
}
*/
// 执行的逻辑顺序 ① ②④③ ... ②④③ ② (②④③个数[0, n])
// for (var i = 0; i < 5; i++) {
// document.write("</br><h1 style='margin: 0'>学习使我快乐!</h1>");
// }
// 一条逻辑语句可以省略{}
// 2.while循环
// var i = 0;
// while (i < 5) {
// document.write("</br><h1 style='margin: 0'>学习使我快乐!</h1>");
// i++;
// }
// while可以解决不明确循环次数但知道循环出口条件的需求
// 3.do...while循环
// var i = 0;
// do {
// document.write("</br><h1 style='margin: 0'>学习使我快乐!</h1>");
// i++;
// } while (i < 5);
// do..while循环,循环体一定会被执行,至少执行一次
// 4.for...in循环
obj = {"name": "zero", "age": 8, 1: 100};
for (k in obj) {
console.log(k, obj[k])
}
// 对象的简单使用
console.log(obj["name"]);
console.log(obj[1]);
// 用于遍历对象:遍历的结果为key,通过[]语法访问对应的value
// 5.for...of迭代器
// iter = ['a', 'b', 'c'];
iter = 'abc';
for (v of iter) {
console.log(v)
}
// 1.用于遍历可迭代对象:遍历结果为value
// 2.ES6新增,可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等
// 6.关键词
// break:结束本层循环
// continue:结束本次循环,进入下一次循环
</script>
</html>