• JS循环+数组

    一、循环 for

    1、for循环基本使用

    好处：把声明起始值、循环条件、变化值写到一起，让人一目了然
    在这里插入图片描述

    for循环和while循环区别：
     当明确了循环的次数的时候推荐使用for循环
     当不明确循环的次数的时候推荐使用while循环

    2、退出循环

    循环结束：
     continue：结束本次循环，继续下次循环
     break：跳出所在的循环

    3、循环嵌套

    for 循环嵌套
    在这里插入图片描述

    二、数组

    1、数组是什么

    数组(Array)是一种可以按顺序保存数据的数据类型，可以保存多个数据

    2、数组的基本使用

    （1）声明语法

    在这里插入图片描述

    • 数组是按顺序保存，所以每个数据都有自己的编号
    • 计算机中的编号从0开始
    • 在数组中，数据的编号也叫索引或下标
    • 数组可以存储任意类型的数据

    （2）取值语法

    在这里插入图片描述
    通过下标取数据

    （3）一些术语

    • 元素：数组中保存的每个数据都叫数组元素
    • 下标：数组中数据的编号
    • 长度：数组中数据的个数，通过数组的 length 属性获得

    （4）遍历数组

    用循环把数组中每个元素都访问到,一般会用for循环遍历
    在这里插入图片描述

    3、 操作数组

    在这里插入图片描述

    （1）数组增加数据

    ① 数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
    在这里插入图片描述

    console.log(arr.push('pink')) //输出返回的数组长度3

    ② 数组.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
    在这里插入图片描述

    console.log(arr.unshift('pink')) //输出返回的数组长度3

    （2）数组删除元素

    ① 数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
    在这里插入图片描述

    console.log(arr.pop()) //输出返回的被删掉的green

    ② 数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
    在这里插入图片描述

    console.log(arr.shift()) //输出返回的被删掉的red

    ③ 数组. splice() 方法 删除指定元素
    在这里插入图片描述

    • start 起始位置:
       指定修改的开始位置（从0计数）
    • deleteCount:
       表示要移除的数组元素的个数
       可选的。 如果省略则默认从指定的起始位置删除到最后

    删除元素的使用场景：
    1.随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
    2.点击删除按钮，相关的数据会从商品数据中删除
    后期课程我们会用到删除操作，特别是splice

    4、 数组案例–冒泡排序

    在这里插入图片描述

    <script>
    let a = [5,4,3,2,1]
    for (i = 0;i<a.length-1;i++){
      for (j = 0;j<a.length-1-i;j++){
        if(a[j]>a[j+1]){
          let temp=a[j+1]
          a[j+1]=a[j]
          a[j]=temp
        }
      }
    }
    document.write(a)
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    三、案例–柱状图

    <!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>
        .box{    //保证大盒子的中间布局以及四个柱子均匀排在x轴上
            display: flex;
            justify-content: space-around;
            align-items:flex-end;
            margin: 0 auto;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            text-align: center;
        }
        .box div{    //保证每一个柱子
            display: flex;  
            flex-direction: column;
            //一个柱子两个元素，季度和数据，要保证数据在柱子顶端，季度在柱子低端
            justify-content: space-between;    
            width: 50px;
            background-color: pink;
        }
        //调调间距，上上下下挪一下，使得布局美观
        .box div span{
            margin-top: -20px;
        }
        .box div h4{
            width: 70px;
            margin-left: -10px;
            margin-bottom: -35px;           
        }
        
    </style>
</head>
<body>
    <!-- <div class="box">
        <div>
            <span>123</span>
            <h4>第一季度</h4>
        </div>
        <div>
            <span>123</span>
            <h4>第二季度</h4>
        </div>
        <div>
            <span>123</span>
            <h4>第三季度</h4>
        </div>
        <div>
            <span>123</span>
            <h4>第四季度</h4>
        </div>
    </div> -->

    <script>
        let arr=[]
        for (i=0 ;i<4;i++){
            let k = prompt(`请输入第${i+1}季度的数据`)
            arr.push(k)
        }
        // console.log(arr)
        for (i = 0;i<4; i++){
        //要一个大盒子里面放四个柱子，柱子的显示通过循环实现，循环语句不能放在document.write()里面，所以显示大盒子的时候拆开，先打印头1，然后四个柱子3，然后结束2。
            document.write(`<div class='box'>`)   // 1
            
            for (i=0;i<4;i++){                   //3
                document.write(`
                <div style='height:${arr[i]}px'>
                    <span>${arr[i]}</span>
                    <h4>第${i+1}季度</h4>
                </div>
                `)
            }
            
            document.write(`</box>`)  // 2

        }
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85

    在这里插入图片描述

  • 相关阅读:
    安全自动化企业网络架构 （毕设分享）
    想要精通算法和SQL的成长之路 - 最长递增子序列 II（线段树的运用）
    C++数据结构X篇_15_求二叉树叶子数与高度(递归方法)
    求简单微分方程
    SparkSQL入门
    Vue双向绑定的原理
    linux中使用命令启动tomcat后显示tomcat started，实际却没启动的问题
    MySQL函数（经典收藏）
    Jenkins的Pipeline概念
    微服务项目：尚融宝（33）（服务调用（3））
  • 原文地址：https://blog.csdn.net/qq_40832034/article/details/125563025