运算符与分支、循环语句

一、运算符

1. 算术运算符

• 加 +
• 减 -
• 乘 *
• 除 /
• 取余 % （开发中经常作为某个数字是否被整除）

2. 赋值运算符

对变量进行赋值的运算符。

• =
• +=
• -=
• *=
• /=
• %=

3. 一元运算符

JavaScript的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

• 自增：++ 让变量的值+1
• 自减： – 让变量的值-1

前置自增和后置自增单独使用没有区别

前置自增和后置自增如果参与运算就有区别：

• 前置自增：先自加再使用

          let i = 1
          console.log(++i + 2)  //结果是 4
  		//  注意：i 是 2
  		//  i 先自加 1，变成 2 之后，再和2相加
  1
  2
  3
  4

• 后置自增：先使用再自加

  		let i = 1
          console.log(i++ + 2)  //结果是 3
  		//  注意：此时的 i 是 1
  		//  i 先和 2 相加，先运算输出完毕后，i 再自加 2
  1
  2
  3
  4

面试题

        let i = 1
        console.log(i++ + ++i + i)  //结果是 7
1
2

4. 比较运算符

比较两个数据大小，是否相等

• >
• <
• >=
• <=
• ==：左右两边是否相等
• ===：左右两边是否类型和值都相等
• !==：左右两边是否不全等
• 比较结果为boolean类型，即只会得到true或false

字符串比较，是比较的字符对应的ASCII码

• 从左往右依次比较
• 如果第一位一样再比较第二位，以此类推

        console.log('pink' > 'red')  //false
        console.log('pink' > 'pin')  //true
1
2

NaN不等于任何值，包括它本身

        console.log(1 === NaN)   //false
1

尽量比较小数，因为小数有精度问题

        console.log(0.1 + 0.2 === 0.3)  //false
        console.log(0.1 + 0.2)  //0.30000000000000004
1
2

不同类型之间比较会发生隐式转换

        console.log(3 > '2')  //true
1

5. 逻辑运算符

        // 逻辑与，一假则假
        console.log(true && true)   //true
        console.log(false && true)  //false
        // 逻辑或，一真全真
        console.log(false || true)  //true
        console.log(false || false) //false
        // 逻辑非，取反
        console.log(!true)          //false
        console.log(!false)         //true
1
2
3
4
5
6
7
8
9

逻辑运算符里的短路：只存在于&&和||中，当满足一定条件会让右边代码不执行。

原因：通过左边能得到整个式子的结果，因为没必要再判断右边

运算结果：无论&&还是||，运算结果都是最后被执行的表达式值，一般用在变量赋值

6. 运算符优先级

二、语句

1. 表达式和语句

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

js整句或命令，js语句是以分号结束（可以省略）

区别：表达式计算出一个值，但语句用来自行以使某件事发生

2. 分支语句

2.1 程序三大流程控制语句

1. 顺序结构：从上往下执行
2. 分支结构：根据条件选择执行代码
3. 循环结构：某段代码被重复执行

2.2 分支语句

1. if分支语句

   单分支

   		if (条件) {
               满足条件要执行的代码
           }
   1
   2
   3

   双分支

           // 计算工资
           // 1. 用户输入工龄
           let age = prompt('请输入工龄')
           let salary = 10000
           // 2. 执行分支语句
           if (age >= 1) {
               alert(`您实发工资：${salary + 2000}`)
           } else {
               alert(`您实发工资：${salary}`)
           }
   
           // 计算闰年
           // 1. 用户输入年份
           let year = prompt('请输入年份：')
           // 2. 执行分支语句
           if (year % 4 === 0 && year % 100 !== 0 || year % 400 ===0) {
               alert(`${year}是闰年`)
           } else {
               alert(`${year}是平年`)
           }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

   多分支

           // 分时问候
           // 1. 用户输入时间
           let time = prompt('请输入时间：')
           // 2. 多分支判断
           if (time < 12) {
               document.write(`上午好，好好工作`)
           } else if (time < 18) {
               document.write(`下午好，好好工作`)
           } else if (time < 20) {
               document.write(`晚上好，好好加班`)
           } else {
               document.write(`夜深了，好好休息`)
           }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

