前言
1.调试代码,找出代码中的问题经常使用debugger来打断点,而要能在准确位置打上断点, 就必须熟悉程序的执行流程。
2.流程控制语句有三种:顺序结构,分支结构和循环结构。
一.顺序结构(默认)
1.程序默认从上到下一句一句代码执行,这就是顺序结构。
2.若是某一行代码出现了错误,则后面的代码无法执行
<script>
console.log(1);
console.log(2);
console.log(3);
console.log(a);//报错
console.log(4);
console.log(5);
console.log(6);
debugger;
console.log(7);
console.log(8);
</script>
<script>
console.log(1);
console.log(2);
console.log(3);
console.log(a);
console.log(4);
console.log(5);
console.log(6);
// 上面打印了一个没有声明的变量, 所以出错了, 程序终止运行, 不会停在这里
debugger;
console.log(7);
console.log(8);
</script>
二.分支结构
1.if else
if(条件) {
// 条件为true执行这里的代码
} else {
// 条件为false执行这里的代码
}
2.三目运算符
<!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>Document</title>
</head>
<body>
<script>
var islogin = false;
var text = '';
text = islogin?'138*****000':'立即登录';
console.log('text',text);//控制台输出立即登录
</script>
</body>
</html>
3.switch
多重判断的分支结构, 主要用于多种一一对应的情况, 判断条件通常只有一个变量
<!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>Document</title>
</head>
<body>
<script>
var num = prompt('数字');//prompt输入进来的是一个字符串
switch (num*1) { //需要转数字
case 1:
alert(num);
break;
case 2:
alert(num);
break;
case 3:
alert(num);
break;
case 4:
alert(num);
break;
default:
alert('sb');
}
</script>
</body>
</html>
三.循环结构
1.标准for循环四部分(四部分不是必须的,只要能够正常运行,少那个都可以)
(1)循环变量初始值 var i = 0;
(2)循环条件 i<3;
(3)改变循环条件 i++
(4)循环体 {...}
内的代码就是循环体
循环运行规律:
-
第一轮 先执行第一部分, 再执行第二部分, 然后执行第四部分, 最后执行第三部分, 简称1243
-
第二轮开始 先执行第二部分(第一部不再执行), 然后执行第四部分, 最后执行第三部分,直到结束, 简称243
<script>
// 第1次 i=0 0<3=>true, 所以打印0
// 第2次 i=1 1<3=>true, 所以打印1
// 第3次 i=2 2<3=>true, 所以打印2
// 第4次 i=3 3<3=>false, 终止循环
for (var i = 0; i < 3; i++) {
console.log(i);
}
</script>
2.应用
1.应用demo
//利用循环计算0-10相加总和
<!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>Document</title>
</head>
<body>
<script>
var sum = 0;
for (var i=0;i<=10;i++){
sum =sum + i;
}
console.log('sum=',sum);
</script>
</body>
</html>
//利用循环输出多个字符串
<!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>Document</title>
</head>
<body>
<script>
var str = "";
for (var i = 0; i < 10; i++) {
str = str + `<li>我爱web前端</li>`;
console.log(str);
}
document.write("<ul>");
document.write(str);
document.write('</ul>');
</script>
</body>
</html>
2.练习
1.练习1: 计算1~100的和并输出到页面上
2.练习2: 使用for循环在网页上打印一个ul列表,列表有5个li,li的内容任意
进阶: 给li内容添加序号(从1开始);
//练习1
<!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>Document</title>
</head>
<body>
<script>
var sb =0;
for(var i=1;i<=100;i++){
sb += i;
}
console.log(sb);
</script>
</body>
</html>
//练习2
<!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>Document</title>
</head>
<body>
<script>
var str ='';
for(var i=0;i<5;i++){
str +=`<li>${i+1}.xxxxxxxxxx</li>`;
}
document.write(str);
</script>
</body>
</html>
3.continue和break
- for循环添加continue,continue后面的语句不再执行.直接进入下一次循环.
- for循环添加break后,当符合break条件,推出循环.
<!-- continue -->
<script>
for(var i=0;i<10;i++){
if (i ==5) {
continue;
};//输出了1234 6789,5没有输出
console.log(i);
}
</script>
<!-- break -->
<script>
for(var i=0;i<10;i++){
if(i === 5){
break;
};//输出1234 ,到五就跳出去了.不玩了
console.log(i)
}
</script>
5.while和do while
do while至少执行一次,因为先执行后判断
//while
<script>
var i=0;
while(i<10){
console.log(i);
i++
}//控制台打印出0-9
</script>
//do-while
<script>
var i=10;
do{
console.log(i);
i++;
}while(i<10);//控制台打印10,虽然不符合条件,但至少循环一次
</script>
6.for循环进阶应用
- 数组遍历
- 对象遍历
for循环进阶应用
(1)将数组成员输出到页面上
成员为基本数据类型
<script>
//数组的循环
var list =[1,2,3,4,5];
var str ='';
for(var i=0;i<list.length;i++){
str +=`<li>${list[i]}</li>`;
}
document.write(str);
</script>
(2)将数组成员输出到页面上
成员为引用类型
<script>
// 数组的循环
var list = [{
username: '张三1',
age: 18
},
{
username: '张三2',
age: 19
},
{
username: '张三3',
age: 20
},
{
username: '张三4',
age: 21
},
{
username: '张三5',
age: 22
},
];
var str ='';
for (var i=0;i<list.length;i++){
str +=`<li><span>${list[i].username}</span>
<span>${list[i].age}</span></li>`
}
document.write(str);
</script>
(3)对象遍历
<script>
var obj ={
name: '张三',
age: 18,
addr: '湖南长沙',
hobby: '篮球,足球,羽毛球'
}
var str ="";
for(var i in obj){
str +=`<li><span>${i}</span>
<span>${obj[i]}</span></li>`
}
document.write(str);
</script>