for循环

• 赋值运算符和一元运算符
• 运算符优先级
• 循环结构

一、赋值运算符和一元运算符

目标：知道不同赋值运算符的含义及其使用，能够明白自增/减运算符前置或后置的差异

1.1 赋值运算符

1. 赋值运算符：对变量进行赋值的运算符

   1. 已经学过的赋值运算符：=
   2. 其他赋值运算符：Ø+= -= *= /= %=
2. 使用这些运算符可以在对变量赋值时进行快速操作

 <script>
        // let i = 5
        //前置自增和后置自增不参与运算的情况下，都是自身加1
        //++i  //前置自增
        //i++   //后置自增
        //参与运算的情况下，前置自增是自身加1，在参与运算
        //                后置自增是参与运算，在自身加1
        // console.log(++i + 2)
        // console.log(i++ + 2);
        // console.log(i)
        let m = 3
        let n = m++
        let k = (m++ + ++m * 6)
        console.log(m, n, k)
    </script>

1.2 一元运算符

• 二元运算符：需要两个表达式才能进行运算

  • let num=10+20

• 三元运算符：需要三个表达式才能进行运算

  • let max=10 >5 ?10:5

• 一元运算符：需要一个表达式就可以进行运算

  • let res=!true

1. 自增运算符的用法：

   1. 前置自增和后置自增独立使用时二者并没有差别！
   2. 一般开发中我们都是独立使用
   3. 后面 i++ 后置自增会使用相对较多

二、运算符优先级

目标:掌握运算符优先级，能判断运算符执行的顺序

let a = 3 > 5 && 2 < 7 && 3 == 4        // 答案是false，此时发生了逻辑与中断
console.log(a);  
let b = 3 <= 4 || 3 > 1 || 3 != 2       //答案是true，此时发生了逻辑或中断
console.log(b); 
let c = 2 === "2"                    //答案是false  数据类型不匹配
console.log(c);  
let d = !c || b && a                 //答案是true，此时发生了逻辑或中断
console.log(d);

三、循环结构

3.1断点调试

目标:掌握断点调试方法，学会通过调试检查代码

• 作用:学习时可以帮助更好的理解代码运行，工作时可以更快找到bug浏览器

• 打开调试界面

  1. 按F12打开开发者工具
  2. 点到sources一栏
  3. 选择代码文件+..
• 断点:在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

//1.案例1
 let age = prompt('请输入第一个数')
        if (age > 5) {
            alert('你好，孩子')
        } else {
            alert('熊孩子')
        }
//2.案例2
  let age = prompt('请输入年龄')
        function boy(a) {
            if (a > 5) {
                return '我长大了'
            } else {
                return '我还是宝宝'
            }
        }
        console.log(boy(age));

3.2 while 循环

目标:掌握while循环语法，能重复执行某段代码

• 循环:重复执行某段代码,而while :在…．期间

  1. while循环语法:
  2. while(循环条件){要重复执行的代码(循环体)}
• 释义:
• 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
• while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

2.while循环注意事项:

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

3.3 do-while循环

目标:掌握do while循环语法，能重复执行某段代码

1. do while循环语法:

2. do{
    要重复执行的代码(循环体)
   }
   while(循环条件)
   ---------------------------------------------------------------
   /* do {
            循环体﹑先执行do里边的循环体一次, 再去判断循环条件，如果循环条件true，循环体继续执行, 如果循环条件为false, 循环结束
            }while（循环条件） */
   //求1-100的和

1. 释义:

   1. 先执行do里面的语句
   2. 执行完毕后，到 while里面判断条件是否满足，如果满足则回头继续执行do里面的语句，如果条件不满足，则退出循环

案例：求1-100的和
 let i = 1
        let sum = 0
        do {
            sum = sum + i
            i++
        } while (i <= 100)
        document.write(sum);
----------------------------------------
do {
     love = prompt('你爱我吗')
 } while (love !== '爱')
  alert('我也爱你')

3.4for循环

1. 变量的起始值
2. 判断循环条件, 循环条件为true, 执行循环体
3. 变量的变化值— - 判断循环条件–循环体

4. 循环条件为false，循环结束

   • 注意: 变量的变化值，只执行一次

