JS基础3

 循环 -for

 

 

 例1：

 

 

 可以结合数组进行操作

 

 

 

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

 循环嵌套：　

 

 

例1：

 

 

 

 例2：

 

 

 

 99乘法表：

 

 

 

 

 

 数组

 

 

 

 

 例1：：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值

 

 

数组求最大值和最小值 需求：求数组 [2,6,1,77,52,25,7] 中的最大值综合案例

 数组的增删改查

增：

1.加到数组的后面，并返回数组的长度

 

 

 

 

 

 

 

 2.添加到数组的前面并返回数组的长度

 

 

 

 

 

例1：需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

 

 

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

 

 

 

删：

 

 

 arr.pop() :删除最后一个————他输出的结果是删除的元素而不是删除之后的数组

 

 

 

arr.shift() :删除第一个

 

 

 

arr.splice()：删除指定的元素

 

 

 

 

 

 

改：

 

 

 

查：

 

 

 例：冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列 的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]

解析：两个循环，外层循环控制次数，内层控制一趟交换的次数，外层：5个数共走四趟，长度为数组的长度减  1   即arr.length - 1   内层交换的次数为arr.length - i - 1

 

 

 

 

 

 综合案例：根据数据生成柱形图 需求： 用户输入四个季度的数据，可以生成柱形图

 

 

 柱形图的代码：

 

 

样式：

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