js:断点+循环

321 阅读1分钟

断点调试:

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

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

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

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

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

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

循环

循环目的:

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

while循环

//1.while循环语法结构 while 当...的时候

//while(条件表达式){

//    循环体

//}

//2.执行思路 当条件表达式结果为true 则执行结果为true 则执行循环体 否则 退出循环

//3.代码验证

let num = 1;

while (num <= 100) {

  console.log('nb');

  num++;

}

//4.里面应该也有计算器,初始化变量

//5.里面应该也有操作表达式 完成计数器的更新,防止死循环

强制回答”爱”

 		let str;
		// 等于 '爱' 跳出循环
        while (str !== '爱') {
            str = prompt('你爱我吗?')
        }

ATM机:

思路:

1648566127367.png

代码:

 			let atm,
            money = prompt('请输入银行卡里有多少元');
        while (atm !== 4) {
            atm = +prompt(`请选择业务\n1.取款\n2.存款\n3.查看余额\n4.退出`)
            if (atm === 1) {
                let num = +prompt('取多少钱?')
                money -= num;
                alert(`取了${num}元`)
            } else if (atm === 2) {
                let num1 = +prompt('存多少钱?')
                money += num1;
                alert(`存了${num1}元`)
            } else if (atm === 3) {
                alert(`余额:${money}元`)
            } else if (atm === 4) {
                console.log('exit');
            }

        }

Continue关键字

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

例如,吃5个包子,第3个包子,救人掉第三个,继续吃第4个第5个包子,其代码如下

for (var i = 1; i <= 5; i++) {

  if (i == 3) {

    continue; //只要遇见continue就退出本次循环 直接跳到i++

  }

  console.log('我吃了 ' + i + '个包子');

}

Break关键字

Break关键字用于立即跳出整个循环(循环结束)

例如,吃五个包子,吃到第3个发现里面有半个虫子,其余的不吃了,例子:

for (var i = 1; i <= 5; i++) {

  if (i == 3) {

    break; //break退出整个循环

  }

  console.log('我吃了 ' + i + '个包子');

}

for循环

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

语法结构:

for循环只要用于把某些代码循环若干次,通常跟计数有关,其语法结构如下:

// for (let i = 1; i <= 10; i++) {

//   document.write("玩游戏呢你“)

// }

//1.for重复执行某些代码,通常跟计数有关系

//2.for 语法结构

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

//   循环体

// }

//3.初始化变量 就是用let 声明的一个普通变量,通常用于作为计数器使用

//4.条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件。

//5.操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)

//6.代码体验 我们重复打印100句 你好

for (let i = 1; i <= 100; i++) {

  document.write("hello" + "\n");

}

 

for循环的执行过程

//for 循环执行过程

for (let i = 1; i <= 100; i++) {

  document.write("hello" + "\n");

}

//let i = 1;可以说是计数器变量

//1.首先执行里面的计数器变量 let i =1,但是这句活在for里面只执行一次 i

//2. i <= 100来判断是否满足条件,如果满足条件,就去执行循环体,不满足条件退出循环

//3.最后去执行 i++ i++是单独写的代码 递增 第一轮结束

//4.接着去执行i <=100 如果满足条件 就去执行 循环体 不满足条件退出循环  第二轮

for循环案例:

100以内的偶数和:

     //1.变量为 0 ,方便循环里的计算
        let sum = 0
            //2.在100以内的数
        for (let i = 1; i <= 100; i++) {
            //3.判断偶数的条件
            if (i % 2 == 0) {
                //4.判断为偶数,开始累加赋值给 sum
                sum += i
            }
        }
        console.log(sum);

双重for循环案例

要知道第一个for循环的意义,第二个for循环的意义。

n天背n个单词:

 		// 输入背单词的天数
        let day = prompt('请输入天数'),
            //输入要背的单词数
            word = prompt('请输入单词数');

        //第一个for循环的是背单词的天数
        for (let i = 1; i <= day; i++) {
            document.write(`背单词的天数:${i}`);
            document.write(`</br>`)

            //第二个for循环是背单词的数量
            for (let j = 1; j <= word; j++) {
                document.write(`</br>`)
                document.write(`背了第${j}个单词`);
            }

            document.write(`</br></br>`)
        }

正三角形案例:

  		let arr = +prompt('请输入值');
        //第一个for循环是行
        for (let i = 1; i <= arr; i++) {

            //第二个for循环是列

            //  改变列数 代码(5) j <= arr-i+1
            // 1 第一次循环 列数:   5
            // 2 第二次循环 列数:   4
            // 3 第三次循环 列数:   3
            for (let j = 1; j <= arr - i + 1; j++) {
                let str = '☆';
                document.write(str);
            }
            //换行
            document.write('<br/>')
        }

倒三角形案例:

   		let arr = +prompt('请输入值');
        //第一个for循环是行
        for (let i = 1; i <= arr; i++) {

            //第二个for循环是列

            //  改变列数 代码(5) j <=i 
            // 1 第一次循环 列数:	1
            // 2 第二次循环 列数:  2
            // 3 第三次循环 列数:  3
            for (let j = 1; j <= i; j++) {
                let str = '☆';
                document.write(str);
            }
            //换行
            document.write('<br/>')
        }

九九乘法表:

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        span {
            border: 1px solid #000;
            padding: 10px 0;
            width: 100px;
            text-align: center;
            display: inline-block;
        }
    </style>
</head>

<body>
    <script>
        //1.第一个for循环代表行
        for (let i = 1; i <= 9; i++) {
            //2.第二个for循环代表列
            for (let j = 1; j <= i; j++) {
                //num 是每行与每列的 积
                let num = j * i;
                //将变量 j ,变量 i 和 变量 m 连接。
                document.write(`<span>  ${j} * ${i} = ${num}</span>`);
            }
            document.write('<br/>');
        }
    </script>
</body>

</html>