JavaScript 基础(2) - 笔记

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

1 运算符

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 赋值运算符

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

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

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

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

1.3 自增/自减运算符

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

++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用
++在后（后缀式）我们会使用更多

注意：

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

++、-- 可以在变量前面也可以在变量后面，比如: 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）。

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

对比：

=单等是赋值

==是判断

===是全等

开发中判断是否相等，强烈推荐使用 ===

涉及到NaN 都是 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 逻辑运算符

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

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

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

<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('---------------')
    // 逻辑或 一真则真
    console.log(true || true)  // true
    console.log(false || true)  // true
    console.log(false || false)  // false
    console.log('---------------')
    // 逻辑非 取反
    console.log(!true)  // false
    console.log(!false)  // true

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

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

1.6 练习：判断一个数是4的倍数，且不是100的倍数

需求：用户输入一个数，判断这个数能被4整除，但是不能被100整除，满足条件，页面弹出true，否则弹出false。

分析：

用户输入。
判断条件，看余数是不是0，如果是0就是能被整除，余数不是0，则不能被整除。

// 1.用户输入
let num = +prompt('请输入一个数字:')
// 2.弹出结果
alert(num % 4 === 0 && num % 100 !== 0)

1.7 运算符优先级

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

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

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

2 语句

2.1 表达式和语句

区别：

表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。

表达式 num =3+4

语句：而语句不一定有值，所以比如alert()for和break等语句就不能被用于赋值。

语句 alert() 弹出对话框 console.log() 控制台打印输出

某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分（例如continue语句）。

2.2 分支语句

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

分支语句包含：

if分支语句（重点）
三元运算符
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('恭喜考过700分')
    }
    console.log('-----------------')
  </script>

2.2.2 if 双分支语句

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

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

例如：

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

练习：判断闰年案例

需求：让用户输入年份，判断这一年是闰年还是平年并弹出对应的警示框。

分析：

能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年。
需要逻辑运算符。

<script>
    // 1.用户输入
    let year = +prompt('请输入年份:')
    // 2.判断输出
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
    
    
        alert(`${
      
      year}年是闰年`)
    } else {
    
    
        alert(`${
      
      year}年是平年`)
    }
</script>

2.2.3 if 多分支语句

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

练习：输入成绩案例

需求：根据输入不同的成绩，反馈不同的评价。

注：

成绩90以上是优秀
成绩70~90是良好
成绩是60~70之间是及格
成绩60分以下是不及格

 <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

案例：判断2个数的最大值

需求：用户输入2个数，控制台输出最大的值。

分析：

用户输入2个数。
利用三元运算符输出最大值。

// 1.用户输入
let num1 = +prompt('请您输入第一个数:')
let num2 = +prompt('请您输入第二个数:')
// 2.判断输出-三元运算符
// if (num1 > num2) {
   
   
//     alert(num1)
// } else {
   
   
//     alert(num2)
// }
num1 > num2 ? alert(`最大值是:${num1}`) : alert(`最大值是:${num2}`)

案例：数字补0

需求：用户输入1个数，如果数字小于10，则前面进行补0，比如 09 03 等。

分析：

为后期页面显示时间做铺垫。
利用三元运算符补 0 计算。

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

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

// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')
// let age = 18
// age = age + 1

// 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多分支语句功能相同。

注意：

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

例如：

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

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

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

案例：简单计算器

需求：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果。

分析：

用户输入数字。
用户输入不同算术运算符，可以去执行不同的运算（switch）。

// 1.用户输入 2个数字 +  操作符号 + - * /
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(`请输入+ - * /`)
        break
}

2.3 循环语句

2.3.1 断点调试

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

浏览器打开调试界面

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

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

2.3.2 while循环

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

1.语法：

while (条件表达式) {
   
   
   要重复执行的代码(循环体)    
}

释义：

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

例如：

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

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

2.while 循环三要素

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

循环三要素：

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

2.终止条件（没有终止条件，循环会一直执行，造成死循环）

3.变量的变化量（用自增或自减）

例如：

<script>
  // // 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++
}
</script>

练习：while 练习

需求：使用while循环，页面中打印，可以添加换行效果。

页面输出1-100

核心思路：利用 i ，因为正好和数字对应。

// 1.页面输出1~100
let i = 1
while (i <= 100) {
     
     
    document.write(`这是第${
       
       i}个数<br>`)
    i++
}

计算从1加到100的总和并输出

核心思路：
- 声明累加和的变量 sum
- 每次把 i 加到 sum 里面

// 2.页面输出1~100  累加和
let i = 1  // 变量的起始值
let sum = 0  // 累加和变量
while (i <= 100) {
     
     
    // sum = sum + i
    sum += i
    i++
}
console.log(sum)  // 5050

计算1-100之间的所有偶数和

核心思路：
- 声明累加和的变量 sum
- 首先利用if语句把 i 里面是偶数筛选出来
- 把筛选的 i 加到 sum 里面

// 3.页面输出1~100 偶数和
let i = 1
let sum = 0
while (i <= 100) {
     
     
    // 筛选偶数
    if (i % 2 === 0) {
     
     
        sum = sum + i
    }
    // 每次循环都要自加
    i++
}
console.log(sum)  // 2550

2.4 循环退出

2.4.1 中止循环

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

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

// 打印5句话
// let i = 1
// while (i <= 5) {
   
   
//     if (i === 3) {
   
   
//         break  // 退出整个循环
//     }
//     console.log(`我要吃${i}个包子`)
//     i++
// }  
let i = 1
while (i <= 5) {
   
   
    if (i === 3) {
   
   
        i++
        continue  // 结束本次循环
    }
    console.log(`我要吃${
     
     i}个包子`)
}

2.4.2 无限循环

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

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

案例：页面弹框

需求：页面弹出对话框，’你爱我吗‘，如果输入’爱‘，则结束，否则一直弹出对话框。

分析：

循环条件永远为真，一直弹出对话框。
循环的时候，重新让用户输入。
如果用户输入的是：爱，则退出循环（break）。

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

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

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

3 综合案例-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 += cun
            break
        case 2:
            // 取钱
            let qu = +prompt('请输入取款金额')
            money -= qu
            break
        case 3:
            // 存钱
            alert(`您的银行卡余额是${
     
     money}`)
            break
    }
}

JavaScript 基础(2) - 笔记

JavaScript 基础(2) - 笔记

1 运算符

1.1 算术运算符

1.2 赋值运算符

1.3 自增/自减运算符

1.4 比较运算符

1.5 逻辑运算符

1.6 练习：判断一个数是4的倍数，且不是100的倍数

1.7 运算符优先级

2 语句

2.1 表达式和语句

2.2 分支语句

2.2.1 if 分支语句

2.2.2 if 双分支语句

练习：判断闰年案例

2.2.3 if 多分支语句

练习：输入成绩案例

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

案例：判断2个数的最大值

案例：数字补0

2.2.5 switch语句（了解）

案例：简单计算器

2.3 循环语句

2.3.1 断点调试

2.3.2 while循环

练习：while 练习

2.4 循环退出

2.4.1 中止循环

2.4.2 无限循环

3 综合案例-ATM存取款机

热门文章

最新文章

相关课程

相关电子书

相关实验场景