JavaScript 基础 - 第 2 天

理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易 ATM 取款机程序能力

• 运算符
• 语句
• 综合案例

运算符

算术运算符

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

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

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数），开发中经常用于作为某个数字是否被整除

注意：在计算失败时，显示的结果是 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

赋值运算符

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

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

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

// 常规赋值
let num = 1
num = num + 1
// 采取赋值运算符
num += 1
num += 3
console.log(num)

自增/自减运算符

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

1. ++ 在前和 ++ 在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用; 如果组合使用 i++ 不会立即自加, ++i 会立即自加
2. ++ 在后（后缀式）我们会使用更多

注意：

1. 只有变量能够使用自增和自减运算符
2. ++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x

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

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

// 前置和后置区别
let i = 1
console.log(i++ + 1) // 等同于 1 + 1 , i 会在 i++ 表达式结束后变成2, 表达式后面如果还有i, 那么值为2
console.log(++i + 1) // 等同于 2 + 1 , i先自增变成了2, 再参与后面的表达式

// 了解
let i = 1
console.log(i++ + ++i + i) // == 1 + 3 + 3

比较运算符

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

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

console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
// 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
console.log(2 == '2') // true
// console.log(undefined === null) // false
// === 全等 判断 值 和 数据类型都一样才行
// 以后判断是否相等 请用 ===
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('-------------------------')

逻辑运算符

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

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边有一个假的结果为假	一假则假
||	逻辑或	或者	符号两边有一个真的结果为真	一真则真
!	逻辑非	取反	true 变 false false 变 true	真变假，假变真

A	B	A && B	A || B	!A
false	false	false	false	true
false	true	false	true	true
true	false	false	true	false
true	true	true	true	false

// 逻辑与 一假则假
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('-----------------')

运算符优先级

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

逻辑中断

符号	短路条件	反过来更好理解
&&	左边为 false 就短路	左边为 true 才执行右边的 x = true && 1 等于 x = 1
||	左边为 true 就短路	左边为 false 才执行右边的 x = false || 1等于x = 1

其他运算符

符号	名称	用法
,	逗号算符	当你想要在期望一个表达式的位置包含多个表达式时，可以使用逗号运算符。一般小括号,中括号使用逗号, 大括号使用分号或换行省略分号
delete	delete 运算符	用于删除对象的一个属性, delete Employee.firstname
**	幂(次方)	x ** y
**=	幂赋值	x **= y
&&=	逻辑与赋值	逻辑与赋值（x &&= y）(等同于(x && (x = y)))运算仅在 x 为真值时为其赋值(属性存在则赋值为 y)
||=	逻辑或赋值	逻辑或赋值（x ||= y）(等同于(x || (x = y)))运算仅在 x 为假值时为其赋值(属性不存在则赋值为 y)
??=	逻辑空赋值	逻辑空赋值运算符（x ??= y）(等同于(x ?? (x = y)))仅在 x 是空值（null 或 undefined）时对其赋值为 y
? ?	空值合并运算符	当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数; 注意: ||(或) : 是当左侧为假值时返回右侧的值
?.	可选链运算符	用于访问对象的属性或调用函数。如果使用此运算符访问的对象或调用的函数是 undefined 或 null，则表达式会短路并计算为 undefined，而不是抛出错误
. 或 [ ]	属性访问器	属性访问器提供了两种方式用于访问一个对象的属性，它们分别是点号和方括号语法: object.property 或object['property']
...	展开语法	允许迭代数组或字符串等可迭代字符串在预期有零个或更多参数（用于函数调用）或元素（用于数组字面量）的地方进行扩展。在对象字面量中，扩展语法枚举对象的属性，并将键值对添加到正在创建的对象中
function*	function* 表达式	function* 关键字可以在表达式内部定义一个生成器函数
yield		yield 关键字用于暂停和恢复生成器函数
yield*		yield* 表达式用于委托给另一个generator 或可迭代对象
!!	双重非	可以使用几个非运算符串联起来，明确地强制将任何值转换为相应的布尔基本类型。这种转换是基于值的"真实性"或"虚假性"（详见真值和假值）。
#!	Shebang或者Hashbang	Unix 的命令行脚本都支持#!命令，又称为 Shebang 或 Hashbang。这个命令放在脚本的第一行，用来指定脚本的执行器。 有了这一行以后，Unix 命令行就可以直接执行脚本。 对于 JavaScript 引擎来说，会把#!理解成注释，忽略掉这一行。