for(变量的起始值3；玄幻条件；变量的变化值
    {    循环体
}
 //代码块：
  for (let i = 1; i <= 100; i++) {
            document.write(i + '岁<br>')
        }
--------------------------------------------------

for循环的案例：

//1.  1-100之间所有数的平均值    1-100的和/100
        let sum = 0
        for (let i = 1; i <= 100; i++) {
            sum = sum + i
        }
        let avg = sum / 100
        document.write(avg) 
//2.求1-100偶数的和还有奇数的和
        let even = 0
        let odd = 0
        for (let i = 1; i <= 100; i++) {
            if (i % 2 === 0) {
                even += i
            } else {
                odd += i
            }
        }
document.write(`偶数的和是${even},奇数的和是：${odd}`)

3.4-1循环的嵌套：

for(外部声明记录循环次数的变量;循环条件;变化值){
    for (内部声明记录循环次数的变量;循环条件;变化值){
        循环体
        }
    }

案例：-打印五行五列小星星

   <script>
        //打印5颗小星星
        /*  🦆
         🦆🦆
         🦆🦆🦆
         🦆🦆🦆🦆
         🦆🦆🦆🦆🦆
         🦆🦆🦆🦆🦆🦆
         🦆🦆🦆🦆🦆🦆🦆
         🦆🦆🦆🦆🦆🦆🦆🦆
         🦆🦆🦆🦆🦆🦆🦆🦆🦆 */
        for (let j = 1; j <= 9; j++) {
            for (let i = 1; i <= j; i++) {
                document.write('🦆')
            }
            document.write('<br>')
        }
        //倒三角行
        /*   🐕🐕🐕🐕🐕🐕🐕🐕🐕
          🐕🐕🐕🐕🐕🐕🐕🐕
          🐕🐕🐕🐕🐕🐕🐕
          🐕🐕🐕🐕🐕🐕
          🐕🐕🐕🐕🐕
          🐕🐕🐕🐕
          🐕🐕🐕
          🐕🐕
          🐕 */
        for (let j = 9; j >= 1; j--) {
            for (let i = 1; i <= j; i++) {
                document.write('🐕')
            }
            document.write('<br>')
        }
    </script>

案例-九九乘法表

//css部分
span {
            display: inline-block;
            margin: 5px;
            height: 30px;
            width: 100px;
            text-align: center;
            line-height: 30px;
            border-radius: 6px;
            background-color: orangered;
            border: 1px solid #000;
        }
//js部分
<script>
        for (let j = 1; j <= 9; j++) {
            for (let i = 1; i <= j; i++) {
                document.write(`<span>${i}×${j}=${i * j}</span>`)
            }
            document.write('<br>')
        }
    </script>

3.5-循环结束

目标:能说出continue和lbreak的区别

• 循环结束:

  • continue:结束本次循环,继续下次循环
  • break:跳出所在的循环

 <script>
        // 求1-100的和,将7的倍数排除在外
        // let sum = 0
        // for (let i = 1; i <= 100; i++) {
        // if (i % 7 === 0) {
        // 跳过本次循环,后边的循环继续
        // continue
        // } else {
        // sum += i
        // }
        // }
        // document.write(sum)
        //  求1-100之间,从第一个到第6个能被3整除的数的和
        // 3 6 9 12 15 18 21 24
        let sum = 0
        let count = 0 // 记数
        for (let i = 1; i <= 100; i++) {
            if (i % 3 === 0) {
                sum += i
                count++
            }
            if (count === 6) {
                break // 当前循环结束    跳出当前循环
            }
        }
        document.write(sum)
    </script>

三种循环区别

• 三种循环区别：

  • for 语句和 while 语句是完全可互换的，for 的语法结构更简洁，故 for 循环的使用频次会更多
  • 如果涉及到条件判断的时候使用while 更合适
  • 如果涉及到计算次数的时候使用for更简单，语法更简单明了
  • do-while 循环体至少使用一次如果某些代码一定会执行一次可以考虑

三—1、循环结构小结

目标：掌握循环结构，实现一段代码重复执行

1. 断点调试

2. while循环

   • 记得要写改变记录循环次数的变量

3. 1.do-while循环

   • 循环体至少执行一次
4. for循环

5. 循环结束

   • break
   • Continue

6. 循环结构

   • while
   • do-while
   • for
   • continue
   • break