JavaScript学习02(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. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）

 // 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循环

数组的使用

1. 数组声明
2. 数组遍历

  // 声明数组
  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
  // 也可以用三元运算符实现

页面输出

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！