语句

表达式和语句

分支语句

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

分支语句包含：

1. if 分支语句（重点）
2. 三元运算符
3. switch 语句

if 分支语句

语法：

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

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

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

如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

// 单分支语句
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('执行语句')
}

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

if 双分支语句

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

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

例如：

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

if 多分支语句

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

// 1. 用户输入
let score = +prompt('请输入成绩：')
// 2. 判断输出
if (score >= 90) {
  alert('成绩优秀，宝贝，你是我的骄傲')
} else if (score >= 70) {
  alert('成绩良好，宝贝，你要加油哦~~')
} else if (score >= 60) {
  alert('成绩及格，宝贝，你很危险~')
} else {
  alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')
}

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

使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 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)

switch 语句（了解）

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

注意：

1. switch case 语句只能用于等值判断, if 适合于区间判断
2. switch case 一般需要配合 break 关键字使用 没有 break 会造成 case 穿透
3. if 多分支语句开发要比 switch 更重要，使用也更多

例如：

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

//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }
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('没有符合条件的')
}

断点调试

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

浏览器打开调试界面

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

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

F10 不进入函数体, F11 进入函数体看过程

循环语句

使用场景：重复执行指定的一段代码，比如我们想要输出 10 次 '我学的很棒'

学习路径：

1.while 循环

2.for 循环（重点）

while 循环

while : 在…. 期间， 所以 while 循环 就是在满足条件期间，重复执行某些代码。

语法：

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

例如：

// while循环: 重复执行代码

// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦，毕业时候见英雄'
let i = 1
while (i <= 3) {
  document.write('月薪过万不是梦，毕业时候见英雄~<br>')
  i++ // 这里千万不要忘了变量自增否则造成死循环
}

循环三要素：

1.初始值 （经常用变量）

2.终止条件

3.变量的变化量

例如：

// // 1. 变量的起始值
// let i = 1
// // 2. 终止条件
// while (i <= 3) {
//   document.write('我要循环三次 <br>')
//   // 3. 变量的变化量
//   i++
// }
// 1. 变量的起始值
let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {
  document.write('我要循环三次 <br>')
  // 3. 变量的变化量
  i++
}

中止循环

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

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

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

// }

let i = 1
while (i <= 5) {
  if (i === 3) {
    i++
    continue
  }
  console.log(i)
  i++
}

无限循环

1.while(true) 用来构造"无限"循环，需要使用 break 退出循环。（常用）

2.for(;;) 也可以构造"无限"循环，同样需要使用 break 退出循环。

// 无限循环
// 需求： 页面会一直弹窗询问你爱我吗？
// (1). 如果用户输入的是 '爱'，则退出弹窗
// (2). 否则一直弹窗询问

// 1. while(true) 无限循环
// while (true) {
//   let love = prompt('你爱我吗?')
//   if (love === '爱') {
//     break
//   }
// }

// 2. for(;;) 无限循环
for (;;) {
  let love = prompt('你爱我吗?')
  if (love === '爱') {
    break
  }
}

综合案例-ATM 存取款机

分析：

①：提示输入框写到循环里面（无限循环）

②：用户输入 4 则退出循环 break

③：提前准备一个金额预先存储一个数额 money

④：根据输入不同的值，做不同的操作

​ (1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额

​ (2) 可以使用 if else if 多分支 来执行不同的操作

完整代码：

// 1. 开始循环 输入框写到 循环里面
// 3. 准备一个总的金额
let money = 100
while (true) {
  let re = +prompt(`
请您选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)
  // 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环
  if (re === 4) {
    break
  }
  // 4. 根据输入做操作
  switch (re) {
    case 1:
      // 存钱
      let cun = +prompt('请输入存款金额')
      money = money + cun
      break
    case 2:
      // 存钱
      let qu = +prompt('请输入取款金额')
      money = money - qu
      break
    case 3:
      // 存钱
      alert(`您的银行卡余额是${money}`)
      break
  }
}