JavaScript学习02
运算符
- 赋值运算符: 对变量进行赋值
= ; += ; -= ; *= ; /= ; %= ;
- 一元运算符
正负号;自增运算符++; 自减运算符-- ;
let i = 1
console.log(i++) // 1 后置自增,先执行语句再加法
console.log(++i) // 3 前置自增,先执行加法后执行语句,两次加法后为3
let ii = 1
console.log(ii++ + 1) // 2 后置自增,最后加法
// ++i i++ 单独使用没有区别 常用i++
复杂运算
let i = 1
console.log(i++ + ++i + i) // 7 = 1+3+3 第一次加法时左边是1,但i已经变成2
console.log(i) // 3
- 比较运算符
console.log(3 > 5) //false
console.log(3 >= 3) // true
console.log(2 == 2) //true
// == 会发生隐式转换
console.log(2 == '2') // true ‘2’变成了2 双等号只能判断值
console.log(undefined == null) // true
console.log(undefined === null) // false
console.log(2 === '2') // false 全等判断值和数据类型
// NaN的比较始终为false
console.log(NaN == NaN) // false
console.log(NaN === NaN) //false
字符串的比较是ASCII码的比较,且是逐位比较
console.log('a' < 'b') // true
console.log('a' < 'A') // false
console.log('aa' < 'ab') // true
console.log('aa' < 'abc') // true
- 逻辑运算符
- 运算符优先级
语句
- 表达式:可以被求值的代码,可以写在赋值语句的右侧
- 语句: 可以执行的一段代码
某些情况,表达式可以理解为表达式语句(例如continue)
程序三大控制语句
- 顺序结构 :从上往下顺序执行
- 分支结构 :根据条件选择执行代码
- 循环结构 :反复执行某段代码
分支语句
if 分支语句
单分支
if (条件) {
条件满足执行的代码
}
if{}中只有一条语句时,可以省略“{}”,但是并不推荐省略
// 单分支语句
// 除了数字0 其他数字都是true
if (0) {
console.log('执行1')
}
if (2) {
console.log('执行2')
}
// 除了空字符串 其他字符串
if ('') {
console.log('执行3')
}
if ('abc') {
console.log('执行4')
}
页面输出
双分支
if (条件) {
条件满足执行的代码块
} else {
不满足条件执行的代码块
}
判断闰年案例
// 1. 用户输入年份
// 2. 判断输入
let year = +prompt('请输入年份:')
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert('您输入的年份是闰年!')
console.log(`${year}是闰年`)
} else {
alert('您输入的年份是平年!')
console.log(`${year}是平年`)
}
多分支
if (条件1) {
代码块1
} else if (条件2) {
代码块2
} else if (条件3) {
代码块3
} else {
代码块4
}
释义
先判断条件1,若满足条件1就执行代码1,其他不执行
若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
若依然不满足继续往下判断,依次类推
若以上条件都不满足,执行else里的代码块
输入成绩案例
// 1. 用户输入
let score = +prompt('请输入成绩')
// 2. 判断输出
if (score >= 90) {
alert('成绩优秀,真棒!')
} else if (score >= 70) {
alert('成绩良好,继续加油!')
} else if (score >= 60) {
alert('成绩及格,继续努力!')
} else {
alert('成绩不合格!')
}
三元运算符
语法: 条件 ? 满足条件执行的代码 :不满足条件执行的代码
// 三元运算符
// 返回两个数中的较大值
let a = 3
let b = 5
let max = a > b ? a : b
console.log(`${a}和${b}中较大的是${max}`) // 3和5中较大的是5
数字补0案例
// 需求:用户输入1个数,如果数字小于10,则前面进行补0,例如09、03
// 1. 用户输入
let num = prompt('请您输入一个数字:')
num = num < 10 ? 0 + num : num
// 2.判断输出
console.log(num)
console.log(typeof num) // string
switch语句
switch (数据) {
case 值1:
代码块1
break
case 值2:
代码块2
break
case 值3:
代码块3
break
default:
代码4
// break
}
释义
找到跟小括号里数据全等的case值,并执行里面对应的代码
若没有全等 ( === ) 的则执行default里的代码
default可以不写在最后,写在最后时可以省略break
switch case语句一般用于等值判断,不适合于区间判断
switch case一般需要配合break关键字使用 没有break会造成case穿透
switch (1) {
default:
console.log('没有符合条件的')
break
case 1 :
console.log('您选择的是1')
break
case 2 :
console.log('您选择的是2')
break
case 3 :
console.log('您选择的是3')
break
}
switch语句是可以使用中文的
let name = prompt('请输入名字:')
switch (name) {
case '木子' :
console.log(`您的名字是${name}`)
break
case '小明' :
console.log(`您的名字是${name}`)
break
case '小红' :
console.log(`您的名字是${name}`)
break
default:
console.log(`查询不到信息`)
}
if多分支语句与switch语句
- switch…case语句通常处理case为确定值得情况,而if…else…语句更加灵活,通常用于范围判断
- switch语句进行判断后直接执行到符合条件的代码,效率更高,而if…else…有几种判断条件,就得执行多少次
- switch一定要注意必须是 === 全等 ,一定注意数据类型,同时注意不要忘记break
当分支比较少时,if…else语句执行效率高
当分支比较多时,switch语句执行效率更高,而且结构更清晰
循环语句
常用while循环和for循环
while循环
while (循环条件) {
循环体
}
小括号里的条件为true才会进入 循环体 执行代码
while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出
while循环三要素
- 变量起始值
- 终止条件(没有终止条件,循环会一直执行,造成死循环)
- 变量变化量(用自增或者自减)
// 1. 变量初始值
let i = 1
// 2. 终止条件
while (i <= 3) {
// 打印三次
console.log('月薪过万')
// 3. 变量的变化量
i++
}
页面输出
案例:计算1到100的偶数的和并输出
// 1. 变量初始值
let i = 1
let sum = 0
// 2. 终止条件
while (i <= 100) {
if (i % 2 === 0) {
sum += i
}
// 3. 变量的变化量
i++
}
console.log(sum) // 2550
break 和 continue 退出循环
- break : 退出循环
- continue : 结束本次循环,继续下一次循环
break
// 1. 变量初始值
let i = 1
// 终止条件
while (i <= 5) {
// 打印 2句
if (i === 3){
break
}
console.log(`这是第${i}句`)
// 变量的变化量
i++
}
页面输出
continue
// 1. 变量初始值
let i = 1
// 终止条件
while (i <= 5) {
// 打印 除第二句之外的句子
if (i === 2){
i++ // 如果不对i的值进行改变,则一直 i === 2 变成死循环
continue
}
console.log(`这是第${i}句`)
// 变量的变化量
i++
}
页面输出
区别
continue : 退出本次循环,一般用于排除或者跳过某一个选项的时候, 可以使用continue
break : 退出整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用
简易ATM取款机案例
let money = 2000
while (true) {
let re = +prompt(`
请您选择操作:
1.存钱
2.取钱
3.查看余额
4.退出
`)
// 用户输入4 退出服务
if (re === 4) {
break
}
// 根据用户输入进行操作
switch (re) {
// 存款
case 1:
let cun = +prompt('请输入存款金额:')
// 存款金额不能少于0
if (cun >= 0) {
money += cun
} else {
alert('输入的数字不合法!')
}
break
// 取款
case 2:
let qu = +prompt('请输入取款金额:')
//取款金额不能少于0
if ( qu >= 0) {
//取款金额不能大于账号余额
if (money >= qu) {
money -= qu
} else {
alert('余额不足!')
}
} else {
alert('输入的数字不合法!')
}
break
// 余额打印
case 3:
alert(`您的余额是${money}`)
break
default :
alert('error')
}
}
for循环
将初始值声明、循环条件、变化值写到一起,一目了然,最常用
for (变量起始值;终止条件;变量变化量) {
// 循环体
}
// 打印三次
for (let i = 0; i < 3; i++) {
console.log('月薪过万')
}
页面输出
for循环遍历数组
// 定义一个数组
let arr = [0,1,2,3,4,5]
// 遍历数组
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// arr[6]未赋值 输出undefined
console.log(arr[6])
页面输出
for循环中也能使用 continue 和 break 和while循环同理,使用continue执行“i++”,遇到break结束for循环
for循环嵌套
打印n行m列星星
let row = +prompt('请输入行数:')
let col = +prompt('请输入列数:')
// 外层循环打印行数
for (let i = 0; i < row ; i++) {
// 内层循环打印5个星星
for (let j = 0; j < col ; j++) {
document.write('⭐')
}
// 换行输出
document.write('<br>')
}
6行6列输出页面:
打印九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
span {
display: inline-block;
width: 100px;
padding: 5px 10px;
margin: 2px;
border: 1px solid pink;
border-radius: 5px;
}
</style>
</head>
<body>
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} * ${i} = ${j * i}</span>`)
}
document.write('<br>')
}
</script>
</body>
</html>
页面输出
for循环与while循环比较
- 当如果明确了循环的次数的时候推荐使用for循环
- 当不明确循环的次数的时候推荐使用while循环
数组的使用
- 数组声明
- 数组遍历
// 声明数组
let arr = [1, 2, 'hello', 'world']
let arr1 = new Array( 3, 2, 'hello', 'world') // 用对象声明,不推荐使用
// 数组遍历
for (let i = 0; i < arr.length; i++) {
document.write(arr[i])
}
document.write('<br>')
for (let i = 0; i < arr1.length; i++) {
document.write(arr1[i])
}
页面输出
数组求和、求平均值
// 定义一个数组
let arr = [2, 6, 1, 7,4]
// 小测试
let s
console.log(typeof s) // undefined
console.log(s) // undefined
console.log(typeof (s + 1)) // number
console.log(s + 1) // NaN
console.log(typeof (s + '1')) // string
console.log(s + '1') // undefined1
console.log('--------------------')
// 数组求和
// sum 必须赋值
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
// 打印数组的和sum
console.log(`数组的和为${sum}`)
// 数组求平均值
let avg = sum / arr.length
console.log(`数组的平均值为${avg}`)
页面输出
数组求最大值、最小值
// 定义一个数组
let arr = [2, 6, 1, 77, 52, 25, 7]
// 不需要赋值0
let max = arr[0]
// 遍历数组
for (let i = 1; i < arr.length; i++) {
if(max < arr[i]){
max = arr[i]
}
}
console.log(`数组的最大值为:${max}`) // 77
// 不需要赋值0
let min = arr[0]
// 变量数组
for (let i = 1; i < arr.length; i++) {
if(min > arr[i]){
min = arr[i]
}
}
console.log(`数组的最小值为:${min}`) // 1
// 也可以用三元运算符实现
页面输出
数组的增删改查
let arr = []
console.log(arr) // [] 空数组
console.log(arr[0]) // undefined
console.log('------------------')
let arr1 = ['pink', 'red', 'green']
// 修改元素
console.log(`原数组:${arr1}`)
arr1[1] = 'blue'
console.log(`修改后的数组:${arr1}`)
页面输出
函数
增加
-
数组.push(元素1, 元素2, …,元素n) 方法:将一个或多个元素添加到数组的末尾,并返回该数组的长度
-
数组.unshif(元素1, 元素2, …,元素n) 方法:将一个或多个元素添加到数组的开头,并返回该数组的长度
删除
-
数组.pop() 方法:执行一次将从末尾删除一个元素,并返回删除元素
-
数组.shift() 方法:执行一次将从开头删除一个元素,并返回删除元素
-
数组.splice(起始位置,删除的个数n):从指定位置的下表开始,删除n个元素,若未指定个数,则删除至最后,返回值为删除元素
let arr = ['red', 'orange', 'yellow', 'green']
let re = null
console.log(`原数组:${arr}`)
// arr.push()在数组末尾添加元素
re = arr.push('blue')
console.log(`arr.push('blue')修改后的数组:${arr}`)
console.log(`arr.push('blue')方法的返回值:${re}`)
console.log('--------------------')
// arr.unshift()在数组末尾添加元素
re = arr.unshift('black')
console.log(`arr.unshift('black')修改后的数组:${arr}`)
console.log(`arr.unshift('black')方法的返回值:${re}`)
console.log('--------------------')
// arr.pop()在数组末尾添删除一个元素
re = arr.pop()
console.log(`arr.pop()修改后的数组:${arr}`)
console.log(`arr.pop()方法的返回值:${re}`)
console.log('--------------------')
re = arr.shift()
console.log(`arr.shift()修改后的数组:${arr}`)
console.log(`arr.shift()方法的返回值:${re}`)
console.log('--------------------')
re = arr.splice(1,1)
console.log(`arr.splice(1,1)修改后的数组:${arr}`)
console.log(`arr.splice(1,1)方法的返回值:${re}`)
console.log('--------------------')
re = arr.splice(1)
console.log(`arr.splice(1)修改后的数组:${arr}`)
console.log(`arr.splice(1)方法的返回值:${re}`)
页面输出
数组元素筛选案例
需求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来,放入新数组
分析:
①:声明一个新的数组用于存放新数据newArr
②:遍历原来的旧数组, 找出大于等于 10 的元素
③:依次追加给新数组 newArr
// 需要:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来,放入新数组中
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 1. 声明新数组
let newArr =[]
// 2. 遍历旧数组
for (let i = 0; i < arr.length; i++) {
// 3. 将满足条件的元素增加至新数组
if (arr[i] >= 10) {
newArr.push(arr[i])
}
}
// 打印新数组
console.log(newArr)
页面输出
数组去0案例
需求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后,形成一个不包含 0 的新数组
分析:
①:声明一个新的数组用于存放新数据newArr
②:遍历原来的旧数组, 找出不等于0的元素
③:依次追加给新数组 newArr
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 1. 声明新数组
let newArr =[]
// 2. 遍历旧数组
for (let i = 0; i < arr.length; i++) {
// 3. 将满足条件的元素增加至新数组
if (arr[i] !== 0) {
newArr.push(arr[i])
}
}
// 打印新数组
console.log(newArr)
页面输出