JavaScript 基础学习笔记（三）：算术运算符、赋值运算符、自增/自减运算符、比较运算符、逻辑运算符、运算符优先级、if 分支语句、if双分支语句、三元运算符、switch语句、断点调试

目录

一、运算符

1.1 算术运算符

1.2 赋值运算符

1.3 自增/自减运算符

1.4 比较运算符

1.5 逻辑运算符

1.6 运算符优先级

二、语句

2.1 表达式和语句​编辑

2.2 分支语句

2.2.1 if 分支语句

2.2.2 if双分支语句

2.2.3 if 多分支语句

2.2.4 三元运算符（三元表达式）

2.2.5 switch语句（了解）

三、断点调试

---

一、运算符

1.1 算术运算符

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

注意：在计算失败时，显示的结果是 NaN （not a number）

// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20

// 1. 取模(取余数)  使用场景：  用来判断某个数是否能够被整除
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3

// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2)   // pink老师2

 

1.2 赋值运算符

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

= 将等号右边的值赋予给左边, 要求左边必须是一个容器

<script>
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)
</script>

1.3 自增/自减运算符

1. ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用

2. ++在后（后缀式）我们会使用更多

注意：

1. 只有变量能够使用自增和自减运算符

2. ++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x

 

<script>
     let num = 10
     num = num + 1
     num += 1
     // 1. 前置自增
     let i = 1
     ++i
     console.log(i)

     let i = 1
     console.log(++i + 1)
    // 2. 后置自增
     let i = 1
     i++
     console.log(i)
     let i = 1
     console.log(i++ + 1)

    // 了解 
    let i = 1
    console.log(i++ + ++i + i)
  </script>

1.4 比较运算符

使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

<script>
  console.log(3 > 5)
  console.log(3 >= 3)
  console.log(2 == 2)
  // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
  console.log(2 == '2')  // true
  // console.log(undefined === null)
  // === 全等 判断 值 和 数据类型都一样才行
  // 以后判断是否相等 请用 ===  
  console.log(2 === '2')
  console.log(NaN === NaN) // NaN 不等于任何人，包括他自己
  console.log(2 !== '2')  // true  
  console.log(2 != '2') // false 
  console.log('-------------------------')
  console.log('a' < 'b') // true
  console.log('aa' < 'ab') // true
  console.log('aa' < 'aac') // true
  console.log('-------------------------')
</script>

1.5 逻辑运算符

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

<script>
    // 逻辑与 一假则假
    console.log(true && true)
    console.log(false && true)
    console.log(3 < 5 && 3 > 2)
    console.log(3 < 5 && 3 < 2)
    console.log('-----------------')
    // 逻辑或 一真则真
    console.log(true || true)
    console.log(false || true)
    console.log(false || false)
    console.log('-----------------')
    // 逻辑非  取反
    console.log(!true)
    console.log(!false)

    console.log('-----------------')

    let num = 6
    console.log(num > 5 && num < 10)
    console.log('-----------------')
  </script>

 

1.6 运算符优先级

逻辑运算符优先级： ！> && > ||

二、语句

2.1 表达式和语句

2.2 分支语句

分支语句可以根据条件判定真假，来选择性的执行想要的代码

分支语句包含：

1. if分支语句（重点）

2. 三元运算符

3. switch语句

2.2.1 if 分支语句

语法：

if(条件表达式) {
  // 满足条件要执行的语句
}

小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码

小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

如果大括号只有一个语句，大括号可以省略。

<script>
    // 单分支语句
     if (false) {
       console.log('执行语句')
     }
     if (3 > 5) {
       console.log('执行语句')
     }
     if (2 === '2') {
       console.log('执行语句')
     }
    //  1. 除了0 所有的数字都为真
       if (0) {
         console.log('执行语句')
       }
    // 2.除了 '' 所有的字符串都为真 true
     if ('pink老师') {
       console.log('执行语句')
     }
     if ('') {
       console.log('执行语句')
     }
      if ('') console.log('执行语句')

    // 1. 用户输入
    let score = +prompt('请输入成绩')
     2. 进行判断输出
    if (score >= 700) {
      alert('恭喜考入黑马程序员')
    }
    console.log('-----------------')

  </script>

2.2.2 if双分支语句

如果有两个条件的时候，可以使用 if else 双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

例如：

 <script>
    // 1. 用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    // 2. 判断输出
    if (uname === 'pink' && pwd === '123456') {
      alert('恭喜登录成功')
    } else {
      alert('用户名或者密码错误')
    }
  </script>

2.2.3 if 多分支语句

使用场景： 适合于有多个条件的时候

 <script>
    // 1. 用户输入
    let score = +prompt('请输入成绩：')
    // 2. 判断输出
    if (score >= 90) {
      alert('成绩优秀，宝贝，爱你哦~~')
    } else if (score >= 70) {
      alert('成绩良好，宝贝，你要加油哦~~')
    } else if (score >= 60) {
      alert('成绩及格，宝贝，你很危险~~')
    } else {
      alert('成绩不及格，狗贼，还不滚去学习！！！')
    }
  </script>

2.2.4 三元运算符（三元表达式）

使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单

符号：? 与 : 配合使用

语法：条件 ? 表达式1 ： 表达式2

例如：

// 三元运算符（三元表达式）
// 1. 语法格式
// 条件 ? 表达式1 : 表达式2 

// 2. 执行过程 
// 2.1 如果条件为真，则执行表达式1
// 2.2 如果条件为假，则执行表达式2

// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')

// let age = 18 
// age = age + 1
//  age++

// 1. 用户输入 
let num = prompt('请您输入一个数字:')
// 2. 判断输出- 小于10才补0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num
alert(num)

2.2.5 switch语句（了解）

使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同

注意：

1. switch case语句一般用于等值判断, if适合于区间判断

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

3. if 多分支语句开发要比switch更重要，使用也更多

例如：

// switch分支语句
// 1. 语法
// switch (表达式) {
//   case 值1:
//     代码1
//     break

//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }

<script>
  switch (2) {
    case 1:
    console.log('您选择的是1')
    break  // 退出switch
    case 2:
    console.log('您选择的是2')
    break  // 退出switch
    case 3:
    console.log('您选择的是3')
    break  // 退出switch
    default:
    console.log('没有符合条件的')
  }
</script>

三、断点调试

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

浏览器打开调试界面

1. 按F12打开开发者工具

2. 点到源代码一栏 （ sources ）

3. 选择代码文件

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