三、JavaScript的运算符、分支语句、逻辑运算符、循环语句

1、JavaScript中的运算符和(运算元)

1.1.认识运算符

• 在小学的时候我们就学习了各种运算符，比如加号 +、乘号 *、减号 - 、除号/

• 几乎所有的编程语言都有各种各样的运算符(也被称之为操作符，operators)

  • 初次接触这些运算符, 你会感觉种类繁多, 难以记忆.
  • 但是并不需要特别担心, 因为很多的运算符我们在以后的开发中, 每天都会使用；
  • 多练习, 不需要刻意去记忆；
  • 而且常见的高级语言运算符都是相似的，学了JavaScript运算符很容易掌握C/C++/OC/Python等语言的运算符；

• 计算机最基本的操作就是执行运算，执行运算时就需要使用运算符来操作：

  • 比如 console.log(20 + 30); +号就是一个运算符.
  • 比如 console.log(20 * 30); *号也是一个运算符.

• JavaScript按照使用场景的不同将运算符分成了很多种类型：

  • 算术运算符：+，-，*，/，%，**，等
  • 字符串运算符：+； 连接两个字符串
  • 赋值运算符：=，+=，-=，*=，/=，%=，等
  • 关系(比较)运算符：>，<，>=，<=，==，!=，==，!==，等
  • 逻辑运算符：||，&&，!，等
  • 等运算符
  • 具体JavaScript中的所有运算符可参考该文章： mdn文档 (opens new window) 或 JavaScript运算符 (opens new window)

1.2.认识运算元

• 在正式开始运算之前，我们先学习一下常见的术语：

  • 运算元 ——运算符应用的对象。
    • 比如说乘法运算 5 * 2，有两个运算元；
    • 左运算元 5 和右运算元 2；
    • 有时候人们也称其为“参数”；
  • 如果一个运算符对应的只有一个运算元，那么它是 一元运算符。
    • 比如说一元负号运算符（unary negation）-，它的作用是对数字进行正负转换；
  • 如果一个运算符拥有两个运算元，那么它是 二元运算符。
    • 比如 2 + 3

• 一元运算符通常我们是使用 – 和 +，-号使用的会较多一些；

1.3.算术运算符

• 算术运算符用在数学表达式中, 它的使用方式和数学中也是一直的；
• 算术运算符是对数据进行计算的符号；

运算符	运算规则	范例	结果
+	加法	2+3	5
+	连接字符串	'Hello'+'china'	'Hellochina'
-	减法	2-3	-1
*	乘法	2*3	6
/	除法	5/2	2.5
%	取余数	5%2	1
**	幂（ES7新增）	5**2	25

• 取余 % 和 求幂

  • 取余运算符是 %，尽管它看起来很像百分数，但实际并无关联
    • a % b 的结果是 a 整除 b 的 余数

  console.log(10%3)//1
  

  • 求幂运算 a ** b 将 a 提升至 a 的 b 次幂。（ES7中的语法，也叫做ES2016）
    • 在数学中我们将其表示为 a的b次方。

1.4.赋值运算符

• 前面我们使用的= 其实也是一个运算符，被称之为赋值（ assignments ）运算符。

• = 是一个运算符，而不是一个有着“魔法”作用的语言结构。

  • 语句 x = value 将值 value 写入 x 然后返回 x。

• 链式赋值（Chaining assignments）

  • 链式赋值从右到左进行计算；
  • 首先，对最右边的表达式 2 + 2 求值，然后将其赋给左边的变量：c、b 和 a。
  • 最后，所有的变量共享一个值。
  • 但是从代码的可读性的角度来说，不推荐这种写法。如下

var a, b, c
a = b = c = 2+2
console.log(a,b,c)//4 4 4

• 原地修改（Modify-in-place）
  • 什么是原地修改呢？：我们经常需要对一个变量做运算，并将新的结果存储在同一个变量中。
  • 可以使用运算符 += 和 *= 来缩写这种表示。
  • 所有算术和位运算符都有简短的“修改并赋值”运算符：/= 和 -= 等。

运算符	运算规则	范例	结果
=	赋值	a=5,	5
+	加后赋值	a=5,a+=2	7
-	减后赋值	a=5,a-=2	3
*	乘后赋值	a=5,a*=2	10
/	除后赋值	a=5,a/=2	2.5
%	取模 (余数)后赋值	a=5,a%=2	1
**	幂后赋值	a=5,a**=2	25

