本文介绍了JavaScript中的switch、if-else、for和while等控制结构，比较了它们的适用场景，展示了如何在实际情境中使用这些结构，包括数组操作、函数、循环遍历以及数组筛选示例。
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]
### 最后
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**
扫一扫
到【灌水乐园】发言
