让一段特定的代码执行指定的次数。
一、for循环
1.1、for的语法及简单使用
语法 :
for( 表达式 1；条件表达式 2；表达式 3){
条件成立执行的代码块 }
for(初始化循环变量;判断条件(循环结束的条件);更新循环变量）{
循环体
}
例1：控制台输出 1-20
for(var i = 1;i <= 20;i++){
console.log(i);
}
上面的写法还可以这样写：
var i = 1
for(;i <= 20;){
console.log(i);
++i
}
1.2、for循环的执行过程
for(var i = 1;i <= 10;i++){
console.log(i);
}
上面的循环的执行过程为：
for（1. 初始化循环变量;2. 判断条件（循环结束的条件）;4. 更新循环变量）{
3. 循环体
}
执行步骤 ：
- 初始化循环变量 i= 1;
- 判断，判断条件是否成立 1<=10;
a. 条件成立，执行循环体，然后到第 3 步;
b. 条件不成立，结束循环; - 更新循环变量 i = i + 1;
- 回到第二步开始执行。
循环三要素：初始化循环变量，跳出循环的条件，更新循环变量，在循环中必须有结
束循环的条件，要更新循环变量，否则会成为死循环。
1.3、for循环操作标签
例：给所有的div标签都添加点击事件，并打印当前节点的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div class="Liuqing"> Liuqing1 </div>
<div class="Liuqing"> Liuqing2 </div>
<div class="Liuqing"> Liuqing3 </div>
<div class="Liuqing"> Liuqing4 </div>
<div class="Liuqing"> Liuqing5 </div>
<script>
var Liuqing = document.querySelectorAll('.Liuqing')
console.log(Liuqing, 'LiuqingLiuqing')
// 这里目前先使用 let 声明变量
for (let i = 0; i < Liuqing.length; i++) {
Liuqing[i].onclick = function () {
console.log(Liuqing[i], 'innerHTML')
}
}
</script>
</body>
</html>
这里点击了Liuqing1、Liuqing3、Liuqing5。
例2：循环生成 10 个标签p添加到第一个div中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div class="Liuqing"> Liuqing1 </div>
<div class="Liuqing"> Liuqing2 </div>
<div class="Liuqing"> Liuqing3 </div>
<div class="Liuqing"> Liuqing4 </div>
<div class="Liuqing"> Liuqing5 </div>
<script>
var Liuqing = document.querySelectorAll('.Liuqing')
console.log(Liuqing, 'LiuqingLiuqing')
// 这里目前先使用 let 声明变量
for (let i = 0; i < Liuqing.length; i++) {
Liuqing[i].onclick = function () {
console.log(Liuqing[i], 'innerHTML')
}
}
var box = Liuqing[0]
var boxStr = ''
for (let i = 0; i < 10; i++) {
boxStr += '<p>我是p</>'
}
box.innerHTML = boxStr
</script>
</body>
</html>
点击了Liuqing1、Liuqing2。
1.4、for循环嵌套 ( 双重 for 循环 )
例：实现下图所示图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div class="Liuqing"> Liuqing1 </div>
<div class="Liuqing"> Liuqing2 </div>
<div class="Liuqing"> Liuqing3 </div>
<div class="Liuqing"> Liuqing4 </div>
<div class="Liuqing"> Liuqing5 </div>
<script>
var Liuqing1 = document.getElementsByTagName("div")[0];
Liuqing1.innerHTML = ''
// 外循环控制行，内循环控制例
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
Liuqing1.innerHTML += "*";
}
Liuqing1.innerHTML += "<br>";
}
</script>
</body>
</html>
二、for-in循环
for-in 循环是专门为循环对象设置的，因为对象没有长度没有顺序，所以不能使用for 循环。
如果真想的话我们可以使用Object.keys和Object.values获取在进行for循环，这个后续说。
for-in循环可以循环数组和对象，推荐循环对象的时候使用。
语法：
for( var 键值 in 对象名){
操作对象}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div class="Liuqing"> Liuqing1 </div>
<script>
const obj = {
name: "LiuQing",
age: 18,
sex: '男'
}
for (const key in obj) {
console.log(key, "代表obj的属性：name,age,sex")
console.log(obj[key], "代表obj的属性值：LiuQing,18,男")
}
</script>
</body>
</html>
三、for-of循环
for-of循环不能循环对象！！！，可以循环字符串、数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div class="Liuqing"> Liuqing1 </div>
<script>
let str = '我是六卿！'
let arr = ['L', 'i', 'u', 'Q', 'i', 'n', 'g']
for (const key of str) {
console.log(key, '对应下边的值1')
}
console.log("==================")
for (const key of arr) {
console.log(key, '对应下边的值2')
}
console.log("==================")
console.log(arr.join(''))
</script>
</body>
</html>
四、while、do-while 循环
4.1、while
while 循环先判断后执行
例1：打印 1-20 的数字
var a = 1; // 初始化循环变量
while (a <= 20 ){ // 结束循环的条件
console.log(a);
a++; // 更新循环变量
}
执行步骤：初始化循环变量，判断条件，成立执行循环体，更新循环变量，判断条件，不成立结束。
4.2、do-while
跟 while 循环是一样的，只是 do-while 先执行，后判断。
例2：
var a = 0;
do {
console.log(a);
}while (a > 0);
两者的区别，只在第一次条件不成立的时候有区别，do-while 会执行一次，因为是先执行后判断。
五、break 与 continue
break 与 continue 都是在循环中，中止循环的操作。break 是结束循环，后面的循环都不再执行。continue 是结束本次循环，即本次循环中 continue 以后代码都不再执行，直接执行下一次循环。
break：终止当前循环体；
continue：跳出本次循环，继续下次循环；
例1：获取到数组中第一个偶数能被 2 整除
var arr = [1, 6, 9, 3, 4, 7, 5];
for (var k = 0; k < arr.length; k++) {
// 遍历
if (arr[k] % 2 === 0) {
console.log(arr[k]);
// 在中途结束循环
// break; // 跳出循环 ( 结束循环 )
continue;// 跳出本次循环 本次循环这行代码后面的语句不再执行，直接执行下一次循环
}
}
continue：
break：
以前写的：
JS循环for、for…of、for…in