1.5.自增(++)、自减(--)

• 对一个数进行加一、减一是最常见的数学运算符之一。

• 所以，对此有一些专门的运算符：

  • 自增 ++ 将变量加1；
  • 自减 -- 将变量减1；

• 自增/自减只能应用于变量。

  • 将其应用于数值（比如 5++）则会报错。

• ++和--的位置

  • 运算符 ++ 和 -- 可以置于变量前，也可以置于变量后。
    • 当运算符置于变量后，被称为“后置形式”（postfix form）：counter++。
    • 当运算符置于变量前，被称为“前置形式”（prefix form）：++counter。
    • 两者都做同一件事：将变量 counter 与 1 相加。
  • 他们有什么区别吗？
    • 有，但只有当我们使用 ++/-- 的返回值时才能看到区别；
    • 如果自增/自减的值不会被使用，那么两者形式没有区别；
    • 如果我们想要对变量进行自增操作，并且 需要立刻使用自增后的值，那么我们需要使用前置形式；
    • 前置形式返回一个新的值，但后置返回原来的值；

var n = 6
var m = 16
console.log(n++,++m)//6 17  自增自减的值被使用的时候（有区别）
console.log(n,m)//7 17   自增自减的值不被使用的时候（无区别）

1.6.比较运算符

• 我们知道，在数学中有很多用于比较大小的运算符，在JavaScript中也有相似的比较：

  • 大于 / 小于：a > b，a < b。
  • 大于等于 / 小于等于：a >= b，a <= b。
  • 检查两个值的相等：a == b，请注意双等号 == 表示相等性检查，而单等号 a = b 表示赋值。
  • 检查两个值不相等：不相等在数学中的符号是 ≠，但在 JavaScript 中写成 a != b。

• 比较运算符的结果都是Boolean类型的

运算符	运算规则	范例	结果
==	相等	3==2	false
!=	不等于	3!=2	true
>	大于	3>2	true
<	小于	3<2	false
>=	大于等于	3>=2	true
<=	小于等于	3<=2	false

1.7.=== 和 == 的区别

• 普通的相等性检查 == 存在一个问题，它不能区分出 0 和 false，或者空字符串和 false这类运算：
  • 这是因为在比较不同类型的值时，处于判断符号 == 两侧的值会先被转化为数字；
  • 空字符串和 false 也是如此，转化后它们都为数字 0；
• 如果我们需要区分 0 和 false，该怎么办？
  • 严格相等运算符 === 在进行比较时不会做任何的类型转换；
  • 换句话说，如果 a 和 b 属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false；
• 同样的，“不相等”符号 != 类似，“严格不相等”表示为 !==。
• 严格相等的运算符虽然写起来稍微长一些，但是它能够很清楚地显示代码意图，降低你犯错的可能性。

console.log("" == 0) //true
console.log("" === 0) //false

1.8.运算符优先级

• 运算符放到一起使用时会有一定的优先级：
• 在MDN上给出了所有运算符的优先级（不用去记）运算符优先级 (opens new window)

2、JavaScript分支语句

2.1.程序的执行顺序

• 在程序开发中，程序有三种不同的执行方式：
  • 顺序 —— 从上向下，顺序执行代码
  • 分支 —— 根据条件判断，决定执行代码的 分支
  • 循环 —— 让 特定代码 重复 执行

2.2.代码块的理解

• 代码块是多行执行代码的集合，通过一个花括号{}放到了一起。
  • 在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中

{
    var name = 'why'
    var message = 'my name is' + name
    console.log(message)
}

• 在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块：
  • 通常会通过一些关键字来告知js引擎代码要如何被执行；
  • 比如分支语句、循环语句对应的关键字等；

2.3.什么是分支结构？

• 程序是生活的一种抽象, 只是我们用代码表示了出来

  • 在开发中, 我们经常需要根据一定的条件, 来决定代码的执行方向
  • 如果 条件满足，才能做某件事情
  • 如果 条件不满足，就做另外一件事情

• 分支结构

  • 分支结构的代码就是让我们根据条件来决定代码的执行
  • 分支结构的语句被称为判断结构或者选择结构.
  • 几乎所有的编程语言都有分支结构（C、C++、OC、JavaScript等等）

