持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
JavaScript 基础 (二)
流程控制
运算符
算术运算符
赋值运算符
- 对变量进行赋值，将右边的值赋值给左边，左边必须是个容器；
- +=、-=、*=、/=、%=
- +=：num += 1 自加1
一元运算符
只需要一个表达式就可以运算的运算符就是一元运算符
自增：只能每次自增1
- 符号 ：++
- 让变量的值+1
- 前置自增 （++在前，先自加） 后置自增 （++在后，后加）
- 两者单独使用没有区别：一般通常使用后置自增
- 一般开发中，会单独使用
比较运算符
判断结果只会是 true ，false；
- 比较两个数据大小，是否相等
- == 有隐式转换：会把‘2’转换为2；只判断值
- === 全等，判断 值 和 数据类型 都一样才行，以后判断是否相等，直接用===；
- = 是赋值，== 是判断， === 全等；
- ！== 不全等
- NaN不等于任何值，包括自己；涉及到的，都是false
- 尽量不要比较小数，精度
- 不同类型之间会有隐式转换
逻辑运算符
使用场景：用来解决多重条件判断
- && ： 逻辑与，一假则假，并且
- || ：逻辑或，一真则真，要么...要么...
- ！ ： 逻辑非，取反，一元运算，真变假，假变真；
let num = +prompt('请输入第一个数：')
alert(num % 4 === 0 && num % 100 !== 0)
运算符优先级
- 小括号 > 一元 > 算数 > 关系（比较）> 相等 > 逻辑 > 赋值 > 逗号
- 逻辑：非>与>或
语句
表达式 和 语句
- 表达式是可以被求值的代码，会将其计算出一个结果；可以写在赋值语句的右侧
- 语句是一段可以执行的代码，不一定有值
分支语句
程序三大流程控制语句
- 顺序结构：从上往下执行
- 分支结构：根据条件选择执行代码
- 循环结构：某段代码被重复执行
分支语句：选择性的执行代码
if分支：
-
单分支
- if （true或者false）｛被执行的代码｝
- 小括号里有隐式转换，会转换为布尔型
- 除了0 ，所有的数字都为真（true）
- 除了空字符串，所有都为真（true）
let num = +prompt('请输入您的高考成绩：') if (num >= 700) { alert('恭喜考入加里敦大学') } -
双分支
- 二选一的执行代码
- if （true或者false） ｛被执行的代码｝else ｛｝
let uname = prompt('请输入用户名：')
let password = prompt('请输入登录密码：')
if (uname === '屈度' && password === '12345678') {
alert('登录成功')
} else {
alert('登录失败，用户名或密码错误，请重新输入')
}
// 用户输入
let year = +prompt('请输入年份：')
// 判断输出
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert(`${year}是闰年`)
} else {
alert(`${year}是平年`)
}
多分支
- 适用于有多个结果的时候，多选一
let score = +prompt('请输入您的成绩：')
if (score >= 90) {
alert('优秀')
} else if (score >= 70) {
alert('良好')
} else if (score > 60) {
alert('及格')
} else {
alert('不及格')
}
三元符
- 条件？满足条件执行的代码：不满足条件执行的代码
- 一般用来取值，适合于比较简单的if else语句
- 案例：补0案例
//用户输入一个值
let num = prompt('请输入一个数值：')
// 如果这个值小于10 ，那么
num = num < 10 ? 0 + num : num
alert(num)
- 案例：比较两个值的大小：
let max = +prompt('请输入最大的值：')
let min = +prompt('请输入最小的值：')
max > min ? alert(`最大的值是：${max}`) : alert(`最大的值是：${min}`)
swich
- 找到小括号里数据全等的case值，并执行里面对应的代码
- 做没有全等=== 的则执行default里的代码
- 注意
- switch case 语句一般用于等值判断，不适合于区间判断
- switch case 一般需要配合break关键字使用，没有break会造成case穿透；
循环语句
断点调试:可以帮我们更好的理解代码,更快速的找到bug
while 循环:重复执行一些操作,在...期间,在满足条件期间,重复执行某些代码;
- 基本语法: while(循环条件) {重复执行的代码(循环体)}
- 循环三要素
- 变量起始值
- 终止条件
- 变量变化量(用自增或者自减)
break ：跳出所在的循环，直接结束大循环
continue：退出的是本次的小循环，可以继续下一个循环
综合案例
简易银行ATM取款
let money = 3000
while (true) {
let sp = +prompt(`
请选择您的选择：
1.存款
2.取款
3.查询余额
4.退出
`)
if (sp === 4) {
break
}
switch (sp) {
case 1:
let cun = +prompt('请输入您要存款的金额：')
money += cun
break
case 2:
let qu = +prompt('请输入您要取款的金额：')
money -= qu
break
case 3:
alert(`您的余额为：${money}`)
break
}
}
if 多分支语句和 switch的区别：
-
共同点
- 都能实现多分支选择， 多选1
- 大部分情况下可以互换
-
区别：
-
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
-
switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
-
switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
-
结论：
- 当分支比较少时，if…else语句执行效率高。
- 当分支比较多时，switch语句执行效率高，而且结构更清晰。
-
for 语句
掌握 for 循环语句，让程序具备重复执行能力
for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
for语句的基本使用
- 实现循环的 3 要素
<script>
// 1. 语法格式
// for(起始值; 终止条件; 变化量) {
// // 要重复执行的代码
// }
// 2. 示例：在网页中输入标题标签
// 起始值为 1
// 变化量 i++
// 终止条件 i <= 6
for(let i = 1; i <= 6; i++) {
document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
}
</script>
- 变化量和死循环，
for循环和while一样，如果不合理设置增量和终止条件，便会产生死循环。
- 跳出和终止循环
<script>
// 1. continue
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue // 结束本次循环，继续下一次循环
}
console.log(i)
}
// 2. break
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break // 退出结束整个循环
}
console.log(i)
}
</script>
结论：
- JavaScript 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。
- 起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
- 当如果明确了循环的次数的时候推荐使用
for循环,当不明确循环的次数的时候推荐使用while循环 for的语法结构更简洁，故for循环的使用频次会更多。
循环嵌套
利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。
实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：
// 1. 外面的循环 记录第n天
for (let i = 1; i < 4; i++) {
document.write(`第${i}天 <br>`)
// 2. 里层的循环记录 几个单词
for (let j = 1; j < 6; j++) {
document.write(`记住第${j}个单词<br>`)
}
}
记住，外层循环循环一次，里层循环循环全部
倒三角
// 外层打印几行
for (let i = 1; i <= 5; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
document.write('★')
}
document.write('<br>')
}
九九乘法表
// 外层打印几行
for (let i = 1; i <= 9; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
// 只需要吧 ★ 换成 1 x 1 = 1
document.write(`
<div> ${j} x ${i} = ${j * i} </div>
`)
}
document.write('<br>')
}
数组
知道什么是数组及其应用的场景，掌握数组声明及访问的语法。
数组是什么？
数组： (Array)是一种可以按顺序保存数据的数据类型
使用场景： 如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便
数组的基本使用
定义数组和数组单元
<script>
// 1. 语法，使用 [] 来定义一个空数组
// 定义一个空数组，然后赋值给变量 classes
// let classes = [];
// 2. 定义非空数组
let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>
通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。
访问数组和数组索引
使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。
我们将数据单元在数组中的编号称为索引值，也有人称其为下标。
索引值实际是按着数据单元在数组中的位置依次排列的，注意是从 0 开始的，
<script>
let classes = ['小明', '小刚', '小红', '小丽', '小米']
// 1. 访问数组，语法格式为：变量名[索引值]
document.write(classes[0]) // 结果为：小明
document.write(classes[1]) // 结果为：小刚
document.write(classes[4]) // 结果为：小米
// 2. 通过索引值还可以为数组单重新赋值
document.write(classes[3]) // 结果为：小丽
// 重新为索引值为 3 的单元赋值
classes[3] = '小小丽'
document.wirte(classes[3]); // 结果为： 小小丽
</script>
数据单元值类型
数组做为数据的集合，它的单元值可以是任意数据类型
<script>
// 6. 数组单值类型可以是任意数据类型
// a) 数组单元值的类型为字符类型
let list = ['HTML', 'CSS', 'JavaScript']
// b) 数组单元值的类型为数值类型
let scores = [78, 84, 70, 62, 75]
// c) 混合多种类型
let mixin = [true, 1, false, 'hello']
</script>
数组长度属性
重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 数组对应着一个 length 属性，它的含义是获取数组的长度
console.log(arr.length) // 3
</script>
操作数组
数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：
- push 动态向数组的尾部添加一个单元
- unshit 动态向数组头部添加一个单元
- pop 删除最后一个单元
- shift 删除第一个单元
- splice 动态删除任意单元
使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 1. push 动态向数组的尾部添加一个单元
arr.push('Nodejs')
console.log(arr)
arr.push('Vue')
// 2. unshit 动态向数组头部添加一个单元
arr.unshift('VS Code')
console.log(arr)
// 3. splice 动态删除任意单元
arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
console.log(arr)
// 4. pop 删除最后一个单元
arr.pop()
console.log(arr)
// 5. shift 删除第一个单元
arr.shift()
console.log(arr)
</script>
