前端学习笔记-JS篇-03

MarisolHu

已于 2024-08-13 15:39:18 修改

阅读量606

点赞数 13

文章标签：学习笔记

于 2024-08-13 15:35:31 首次发布

本文链接：https://blog.csdn.net/Yvonne_hjj/article/details/141161087

版权

循环for语句

for 是JavaScript提供的另一种循环控制的话句，它和 while只是语法上存在差异。

for循环基本使用

作用:重复执行代码
好处:把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

for(变量起始值;终止条件;变量变化量){//循环体}

循环遍历数组并且打印出来

退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break退出整个for循环一般用于结果已经得到,后续的循环不需要的时候可以使用

了解:
1.while(true)来构造“无限”循环，需要使用break退出循环。
2.for(;;)也可以来构造“无限”循环，同样需要使用break退出循环。

当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

循环嵌套

一个循环里再套一个循环，一般用在for循环里

for(外部声明记录循环次数的变量;循环条件;变化值){
    for(内部声明记录循环次数的变量;循环条件;变化值){
        循环体
    }
}

案例一：【打印i行j列的星星】

<body>
  <script>
    // // 外层循环打印行数
    // for (let i = 1; i <= 5; i++) {
    //   // 里层循环打印几个星星
    //   for (let j = 1; j <= 5; j++) {
    //     document.write('☆')
    //   }
    //   // 进行换行显示
    //   document.write('<br>')
    // }

    let row = +prompt('请输入行数:')
    let col = +prompt('请输入列数:')
    // 外层循环打印行数
    for (let i = 1; i <= row; i++) {
      // 里层循环打印几个星星
      for (let j = 1; j <= col; j++) {
        document.write('☆')
      }
      // 进行换行显示
      document.write('<br>')
    }
  </script>
</body>

案例二：打印倒三角的星星

<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>

案例三：打印99乘法表

<body>
  <script>
    // 1. 外层循环控制行数
    for (let i = 1; i <= 9; i++) {
      // 2. 里层循环控制列数
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j} X ${i} = ${i * j}</span>`)
      }
      // 换行
      document.write('<br>')
    }
  </script>
</body>

数组(Array)

是一种可以按顺序保存数据的数据类型

为什么要数组?
思考:如果我想保存一个班里所有同学的姓名怎么办?

场景:如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

声明语法：

取值语法：

需求:求数组[2,6,1,77,52,25,7]中的最大值

<body>
  <script>
    let arr = [2, 6, 1, 7, 400, 55, 88, 100]
    // max里面要存的是最大值
    let max = arr[0]
    // min 要存放的是最小值
    let min = arr[0]
    // 遍历数组
    for (let i = 1; i < arr.length; i++) {
      // 如果max 比 数组元素里面的值小，我们就需要把这元素赋值给 max
      // if (max < arr[i]) max = arr[i]
      max < arr[i] ? max = arr[i] : max
      // 如果min 比 数组元素大， 我们就需要把数组元素给min
      // if (min > arr[i]) {
      //   min = arr[i]
      // }
      min > arr[i] ? min = arr[i] : min
    }
    // 输出 max
    console.log(`最大值是: ${max}`)
    console.log(`最小值是: ${min}`)
  </script>
</body>

数组本质是数据集合,操作数据无非就是增删改查语法

增加

数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

Array.prototype.push() - JavaScript | MDN (mozilla.org)

arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

数组筛选

数组去0案例
需求:将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组

<body>
  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    // 1. 声明一个新的数组
    let newArr = []
    // 2. 遍历筛选
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== 0) {
        newArr.push(arr[i])
      }
    }
    // 输出新数组
    console.log(newArr)
  </script>
</body>

排序

数组.sort()方法可以排序

删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

语法:arr.pop()

数组.shift()方法从数组中删除第一个元素，并返回该元素的值

语法:arr.shift()

数组.splice()方法删除指定元素

arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素

解释
start 起始位置:指定修改的开始位置(从0计数)
deletecount:表示要移除的数组元素的个数;可选的。如果省略则默认从指定的起始位置删除到最后

综合案例

根据数据生成柱形图
需求:用户输入四个季度的数据，可以生成柱形图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
    <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)  ['123','135','345','234']
        // 盒子开头
        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>