• JavaScript中常见的分支结构有：

  • if分支结构
  • switch分支结构

2.4.if分支语句

• if分支结构有三种：
• 单分支结构：if..
• 多分支结构：if..else.. 和 if..else if..else..

2.5.单分支语句

• 单分支语句：if
  • if(...) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块。

/*(案例一:
    如果小明考试超过90分, 就去游乐场 
    “如果”相当于JavaScript中的关键字if
    分数超过90分是一个条件(可以使用 > 符号) 
    */

var fraction = 91
if(fraction > 90) console.log('去游乐场玩')//如果代码块中只有一行代码，可以省略{}




/*(案例二：
     单位5元/斤的苹果，如果购买超过5斤，那么立减8元 
     注意：这里我们让用户输入购买的重量，计算出最后的价格并且弹出结果
     */

var jin = 6
var total = 0
if(jin > 5) {
    total = 5 * jin - 8
    console.log(`需要支付${total}元`)//需要支付22元
}

• f语句的细节补充
  • 补充一：如果代码块中只有一行代码，那么{}可以省略：
  • 补充二：if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型（Boolean）。
    • 转换规则和Boolean函数的规则一致；
    • 数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。 因为它们被称为“假值（falsy）”；
    • 其他值被转换为 true，所以它们被称为“真值（truthy）”；

2.6.多分支语句：if.. else..

• 多分支语句一： if.. else..
  • if 语句有时会包含一个可选的 “else” 块。
  • 如果判断条件不成立，就会执行它内部的代码。

// - 案例一：如果分数超过90分去游乐场，否则去上补习班
//   - 满足条件时，做某些事情
//   - 不满足（else），去做另外一些事情
var fraction = 91
if(fraction > 90){
    console.log('去游乐场玩')
}else {
    console.log('去上补习班')
}


// - 案例二：m=20，n=30，比较两个数字的大小，获取较大的那个数字
var m = 20
var n = 30
if(n>m) {
  console.log(`最大值是${n}`)
}else {
  console.log(`最大值是${m}`)
}

2.7.多分支结构： if.. else if.. else..

• 多分支结构： if.. else if.. else..
  • 有时我们需要判断多个条件；
  • 我们可以通过使用 else if 子句实现；

// 案例: 分数评级：
//   考试分数大于90：优秀
//   大于80小于等于90：良好
//   大于60小于等于80：合格
//   小于60分：不及格

var fraction = 60

if(fraction >= 90) {
    alert('优秀')
}else if(fraction >= 80) {
    alert('良好')
}else if(fraction >= 60) {
    alert('合格')
}else {
    alert('不及格')
}

2.8.switch语句

• switch是分支结构的一种语句：

  • 它是通过判断表达式的结果（或者变量）是否等于case语句的常量，来执行相应的分支体的；

• 与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断；

• switch的语法：

  • switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

switch(变量) {
    case 常量1:
      //语句一
      break
    case 常量二:
      //语句二
      break
    default:
      //语句三
}

2.9.switch语句的补充

• case穿透问题：一条case语句结束后，会自动执行下一个case的语句；这种现象被称之为case穿透；

var num = 1

switch(num) {
    case 1:
      console.log('1')
    case 2:
      console.log('2')
    default:
      console.log('默认数字')
}
//上面打印：1 2  默认数字   【出现了case穿透，语句下面加break就可以解决】

• break关键字：通过在每个case的代码块后添加break关键字来解决这个问题（case穿透问题）；

var num = 1

switch(num) {
    case 1:
      console.log('1')
      break
    case 2:
      console.log('2')
      break
    default:
      console.log('默认数字')
}
//上面打印：1   【在每个case的代码块后添加break关键字，解决了case穿透】

• 注意事项：这里的相等是严格相等。被比较的值必须是相同的类型才能进行匹配。
• 案例练习：播放模式（单曲循环、循环播放、随机播放）

3、三元运算符和逻辑运算符

3.1.三元运算符

• 有时我们需要根据一个条件去赋值一个变量。

  • 比如比较数字大小的时候，获取较大的数字；
  • 这个时候if else语句就会显得过于臃肿，有没有更加简介的方法呢？

