提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript笔记(3)

JavaScript笔记
2023-06-13 09:12:59 时间

01

循环

目的:

  • 在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句.

在JS中,主要有三种类型的循环语句:

  • for循环
  • while循环
  • do...while循环

在程序中,一组被重复执行的语句被称为循环体,能否继续重复执行,取决于循环的终止条件.由循环体及循环的终止条件组成的语句,被称为循环语句.

语法:

for (初始化变量; 条件表达式; 操作表达式;) {

循环体

}

循环过程: ①执行初始化条件,且只执行一次 ②判断条件表达式 ③进入循环体 ④操作表达式,注意这是最后一步

  • 初始化变量: 就是用var声明的一个普通变量,通常用于作为计数器使用.
  • 条件表达式: 就是用来决定每一次循环是否继续执行,就是终止的条件.
  • 操作表达式: 是每次循环最后执行的代码,经常用于我们计数器变量进行更新(递增或者递减)

示例:

        for (var i = 1; i <= 50; i++) {
            console.log('你好');
        }

02

断点调试

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行在这一行就会停住,然后你可以一步一步往下调试,调试过程中中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下.

断点调试可以帮助我们观察程序的运行过程

浏览器中按F12-->sources-->找到需要调试的文件-->在程序某一行设置断点

Watch:监视.通过watch可以监视变量的值的变化,非常常用.

F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化.

代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力.初学者不要觉得调试代码麻烦就不去调试.

(不过我发现JS如果写出了无限循环的bug就会完全卡住...啥也看不到,F12都点不开)

03

双重for循环

很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形,打印一个倒直角三角形等.,此时就可以通过循环嵌套来实现.

嵌套循环是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环中,可以再嵌套一个for循环,这样的for循环语句我们可以称之为双重for循环.

比如第一个例子:我们想实现输入n个行数,就打印n行n列星星.

(注意:for循环语句不要写错,分号不要写成 ',' ,不要每次都写成i++!!! ) 

        let num = prompt('请输入星星的行数');
        let column = num;
        let re = ''
        for (let i = 1; i <= num; i++) {
            let  all = ''  
            for (let column = 1; column <= num; column++) {
            }
            re += all + '\n'
        }
        console.log(re);

比如我们输入了6:

第二个例子,先来个正着的直角三角形星星:

        let num = 5;
        let re = '' // re将每行的row结尾加上换行之后拼在一起.
        for (let i = 1; i <= num; i++) {  
        //行数循环
            let row = ''; //每行的星星都装在row里
            for (let row_num = 1; row_num <= i; row_num++) { 
            //行内星星循环
                row += '★'  
            }
            re += row + '\n' 
        }
        console.log(re);

倒着的: 

        let num = 5;
        let all = ''
        for (let i = num; i >= 0; i--) {
            let row = '';
            for (let row_num = 1; row_num <= i; row_num++) {
                row += '★'
            }
            all += row + '\n'
        }

9*9乘法表: 


        for (let i = 1; i <= 9; i++) {
            let result = '   '
            for (let j = 1; j <= i; j++) {
                var x = i + '*' + j + '=' + j * i + '   '
                result += x;
            }
            console.log(result);
        }

04

while循环

while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环.

语法结构:

while (条件表达式) {

循环体代码

}

05

do...while循环

语法:

do {

循环体

} while (条件表达式)

执行思路:

跟while不同的地方在于 do...while先执行一次循环体,再判断条件,如果表达式为真,再继续进入循环体.

06

continue和break

continue关键字

continue关键字用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次.)

小测试,做一个存钱系统:

        var num = prompt('请输入你要的操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出')
        var all_money = 0;
        while (num != '4') {

            switch (num) {
                case '1':
                    var add_money = prompt('请输入存钱金额')
                    alert(`已存入${add_money}元`);
                    all_money += parseInt(add_money);
                    break;
                case '2':
                    if (all_money <= 0) {
                        alert('你没钱取')
                    } else {
                        var get_money = prompt('请输入取钱金额')
                        if (get_money >= all_money) {
                            alert(`余额不足,余额为${all_money}`)
                        } else {
                            alert(`已取走${get_money}元`);
                            all_money -= parseInt(get_money);
                        }
                    }
                    break;
                case '3':
                    alert(`余额为${all_money}`)
                    break;
            }
            num = prompt('请输入你要的操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出')
        }

今天就先结束啦!明天再继续(95/473)

相关文章