JavaScript 基础第二天

算术运算符:

  1. 经常作为某个数字是否被整除
  2. 数学运算也叫算术运算, 主要包括加、减、乘、除、取余(取模)
  3. +：求和、-：求差、*：求积、/：求商、%：取余

算术运算符优先级顺序:

  1. 同时使用多个运算符写程序时, 会按某种顺序先后执行, 称为优先级

  2. js中, 优先级越高越先被执行, 优先级相同时左向右执

  3. 乘、除、取余优先级相同, 加、减优先级相同

  4. 乘、除、取余优先级大于加、减

  5. 使用()可以提升优先级

  6. 总结: 先乘除后加减，有括号先算括号里的

  7. 计算圆的面积:

1
2
3
4
let num1 = prompt('请输入您的半径')
let num2 = 3.14 * num1 * num1
alert(`计算之后圆的面积是: ${3.14 * num1 * num1}`)
alert(`计算之后圆的面积是: ${num2}`)

赋值运算符:

  1. 对变量进行赋值的运算符, 使用这些可对变量赋值时快速操作

  2. 学过的赋值运算：= 将等号右边值赋予给左边, 要求左边必须是一个容器

  3. 其他赋值运算符: +=, -=, *=, /=, %=, let num = 10 ， num加5 赋值写就是: num += 5

二元运算符:

  1. 经常用于计数来使用, 比如进行10次操作，用它来计算进行多少次
  2. 众多js运算可根据所需表达式的个数，分为一元、二元、三元运算符
  3. 前置和后置自增单独使用没有区别
  4. 前置和后置自增参与运算就有区别
  5. 前置：先自增后运算
  6. 后置：先运算后自增
1
let num = 10 + 20
  1. 以前让一个变量每次+1 ，我们怎么做的呢？
1
2
3
4
5
let num = 1
let = num + 1
// 现在可以这样做
let num = 1
num += 1
自增运算符的用法:

  1. 一般开发中都是独立使用, 后面 i++ 后置自增会使用较多

1
2
3
// 面试题 问: 输出结果是多少?
let num = 10
console.log(num++ + ++num + num)

比较运算符:

  1. 比较两个数据大小、是否相等, 尽量不比较小数，因为小数有精度问题
  2. NaN不等于任何值，包括它本身
  3. 不同类型之间比较会发生隐式转换, 最终把数据隐式转成number类型再比较
  4. 字符串比较，比较的字符对应的ASCII码, 从左往右依次比较

比较运算符的使用:

> ： 左边是否大于右边 <：左边是否小于右边
>=：左边是否大于等于右边 <=：左边是否小于等于右边
==：左右两边是否相等 == ===：左右两边是否类型和值都相等
!==：左右两边是否不全等 比较结果为布尔型，只会得到true或false

逻辑运算符:

  1. 逻辑运算符用来解决多重条件判断
符号 名称 读法 口诀 特点
&& 逻辑与 并且 一假则假 两边都为true 结果才为true
|| 逻辑或 或者 一真则真 两边有一个true 结果为true
! 逻辑非 取反 真变假, 假变真 true变false false变true

逻辑运算符里的短路:

  1. 只存在于**&&和||中**，当满足条件会让右边代码不执行
  2. &&: 左边为false就短路、||: 左边为true就短路
  3. 原因：通过左边能得到整个式子结果，因此没必要再判断右边
  4. 运算结果: 无论&&还是|| ，结果都是最后被执行的表达式值，一般用在变量赋值
1
2
3
4
5
6
7
// 五个短路: false 0 '' undefined null
console.log(false && 10)
console.log(6 > 7 && 10)
console.log(undefined && 10)
console.log(null && 10)
console.log(0 && 10)
console.log(10 && 20)
  1. 用户输入一个数, 判断一个数是4的倍数，且不是100的倍数:
1
2
3
let num = prompt('请输入一个数')
nm1 = num || 0
console.log(num % 4 === 0 && num % 100 !== 0)

运算符优先级:

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

  2. 逻辑与比逻辑或优先级高

1
2
3
4
5
6
7
8
9
10
11
12
// a为false 此时发生了逻辑与中断
let a = 3 > 5 && 2 < 7 && 3 == 4
console.log(a)
// b为true 此时发生了逻辑或中断
let b = 3 <= 4 || 3 > 1 || 3 != 2
console.log(b)
// c为false 数据类型不匹配
let c = 2 === '2'
console.log(c)
// d为true 此时发生了逻辑或中断
let d = !c || b && a
console.log(d)