• 条件运算符：’?’

  • 这个运算符通过问号 ? 表示；
  • 有时它被称为三元运算符，被称为“三元”是因为该运算符中有三个操作数（运算元）；
  • 实际上它是 JavaScript 中唯一一个有这么多操作数的运算符；

• 使用格式如下:

  • 计算条件结果，如果结果为真，则返回 value1，否则返回 value2。

var result = condition ? value1 : value2

// 案例一： m=20，n=30，比较两个数字的大小，获取较大的那个数字
var m = 20
var n = 30
var max = m>n ? m : n
console.log(max)//30

// 案例二：判断一个人是否是成年人了
//prompt返回的是一个字符串
var age = Number(prompt('请输入年龄'))
alert(age>=18 ? '成年了' : '未成年')

3.2.认识逻辑运算符

• 逻辑运算符，主要是由三个：
  • ||（或），&&（与），!（非）
  • 它可以将多个表达式或者值放到一起来获取到一个最终的结果；

运算符	运算规则	范例	结果
&&	与：同时为真	false && true	false
||	或：一个为真	false || true	true
!	非：取反	!false	ture

• 有了逻辑运算符，我们就可以在判断语句中编写多个条件。

3.3.逻辑或的本质

• ||（或）两个竖线符号表示“或”运算符（也称为短路或）：

  • 从左到右依次计算操作数。
  • 处理每一个操作数时，都将其转化为布尔值（Boolean）；
  • 如果结果是 true，就停止计算，返回这个操作数的初始值。
  • 如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数。

• 注意：返回的值是操作数的初始形式，不会转换为Boolean类型。

• 总结：换句话说，一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值。

console.log("" || "dsvgfsfs"|| null || NaN || 1 || 0 || undefined)//dsvgfsfs 或运算返回第一个真值
console.log("" ||  null || NaN || 0 || undefined)//undefined  如果不存在真值，就返回该链的最后一个值。

3.4.逻辑与的本质

• &&（与）两个&符号表示“与”运算符（也称为短路与）：

  • 从左到右依次计算操作数。
  • 在处理每一个操作数时，都将其转化为布尔值（Boolean）；
  • 如果结果是 false，就停止计算，并返回这个操作数的初始值（一般不需要获取到初始值）；
  • 如果所有的操作数都被计算过（例如都是真值），则返回最后一个操作数。

• 总结：换句话说，与运算 返回第一个假值，如果没有假值就返回最后一个值。

console.log('dsfsd' && NaN && true && false)//NaN  与运算 返回第一个假值
console.log('dsfsd' && 3343 && true && 1)//1 如果没有假值就返回最后一个值。

3.5.!（非）

• 逻辑非运算符接受一个参数，并按如下运算：

  • 步骤一：将操作数转化为布尔类型：true/false；
  • 步骤二：返回相反的值；

• 两个非运算 !! 有时候用来将某个值转化为布尔类型：

  • 也就是，第一个非运算将该值转化为布尔类型并取反，第二个非运算再次取反。
  • 最后我们就得到了一个任意值到布尔值的转化。

var num = 10
var n = "111"
console.log(Boolean(num))//true  之前学习的将某个值转成布尔类型的方法
console.log(!!n)//true  将某个值转成布尔类型的新方法：!!类型
console.log(Boolean({}))//true
console.log(!{})//false

4、循环语句：while循环 和 for循环

4.1.认识循环

• 在开发中我们经常需要做各种各样的循环操作：

  • 比如把一个列表中的商品、歌曲、视频依次输出进行展示；
  • 比如对一个列表进行累加计算；
  • 比如运行相同的代码将数字 1 到 10 逐个输出；

• 循环 是一种重复运行同一代码的方法。

  • 如果是对某一个列表进行循环操作，我们通常也会称之为 遍历（traversal）或者迭代（iteration）；

• 在JavaScript中支持三种循环方式：

  • while循环；
  • do..while循环；
  • for循环；

4.2.while循环

• while循环的语法如下：
  • 当条件成立时，执行代码块；
  • 当条件不成立时，跳出代码块；

while(循环条件) {
  //循环代码块
}

// 案例一：打印10次Hello World
var n = 0
while(n<10) {
  console.log('Hello World',++n)
}

• 如果条件一直成立（为true），那么会产生死循环。
  • 这个时候必须通过关闭页面来停止死循环；
  • 开发中一定要避免死循环的产生；