2. 三元运算符

   是比if双分支跟更简单的写法，有时候也叫做三元表达式

   ？与：配合使用

   条件 ? 满足条件执行的代码 : 不满足条件执行的代码
   true ? 1 : 2
   3 > 5 ? alert('第一个') : alert('第二个')
   1
   2
   3

   一般用来取值

3. switch语句

   找到跟小括号里数据全等的case值，并执行里面对应的代码

   若没有全等===的则执行default里的代码

   switch case语句一般用于等值判断，不适合区间判断

   switch case一般需要配合break关键字使用，没有break会造成case穿透

           switch (2) {
               case 1:
                   alert(1)
                   break
               case 2:
                   alert(2)
                   break            
               case 3:
                   alert(3)
                   break
               default:
                   alert('没有数据')
           }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   简单计算器

           // 1. 用户输入数字  运算符
           let num1 = +prompt('请输入第一个数：')
           let num2 = +prompt('请输入第二个数：')
           let sp = prompt('请输入+ - * /运算符：')
           // 2. 根据不同的运算符计算不同的结果
           switch (sp) {
               case '+':
                   alert(`您选择的是加法，结果是：${num1 + num2}`)
                   break
               case '-':
                   alert(`您选择的是减法，结果是：${num1 - num2}`)
                   break
               case '*':
                   alert(`您选择的是乘法，结果是：${num1 * num2}`)
                   break
               case '/':
                   alert(`您选择的是除法，结果是：${num1 / num2}`)
                   break
               default:
                   alert(`请输入+ - * /`)
           }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

3. 循环语句

3.1 断点调试

浏览器打开调试界面：

1. 按F12打开开发者工具
2. 点到sources一栏
3. 选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会停下来

3.2 while循环

while (循环条件) {
    要重复执行的代码(循环体)
}
1
2
3

• 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
• while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到
  小括号判断条件，直到括号内条件不满足，即跳出

循环具备三要素：

1. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）

        // 循环必须有三个要素
        // 变量起始值
        let i = 1
        // 终止条件
        while (i <= 100) {
            document.write(`我会循环100次 
`)
            // 变量变化
            i++
        }
1
2
3
4
5
6
7
8
9

        // 1. 输出1-100个数字
        let i = 1
        while (i <= 100) {
            document.write(`第${i}个数是${i} 
`)
            i++
        }

        // 2. 计算1+到100的总和并输出
        let  j = 1
        let sum = 0
        while (j <= 100) {
            sum += j
            j++
        }
        document.write(`1-100的总和为${sum}`)  //5050

        // 3. 计算1-100之间的所有偶数和
        let z = 0
        let sum1 = 0
        while (z <= 100) {
            sum1 += z
            z = z+2
        }
        document.write(`1-100的偶数和为${sum1}`)  //2550
        let i = 1
        let sum = 0
        while (i <= 100) {
            if(i % 2 ===0) {
                sum += i
            }
            i++
        }
        document.write(`1-100的偶数和为${sum}`)  //2550
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

continue：结束本次循环，继续下次循环

break：跳出所在循环

三、综合案例

简易ATM取款机

        // 1. 不断的弹出对话框
        // 3. 余额变量
        let money = 100
        while (true) {
            let str = prompt(`
                请你选择操作：
                1. 存钱
                2. 取钱
                3. 查看余额
                4. 退出
            `)
            // 2. 除非输入的是4，则退出循环
            if (str === '4') {
                break
            }
            // 4. switch 加减操作
            switch (str) {
                case '1':
                    let save = +prompt('请您输入存钱的金额：')
                    money += save
                    break
                case '2':
                    let spend = +prompt('请您输入取钱的金额：')
                    money -= spend
                    break
                case '3':
                    alert(`您卡上的余额是${money}元`)
                    break
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

用户登录验证

        let msg = prompt('请输入用户名')
        let pwd = prompt('请输入密码')
        while (msg !== 'admin' || pwd !== '123456') {
            alert('请你先登录')
            msg = prompt('用户名')
            pwd = prompt('密码')
        }
        alert('登录成功')
1
2
3
4
5
6
7
8

求1-100之间个位数不为3的数的累加和

        // 1. 求1-100之间个位数不为3的数的累加和
        let i = 1
        let sum = 0
        while (i <= 100) {
            if (i % 10 !== 3)
                sum += i
            i++
        }
        document.write(sum)
1
2
3
4
5
6
7
8
9