JavaScript 学习笔记（Day2）

「写在前面」

本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：
1. JavaScript 学习笔记（Day1）

---

目录

• 1 运算符
• 2 语句
• 3 综合案例

1 运算符

1.1 赋值运算符

P20：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=20

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

num += 1 // 等同于 num = num + 1

1.2 一元运算符

P21：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=21

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
--	自减	变量自身的值减1，例如: x--

let num = 1
num++  // 等同于 num += 1

1.3 比较运算符

P22：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=22

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	左右两边是否类型和值都相等（重点）
==	左右两边值是否相等
!=	左右值不相等
!==	左右两边是否不全等

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

1.4 逻辑运算符

P23：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=23

符号	名称
&&	逻辑与
||	逻辑或
!	逻辑非

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

1.5 运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ -- !
3	算数运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 ||
7	赋值运算符	=
8	逗号运算符	,

2 语句

2.1 表达式和语句

P24：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=24

• 表达式：表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。比如：3 + 4、num++

• 语句：语句是一段可以执行的代码。比如：prompt() 可以弹出一个输入框，还有 if 语句 for 循环语句等等

2.2 分支语句

1. if语句

if 单分支：

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

P25：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=25

if 双分支：

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

P26：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=26

if 多分支：

if (条件1){
  代码1
} else if (条件2) {
  代码2
} else if (条件3) {
  代码3
} else {
  代码n
}

2. 三元运算符

P27：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=27

语法：条件 ? 满足条件执行的代码 : 不满足条件执行的代码

console.log(3 > 5 ? 3 : 5) // 返回5

P28：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=28

3. switch语句

P29：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=29

语法：

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>

2.3 循环语句

1. 断点调试

P30：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=30

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

• 浏览器打开调试界面

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

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

2. while 循环

P31：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=31

语法：

while (条件表达式) {
   // 循环体    
}

循环三要素：

1. 初始值 （经常用变量）
2. 终止条件
3. 变量的变化量

let i = 1
while (i <= 3) {
  document.write('我会循环三次
')
  i++
}

P32：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=32

3. 循环退出

P33：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=33

• break：中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

• continue：中止本次循环，一般用于排除或者跳过某一个选项的时候

<script>
  let i = 1
  while (i <= 5) {
    console.log(i)
    if (i === 3) {
      break  // 退出循环
    }
    i++
  }
script>

3 综合案例

P34：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=34

「结束」

本文由 mdnice 多平台发布