//产生死循环
var n = 4
while(n<6) {
  console.log(n--)
}

• 案例练习

    // 1.练习一: 打印10次Hello World
    // var count = 0
    // while (count < 10) {
    //   console.log("Hello World:", count)
    //   count++ // 10
    // }

    // 2.练习二: 打印0~99的数字
    // var count = 0
    // while (count < 100) {
    //   console.log(count)
    //   count++
    // }

    // 3.练习三: 计算0~99的数字和
    // var count = 0
    // var totalCount = 0
    // while (count < 100) {
    //   totalCount += count
    //   count++
    // }
    // console.log("totalCount:", totalCount)

    // 4.练习四: 计算0~99的奇数和
    // 如何判断一个数字是奇数还是偶数
    // var num = 120
    // if (num % 2 !== 0) { // 奇数
    //   console.log("num是一个奇数")
    // }
    // var count = 0
    // var totalCount = 0
    // while (count < 100) {
    //   if (count % 2 !== 0) {
    //     totalCount += count
    //   }
    //   count++
    // }

    // console.log("所有的奇数和:", totalCount)


    // 5.练习五: 计算0~99的偶数和
    var count = 0
    var totalCount = 0
    while (count < 100) {
      if (count % 2 === 0) {
        totalCount += count
      }
      count++
    }

    console.log("所有的偶数和:", totalCount)

    // 算法优化
    var count = 0
    var totalCount = 0
    while (count < 100) {
      totalCount += count
      count += 2
    }

    console.log("所有的偶数和:", totalCount)

4.3.do..while循环

• do..while循环和while循环非常像，二者经常可以相互替代(不常用)
  • 但是do..while的特点是不管条件成不成立，do循环体都会先执行一次；

do{
  //循环代码块
}while(循环条件)
  
  
//案例一
  var n = 9
  do{
    console.log('我执行了，虽然我不满足循环条件')//我执行了，虽然我不满足循环条件
  }while(n>10)
  
//案例二
  var m = 0 
  do{
    console.log(m++)//0 1 2
  }while(m<3)

• 通常我们更倾向于使用while循环。

4.4.for循环

• for 循环更加复杂，但它是最常使用的循环形式

for (begin; condition; step) {
  //循环代码块
}

//案例如：（初学者可跟下面表格一起理解）
for(var i = 0; i < 3; i++) {
  alert(i)
}

语句段	例子	执行过程
begin	let i = 0	进入循环时执行一次
condition	i < 3	在每次循环迭代之前检查，如果为 false，停止循环。
body(循环体)	alert(i)	条件为真时，重复运行。
step	i++	在每次循环体迭代后执行

• begin只执行一次，然后进行迭代：每次循环都会检查 condition条件，若为true，执行 body 和 step；若为false，则循环立即终止

//案例练习
    // 1.打印10次Hello World
    // for (var i = 0; i < 10; i++) {
    //   console.log("Hello World")
    // }

    // 2.打印0~99的数字
    for (var i = 0; i < 100; i++) {
      console.log(i)
    }

    // 3.0~99的数字和
    var totalCount = 0
    for (var i = 0; i < 100; i++) {
      totalCount += i
    }
    console.log("totalCount:", totalCount)

    // 4.0~99的奇数和
    var totalCount = 0
    for (var i = 0; i < 100; i++) {
      if (i % 2 !== 0) {
        totalCount += i
      }
    }
    console.log("totalCount:", totalCount)

    // 算法优化
    var totalCount = 0
    for (var i = 1; i < 100; i+=2) {
      totalCount += i
    }
    console.log("totalCount:", totalCount)

4.5.for循环的嵌套

• 什么是循环的嵌套呢？（日常开发使用不算多，在一些算法中比较常见）
  • 在开发中，某些情况下一次循环是无法达到目的的，我们需要循环中嵌套循环；

//案例一：九九乘法表
<style>
  table {
    border-collapse: collapse;
  }

  td {
    padding: 8px 16px;
    border: 1px solid orange;
    color: red;
}
</style>

