JavaScript基础（三）

最新推荐文章于 2025-11-23 16:56:34 发布

原创最新推荐文章于 2025-11-23 16:56:34 发布 · 259 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端 #笔记

IF多分支语句和SWITHCH的区别

一， FOR 循环

1.1 for循环-基本使用

1. 循环语法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   for (let i = 1; i <= 100; i++) {
      //     document.write(`${i}岁了<br>`)
      //   }
      // 1~100 之间的所有偶数和
      //   let sum = 0
      //   for (let i = 1; i <= 100; i++) {
      //     if (i % 2 === 0) {
      //       sum = sum + i
      //     }
      //   }
      //   document.write(`1~100之间的偶数和是：${sum}`)
      // 3.页面打印五个小星星
      //   for (let i = 1; i <= 5; i++) {
      //     document.write('⭐')
      //   }
      // 4. 打印数组
      //   i<=4  长度-1
      //   let arr = ['刘德华', '赵云']
      //   for (let i = 0; i <= 2; i++) {
      //     console.log(arr[i])
      //   }
      //    必须从0开始，因为数组索引号从0开始
      // 遍历数组（从头到尾取一遍）
      let arr = ['刘德华', '赵云']
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i])
      }
    </script>
  </body>
</html>

2，退出循环

1.2 循环嵌套

1， for 循环嵌套

2. 案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 输入五行五列小星星
      //   for (let i = 1; i <= 5; i++) {
      //     for (let j = 1; j <= 5; j++) {
      //       document.write(`⭐`)
      //     }
      //     document.write(`<br>`)
      //   }
      // ------------------------------------------
      // 让用户决定输入几行几列
      let hang = +prompt('请输入行数：')
      let lie = +prompt('请输入列数：')
      for (let i = 1; i <= hang; i++) {
        for (let j = 1; j <= lie; j++) {
          document.write('⭐')
        }
        document.write('<br>')
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. 外层循环控制行数
      for (let i = 1; i <= 5; i++) {
        // 2. 里层循环控制列数（几个星星）
        for (let j = 1; j <= i; j++) {
          document.write('⭐')
        }
        // 换行
        document.write('<br>')
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #d1aeae;
        margin: 2px;
        border-radius: 5px;
        box-shadow: #d1aeae;
      }
    </style>
  </head>
  <body>
    <script>
      // 1. 外层循环控制行数
      for (let i = 1; i <= 9; i++) {
        // 2. 里层循环控制列数
        for (let j = 1; j <= i; j++) {
          document.write(`<span> ${j} X ${i}=${j * i} </span>`)
        }
        // 换行
        document.write('<br>')
      }
    </script>
  </body>
</html>

二，数组

2，1，数组是什么

2.2 数组的基本使用

4，遍历数组（重点）

练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 6, 1, 7, 4]
      // 1. 求和的变量 sum
      let sum = 0

      // 2, 遍历累加
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      console.log(`数组和的结果是：${sum}`)
      //   平均值
      console.log(`数组平均值是${sum / arr.length}`)
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. 求最大值
      //   let arr = [2, 6, 1, 7, 4]
      //   //max 里面存的是最大值
      //   let max = arr[0]
      //   //遍历数组
      //   for (let i = 1; i < arr.length; i++) {
      //     //如果max 比数组元素里面的值小，我们就要把这个数组元素赋值给max
      //     if (max < arr[i]) {
      //       max = arr[i]
      //     }
      //   }
      //   // 输出max
      //   console.log(max)
      // ----------------------------------------------------------------------
      // 2， 求最小值
      let arr = [2, 6, 1, 7, 4]
      let min = arr[0]
      //遍历数组
      for (let i = 1; i < arr.length; i++) {
        if (min > arr[i]) {
          max = arr[i]
        }
      }
      // 输出max
      console.log(min)
    </script>
  </body>
</html>

2,3 操作数组

1. 增加元素

练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1.声明数组
      let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
      let newarr = []
      // 2.遍历数组
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] >= 10) {
          newarr.push(arr[i])
        }
      }
      console.log(newarr)
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
      //   1. 存放新数据
      let newarr = []
      //   2. 遍历数组 找出不等于0的元素
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > 0) {
          newarr.push(arr[i])
        }
      }
      console.log(newarr)
    </script>
  </body>
</html>

2. 删除元素

三，综合案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        display: flex;
        width: 700px;
        height: 300px;
        border-left: 1px solid pink;
        border-bottom: 1px solid pink;
        margin: 50px auto;
        justify-content: space-around;
        align-items: flex-end;
        text-align: center;
      }
      .box > div {
        display: flex;
        width: 50px;
        background-color: pink;
        flex-direction: column;
        justify-content: space-between;
      }
      .box div span {
        margin-top: -20px;
      }
      .box div h4 {
        margin-bottom: -35px;
        width: 70px;
        margin-left: -10px;
      }
    </style>
  </head>
  <body>
    <!-- <div style="height: 123px">
      <span>123</span>
      <h4>第1季度</h4>
    </div> -->
    <script>
      // 1. 四次弹窗效果
      //   声明一个新的数组
      let arr = []
      for (let i = 1; i <= 4; i++) {
        // let num = +prompt(`请输入第${i}季度的数据：`)
        // arr.push(num) //将数据添加到数组末尾
        arr.push(prompt(`请输入第${i}季度的数据：`))
        //push 记得加小括号，不是等号复制的形式
      }
      //   console.log(arr)
      // 盒子开头
      document.write(`<div class="box">`)
      //盒子中间  利用循环的形式  跟数组有关系
      for (let i = 0; i < arr.length; i++) {
        document.write(` 
        <div style="height: ${arr[i]}px">
        <span> ${arr[i]}</span>
        <h4>第${i + 1}季度</h4>
      </div>`)
      }

      //盒子结尾
      document.write(`</div>`)
    </script>
  </body>
</html>

冒泡排序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   let arr = [5, 4, 3, 2, 1]
      let arr = [2, 4, 3, 5, 1]
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - i - 1; j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
          }
        }
      }
      //   arr.sort()开发中使用排序
      //   sort 升序排列
      //   arr.sort(function (a, b) {
      //     return a - b
      //   })
      //   sort 降序排列
      arr.sort(function (a, b) {
        return b - a
      })
      console.log(arr)
    </script>
  </body>
</html>

作业

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1.用户输入有效数组
      let arr = []
      while (arr.length < 5) {
        // 输入年龄
        let num = +prompt(`请输入第${arr.length + 1}个人有效年龄`)
        // 判断是否有效
        if (num > 0 && num < 100) {
          //添加到数组
          arr.push(num)
        }
      }
      console.log(arr)
      //   -----------------------------------------------------------------
      //   2. 打印输出所有成年人的年龄
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > 18) {
          document.write(`已经成年的人的年龄是：${arr[i]}<br>`)
        }
      }
      //   -----------------------------------------------------------------------
      // 3. 打印输出所年人的年龄和
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      document.write(`所有人的年龄和是：${sum}<br>`)
      //--------------------------------------------------------------------------
      //   4. 打印出所有人的平均年龄
      document.write(`所有人的平均年龄：${sum / arr.length}<br>`)
      //   ----------------------------------------------------------------------
      // 5. 打印出年龄最大和最小
      let max = arr[0]
      let min = arr[0]
      for (let i = 1; i < arr.length; i++) {
        if (max < arr[i]) {
          max = arr[i]
        }
        if (min > arr[i]) {
          min = arr[i]
        }
      }
      document.write(`最大值是：${max}`)
      document.write(`最小值是：${min}`)
      //   -------------------------------------------------------------------
    </script>
  </body>
</html>