#关于JS if条件语句及循环语句详解

100 阅读 0 评论 66 点赞

我是靠谱客的博主光亮外套，这篇文章主要介绍#关于JS if条件语句及循环语句详解，现在分享给大家，希望可以做个参考。

一、程序结构

程序结构：程序的执行顺序

顺序结构
选择(分支)结构

if语句

if…else

if…else if…else

switch
循环结构

for

while

do…while

for…in

二、分支结构

if 语句

复制代码

1
2
3
4
5
6
7
//语法：
if(条件){
	代码块;
}

//执行规则：若条件成立，则执行代码块

示例：

复制代码

1
2
3
4
5
6
7
        //周五考试，60分以上及格
        var score = prompt("请输入分数：");//输入框   返回值： 点击确定按钮时，返回  输入框的内容，，点击取消按钮时，返回null
        // console.log(score);
        if (score > 60) {
            alert("及格");
        }

if…else语法

复制代码

1
2
3
4
5
6
7
8
9
//语法
if(条件){
	代码块;
}else{
	代码块;
}

//执行规则：若条件成立，则执行对应的代码块；否则，执行else对应的代码块

示例：

复制代码

1
2
3
4
5
6
7
8
        //根据用户年龄，判断用户是否可以进入网吧 
        var age = prompt("请输入用户的年龄：");
        if (age >= 18) {
            alert("尽情玩耍吧");
        } else {
            alert('回家写作业吧');
        }

若if或者else语法后面的代码只要一句，则可以省略{}

3.多分支语句

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//语法
if(条件1){
	代码块1;
}else if(条件2){
	代码块2;
}
...
else if(条件n){
	代码块n;
}else{
	代码块m;
}

//执行规则：条件1成立，则执行对应的代码块1,

示例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
        // 周五考试     60分以下的补考  90分以上的 优秀  其它  及格
        var score = prompt('请输入分数：');
        // if (score < 60) {
        //     alert("补考")
        // } else if (score >= 60 && score <= 90) {
        //     alert("及格")
        // } else if (score > 90) {
        //     alert("优秀，有奖...");
        // } else {
        //     alert('请重新输入');
        // }

        if (score > 90) {
            alert("优秀，，奖励");
        } else if (score > 60) {
            alert("及格");
        } else if (score > 0) {
            alert("补考");
        } else {
            alert('非法输入');
        }

4.if语句的嵌套

在分支语句中可以嵌套其它的分支语句

复制代码

1
2
3
4
5
6
7
8
9
10
11
if(){
	if(){}else{}
}


if(){

}else{
	if(){}
}

示例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        //周五考试   60分以下补考，其它及格
        var score = prompt("请输入考试分数：");
        if (score != null) {
            if (score >= 60) {
                alert('及格');
            } else {
                alert("补考");
            }
        } else {
            alert("点击了取消按钮");
        }

        //点击  取消   score   null

5.switch结构

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//语法：
switch(表达式){
	case 值1:
		代码块;
	break;
	case 值2:
		代码块;
	break;
	...
	case 值n:
		代码块;
	break;
	default:
		代码块;
	break;
}

//执行规则：switch后的表达式与case后面的值相等时，即执行对应的代码块；若都不相等，则执行default对应的代码

示例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        switch (slt.value) {        //   slt.value=== "+"
            case "+":
                console.log(v1 + v2);
                break;
            case "-":
                console.log(v1 - v2);
                break;
            case "*":
                console.log(v1 * v2);
                break;
            case "/":
                console.log(v1 / v2);
                break;
            default:
                console.log(v1 + v2);
                break;
        }

注意：switch.case的比较是一个全等的比较 (===)

注意：break的问题，若省略，会出现穿透问题。

三、DOM中查找节点对象的方法

1.根据id找元素

复制代码

1
2
document.getElementById(id);//唯一的节点对象      不存在 null

2.根据标签名找元素

复制代码

1
2
3
4
5
//在文档中，根据标签名找元素
document.getELementsByTagName(tagName);
//在指定的节点下找元素
node.getElementsByTagName(tagName);

该方法的返回值是一个集合(类数组/伪数组), 集合有：length属性，索引

可以通过索引来取出里面的值：集合[索引]

3.根据class来找元素

复制代码

1
2
3
//根据类名找元素
document.getElementsByClassName(cls);

返回值：集合

四、循环结构

重复的执行一段代码

1.for循环

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//语法
for(循环变量初始化;循环条件判断;循环迭代){
	循环体;
}
/*
	执行规则：for循环的执行可以分为如下几步:
	第一步：循环变量初始化					var i=0;
	第二步：循环条件的判断					i<5
		若判断结果为真，则执行第三步
		若判断结果为假，则结束循环
	第三步：执行循环体					 console.log(i)
	第四步：循环的迭代					 i++
	第五步：回到第二步
*/

复制代码

1
2
3
4
        for (var i = 0; i < 5; i++) {
            console.log(i);
        }

2.循环嵌套

外层循环执行一次，内层循环执行一遍

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
                *
                ***
                *****
                *******

                行号        *个数
                1           1
                2           3
                3           5
                4           7

                n           2*n-1
        */
        //控制行数
        for (var i = 1; i < 5; i++) {
            //打印一行*
            for (var j = 0; j < 2 * i - 1; j++) {
                document.write('*');
            }
            document.write("<br>");
        }