<script>
  document.write("<table>")	
  for (var i = 0; i < 9; i++) {
    document.write("<tr>")

    for (var m = 0; m < i + 1; m++) {
      var a = m + 1
      var b = i + 1
      var result = (m + 1) * (i + 1)
      document.write(`<td>${a}*${b}=${result}</td>`)// document.write(`<td>${a} * ${b} = ${result}</td>`)  这里运算符之间不要加空格，否则当浏览器的窗口变小，会影响布局
    }

    document.write("</tr>")
}
  document.write("</table>")
</script>

4.6.循环控制break 和 continue

• 循环的跳转（控制）：

  • 在执行循环过程中, 遇到某一个条件时, 我们可能想要做一些事情；
  • 比如循环体不再执行(即使没有执行完), 跳出循环；
  • 比如本次循环体不再执行, 执行下一次的循环体；

• 循环的跳转控制

  • break: 直接跳出循环, 循环结束
    • break 某一条件满足时，退出循环，不再执行后续重复的代码
  • continue: 跳过本次循环次, 执行下一次循环体
    • continue 指令是 break 的“轻量版”。
    • continue 某一条件满足时，不执行后续重复的代码；继续执行下一次循环体

var names = ["abc", "cba", "nba", "mba", "bba", "aaa", "bbb"]

// 循环遍历数组
// break关键字的使用
// 需求: 遇到nba时, 不再执行后续的迭代
// for (var i = 0; i < 4; i++) {
//   console.log(names[i])
//   if (names[i] === "nba") {
//     break //直接退出循环
//   }
// }

// continue关键字的使用: 立刻结束本次循环, 执行下一次循环(step)
// 需求: 不打印nba
for (var i = 0; i < 7; i++) {
  if (names[i] === "nba" || names[i] === "cba") {
    continue
  }
  console.log(names[i])//abc mba bba aaa bbb
}

4.7.猜数字游戏

• 猜数字游戏规则：
  • 电脑随机生成一个0~99之间的数字；
  • 玩家有7次猜测的机会；
  • 玩家猜测一个数字, 输入到程序中；
  • 电脑根据输入的数字打印: 猜大了/猜小了/猜对了的情况；
  • 猜对了, 那么游戏结束，显示恭喜您；
  • 7次机会用完打印: 您的次数用完了, 您失败了；

 // 1.随机生成一个0~99的数字
    var randomNum = Math.floor(Math.random() * 100)
    alert(randomNum)

    // 2.玩家有7次机会猜测数字
    var isSuccess = false
    var count = 7
    for (var i = 0; i < count; i++) {
      // 获取用户的输入
      var inputNum = Number(prompt("请输入您猜测的数字:"))

      // 和randomNum进行比较
      if (inputNum === randomNum) {
        alert("恭喜您, 猜对了")
        isSuccess = true
        break
      } else if (inputNum > randomNum) {
        alert("您猜大了")
      } else {
        alert("您猜小了")
      }

      if (i === count - 1) {
        alert("您的次数已经用完了")
      }
    }

    // if (!isSuccess) {
    //   alert("您的机会用完了~")
    // }

//猜数字游戏升级：

    //设置玩家猜数字的机会次数
    var count = 7
    function foo() {
      // 获取0~99的随机数
      var num = Math.floor(Math.random() * 100)
      
      //在html显示每次获取的随机数
      document.write(`<div>该次的正确数字是${num}</div>`)

      setTimeout(function () {
        for (var i = 0; i < count; i++) {
          //获取玩家猜测的数字
          var n = Number(prompt(`请输入一个你要猜的数字(0~99之间)：您有${count}次机会，第${i + 1}次机会`))
          //猜测的数字跟生成的随机数进行比较
          if (n === num) {
            count -= 1
            if (count === 0) {
              alert('恭喜你成功通过所有关卡！')
              break
            } else {
              alert(`恭喜你猜对了,进入下一关只有${count}次猜测机会哦`)
            }
            foo()
            break
          } else if (n > num) {
            alert('你猜大了哦')
          } else {
            alert('你猜小了哦')
          }

          if (i === count - 1) {
            alert('游戏失败，你的机会已经用完啦！')
          }
        }
      }, 100)

    }
    foo()

4.8.循环的总结

• 我们学习了三种循环：

  • while —— 每次迭代之前都要检查条件；
  • do..while —— 每次迭代后都要检查条件；
  • for ( ; ; ) —— 每次迭代之前都要检查条件，可以使用其他设置；

• break/continue 可以对循环进行控制