表达式和语句:

  1. 表达式是一组代码的集合，js解释器会计算出一个结果
  2. 某些情况, 也可把表达式理解为语句, 因为它在计算结果, 也是做事
  3. 表达式是计算出一个值，语句用来自行使某件事发生(做什么事)
  4. 表达式: 3 + 4 , 语句: alert() 弹出对话框
  5. js语句是以分号结束 (可省略) , 如: if语句 for循环

分支语句:

  1. 程序三大流程控制语句: 顺序, 分支, 循环

  2. 以前写代码，写几句就从上往下执行几句，这种叫顺序结构

  3. 有时候根据条件选择执行代码，这种就叫分支结构

  4. 某段代码被重复执行, 叫循环结构

  5. 分支语句包含: if分支语句, 三元运算符, switch语句

1. if语句:

  1. if语句有三种使用：单分支、双分支、多分支
  2. 括号内的条件为true时，就进入大括号里执行代码
  3. 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

1. 单分支if语法：

1
2
3
4
// if括号里执行是布尔型, 可以是比较运算和字符串类型
if (条件) {
    alert('满足条件执行的代码')
}

2. 双分支if语法:

1
2
3
4
5
6
7
8
let num = +prompt('请输入年份')
// 能被4整除但不能被100整除，或被400整除的年份是闰年，否则都是平年
if (num % 4 === 0 && num % 100 !== 0 || num % 400 === 0) {
    alert(`${num}年是闰年`)
} else {
// 不被4整除则执行是平年
    alert(`${num}年是平年`)
}

3. 多分支if语法:

  1. 先判断条件1, 若满足条件1就执行代码1, 其他不执行
  2. 若不满足则向下判断条件2, 满足条件2则执行代码2, 其他不执行
  3. 若依然不满足则继续往下判断, 依次类推
  4. 若以上条件都不满足, 则执行else里的代码, 可写N个条件
1
2
3
4
5
6
7
8
9
10
11
// 根据输入不同时间，输出不同问候语
let num2 = +prompt('请输入当前时间: ')
if (num2 < 12) {
    alert('上午好, 好好工作')
} else if (num2 < 17) {
    alert('下午好, 好好工作')
} else if (num2 < 19) {
    alert('晚上好, 好好加班')
} else {
    alert('夜深了~ 头发还有吗?')
}

2. 三元运算符:

  1. 符号：**? 与 :** 配合使用, 用来取值
  2. 其实是比if双分支更简单的写法, 也叫做三元表达
  3. 语法：条件 ? 满足条件执行代码 : 不满足条件执行代码
1. 判断2个数的最大值:
1
2
3
4
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
let num3 = num1 > num2 ? num1 : num2
console.log(num3)
2. 数字小于10补0:
  1. 用户输入1个数，如果数字小于10，则前面进行补0, 如: 01 02
1
2
3
4
let num1 = prompt('请输入一个数')
let num2 = num1 >= 10 ? num1 : '0' + num1
// let num2 = num1 < 10 ? '0' + num1 : num1
console.log(num2)

3. Switch 语句:

  1. switch case语句用于等值判断, 不适合用于区间判断
  2. switch case需要配合break关键字使用, 没有break会造成case穿透
  3. 找到跟小括号里数据全等的case值，并执行里面对应的代码
  4. 若没有全等 === 的则执行default里的代码
  5. break: 结束switch语句，防止穿透
1
2
3
4
5
6
7
8
9
10
11
12
switch (1) {
    case 1:
        alert('我是1')
        break
    case 2:
        alert('我是2')
        break
    case 3:
        alert('我是3')
    default:
        alert('没有数据')
}

简单计算器:

  1. 用户输入2个数字, 然后输入+ - * /，可执行不同运算结果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
let num3 = prompt('请输入想要的运算: + - * /')
switch (num3) {
    case '+':
        alert(`你输入了+运算, 两个数结果为${num1 + num2}`)
        break
    case '-':
        alert(`你输入了-运算, 两个数结果为${num1 - num2}`)
        break
    case '*':
        alert(`你输入了*运算, 两个数结果为${num1 * num2}`)
        break
    case '/':
        alert(`你输入了/运算, 两个数结果为${num1 / num2}`)
        break
    default:
        alert('你输入了啥? 请在 + - * / 中选择')
}

4. 循环结构:

  1. 学习时可帮助更好理解代码运行, 工作时可更快找到bug

  2. 断点: 在某句代码上加标记叫断点, 程序执行到这句有标记的代码时会暂停下来

While 循环:

  1. 循环: 重复执行某段代码

  2. 跟if语句很像，都要满足小括号里的条件为true才会执行代码

  3. while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件, 直到括号内条件不满足,即跳出

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

循环需要具备三要素：

  1. 变量起始值
  2. 终止条件 (没有终止条件, 循环会一直执行, 造成死循环
  3. 变量变化量 (自增或自减)
1
2
3
4
5
6
7
8
9
// 1.变量的起始值
let num = 1
// 2.终止条件 循环条件
while (num <= 5) {
// 4.重复执行的代码(循环体)
    document.write('你好')
// 3.变量变化
    num++
}
  1. 页面输出1-10:
1
2
3
4
5
let num = 1
while (num <= 10) {
    document.write(num)
    num++
}
  1. 计算从1加到100总和并输出
1
2
3
4
5
6
7
8
// 声明累加和的变量num2, 每次把num1加到num2里
let num1 = 1
let num2 = 0
while (num1 <= 10) {
    num2 += num1
    num1++
}
document.write(num2)
  1. 计算1-100之间所有偶数的和
1
2
3
4
5
6
7
8
9
10
// 首先利用if语句把num1里是偶数筛选出来, 把筛选的num1加到num2里
let num1 = 1
let num2 = 0
while (num1 <=10) {
    if (num1 % 2 === 0) {
        num2 += num1
    }
    num1++
}
document.write(num2)
  1. 弹出对话框，‘你喜欢我吗’，如果输‘喜欢’, 则结束, 否则一直弹出对话框:
1
2
3
4
5
6
7
while (true) {
    let num = prompt('我喜欢你, 你喜欢我吗?')
    if (num === '喜欢') {
        alert('我也喜欢你')
        break
    }
}
  1. 用户登录验证, 输入用户名和密码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 若用户名为admin, 且密码为123456, 则提示登录成功, 否则让用户一直输入
let username = prompt('请输入用户名')
let password = prompt('请输入密码')
while (true) {
if (username == 'admin' && password == 123456)
    {
        alert('登录成功')
        break
    } else {
        alert('用户名或密码错误, 请重新输入')
        let username = prompt('请输入用户名')
        let password = prompt('请输入密码')
    if (username == 'admin' && password == 123456) {
        alert('登录成功')
        break
    }            
    }
}
  1. 求1-100之间个位数不为3的数累加和
1
2
3
4
5
6
7
8
9
let num1 = 1
let num2 = 0
while (num1 <= 100) {
    if (num1 % 10 !== 3) {
        num2 += num1
    }
    num1++
}
console.log(num2)

5. 循环退出: continue和break的区别

  1. continue：结束本次循环, 继续下次循环
  2. break：跳出所在的循环
1
2
3
4
5
6
7
8
9
10
11
12
let num1 = 1
while (num1 <= 6) {
    if (num1 === 2) {
        num1++
        // 结束本次循环, 继续下次循环
        continue
        // 退出循环
        // break
    }
    document.write(`我吃了${num1}个苹果<br>`)
    num1++
}
ATM取款机案例:
  1. 输入不同的值, 用Switch来执行不同的操作
  2. 用户可存钱、取钱、查看余额和退出
  3. 循环的时候, 需反复提示输入框, 所以提示框写到循环里
  4. 退出条件是用户输入 4, 如果是4, 则结束循环, 不再弹窗
  5. 提前准备100金额预先存储一个数额
  6. 取钱存钱则用加减法, 查看余额则直接显示金额
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 3. 金额的变量, 先存储100
let money = 100
// 1. 不断弹出对话框
while (true) {
    let operate = prompt(`
    请输入您的操作:
    1. 取钱
    2. 存钱
    3. 查看余额
    4. 退出
    `)
// 2. 输入4退出对话框 不输入则死循环弹出对话框
if (operate === '4') {
    break
} 
// 4. 用switch实现取钱存钱操作
switch (operate) {
    case '1':
        let take = +prompt('请输入取钱金额:')
        money -= take
        break
    case '2':
        let deposit = +prompt('请输入存钱金额:')
        money += deposit
        break
    case '3':
        let see = alert(`您的金额还有${money}`)
        break
}
}

本节单词:

  1. if
  2. else
  3. switch
  4. case
  5. while
  6. continue
  7. break
  8. default