day5

数组

数组（Array）是一种可以按顺序保存数据的数据类型。

数组是按照顺序保存，所以每个数据都是有自己的编号。
计算机编号是从0开始，所以小明编号为0，小刚编号为1,以此类推。
在数组中，数据的编号也叫索引或下标。
arr.length 表示该数组的长度。打印会显示数组里面的个数。
如果获取的元素的下标超过了数组的个数，会显示undefined。
可以放任意类型的数据，但不建议这么做，一般一个数组内的数据类型要统一。

语法

示例

    <script>
        //声明数组
        let arr =['苹果','西瓜','雪梨','香蕉','榴莲','哈密瓜',]
        //获取数组中第0个元素 （只讲的下标）
        console.log(arr[0]);// 显示 苹果

        //告诉我 数组里面 多少个元素
        //arr.length 表示该数组的长度
        console.log( arr.length);  //显示6

        console.log(arr[11]);//如果获取的元素的下标超过了数组的个数，会显示undefined

    </script>

数组的循环输出

    <script>
        // 先声明数组
        let arr = ['文文', '轩轩', '碗碗', '盆盆', '炸炸',]
        //循环的次数 不超过 数组的个数 arr.length
        for (let index = 0; index < arr.length; index++) { 
            console.log (arr[index]);
        }
        //小结 我使用 数组 做for循环的时候
        // 1. let index = 0；
        // 2. 判断循环的条件 index < 数组的长度
    </script>

数组求总和 / 平均值

    <script>
        let arr = [2, 6, 1, 7, 4,]

        //存放总的数据
        let sum =0;

        // 循环
        for (let index = 0; index < arr.length; index++) {
            //使用变量 来存放数组中的每一个数值
            sum += arr[index];
        }
        //打印显示总和
        console.log (sum);
        //打印显示平均值  总和 除以 数组个数（长度）
        console.log(sum / arr.length);
    </script>

求数组中最大值和最小值

    <script>
        let arr = [2, 6, 1, 77, 52,];
        //声明个 最小值
        let min =arr[0];
        //声明个 最大值
        let max =arr[0];

        for(let i =0; i < arr.length; i++){
            //当 数组里的那个数字 小于 最小值时
            if(arr[i] < min){
                //最小值 就等于 数组里的那个数字。
                min = arr[i]
            }
             //当最大值 小于 数组里的那个数字时
            if(arr[i] > max){
                //最大值 就等于 数组里的那个数字。
                max = arr[i]
            }
        }
        console.log(min)
        console.log(max)
    </script>

数组增加元素

push

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

语法：

    <script>
        let arr =['苹果','香蕉'];

        //push  多增加一个元素
        arr.push('芒果');

        console.log(arr)
    </script>

用户输入数据增加（案例)

    <script>
        //定义一个数组 来接收放同学的姓名，组成数组
        let arr = [];

        //循环 4次，记录4个同学的姓名
        for(index =0 ;index < 4; index++){
            //弹窗用户输入同学姓名
            let name = prompt("请输入您同学的姓名");
            //把 姓名 增加 到 数组 中去
            arr.push(name);
        }
        console.log(arr);
    </script>

数组筛选（案例）

    <script>
        //需求  把数组中 大于 等于10的元素 存放到新的数组
        let arr1 =[2,0,6,1,77,0,52,0,25,7]

        //定义一个 数组来存放过滤好的数组
        let arr2 =[];

        //对第一组数组 循环
        for(let index =0; index < arr1.length; index++){
            //当第一组数组里的数字 大于或等于 10 时 
            if(arr[index] >= 10){
                //把上面第一组数组 筛选出来大于或等于10的数字 加进去第二组数组
                arr2.push(arr1[index]);
            }
        }
        console.log(arr2)
    </script>

unshift

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

语法：

    <script>
        //unshift  增加数组中的元素，会显示在数组中的第一个
        let arr =["西瓜","苹果","草莓","芒果",]
        arr.unshift("哈密瓜");

        console.log(arr)
    </script>

push和unshift 都可以做到给数组添加新元素。

这两个代码在执行的时候，还可以返回数组的长度。

数组删除元素

pop

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

    <script>
     //数组 删除最后一个元素 pop
        
        let arr=['苹果','香蕉','麻瓜']

        //希望删除掉最后一个元素“麻瓜” 不要
        arr.pop();

        console.log(arr)  //打印显示 苹果，香蕉
    </script>

shift

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

    <script>
        let arr=['苹果','香蕉','麻瓜']


        //希望删除第一个元素 shift
        //希望删除第一个元素 苹果
        arr.shift();

        console.log(arr)  //打印显示 香蕉, 麻瓜
    </script>

假如删除了元素，元素长度会跟着变化。

splice

数组. splice() 方法 删除指定元素 或指定位置插入元素。

删除指定元素示例：

括号第一个数值写要删除的元素下标，第二个数值写要删除几个

    <script>
         let arr =["西瓜","苹果","草莓","芒果",]

         //想要删除苹果
         //删除指定元素 splice ("想要删除的元素下标"，“要删除几个”)


         //想要删除苹果
         arr.splice(1,1)

         //想要删除苹果和草莓
        //  arr.splice(1,2);
        
         console.log(arr)
    </script>

指定位置插入元素示例：

括号第一个数值写要把新元素插入在第几个下标，第二个数值写要删除0个

<script>
//指定位置来插入元素，括号第一个数值写 要把新元素插入在第几个下标， 第二个数值写要删除0个
         let arr2 =["西兰花","白菜","上海青",]
         //在1的位置白菜 插入 胡萝卜，不删除任何元素
         arr.splice(1,0,胡萝卜)
    </script>

获取数组最后一个元素

    <script>
        /* 
        获取数组的最后一个元素
        */

        let arr = ['西瓜','草莓','苹果']
        //获取数组中最后一个元素苹果
        // console.log(arr[2])

        //当数组个数多的话，数到最后一个比较麻烦。也可以用arr.length - 1   （比较常用的规则)
        console.log(arr[arr.length - 1])

        
    </script>

数组的新增和修改

新增与修改数组总结： arr[下标数] = "xx" 1.如果下标数这个位置有元素的话那就是替换掉； 2.如果下标数这个位置是没有元素的话，就直接添加进去了。

    <script>


        let arr = ['西瓜', '草莓', '苹果']

        //修改元素 ：想把苹果修改成葡萄，那就是下标2去修改就行
        arr[2] = '葡萄';

        //新增元素：
        arr[3] = '芒果';

        console.log(arr)


       /* 新增与修改数组 总结：
        arr[10] = "xx"
        1.如果10这个位置有元素的话那就是替换掉
        2.如果10这个位置是没有元素的话，就直接添加进去了 */

    </script>

数组快速清空

    <script>


        let arr = ['西瓜', '草莓', '苹果']

        //清空数组  都不要里面的元素  arr = []
        // arr = []

        //保留2个元素 其它不要了  要保留几个元素。写数字几
        arr.length = 2;

        console.log(arr)

    </script>

课堂案例

动态生成li标签

    <script>
        //弹窗让用户输入
        let num = prompt('请输入您想生成多少个li标签的个数')

        //用来存放4个li标签的 字符串 ,html的ul不需要循环，只是li标签需要循环
        let liHtml = `<ul>`  //开始，代表liHtml = '<ul></ul>';
        //用户输入多少个，循环多少个li
        for (let index = 1; index <= num; index++) {
            //只需要往ul里面 加li,需要几个li， 外面循环写多少就行
            liHtml += `<li>${index}</li>`;
        }
        liHtml += `</ul>`  //结束，代表liHtml = '<ul></ul>';

        document.write(liHtml)
    </script>

动态生成柱形图

需求分析：

\1. 打开页面弹出4个输入框

2.用户在每个输入框填写数字--控制每个li标签的高度

3.最后一个输入框填写完毕，页面出现4个div

4.4个div的样式部分

1.一行放4个元素

2.每个元素颜色相同，高度不同

5.操作

\1. 先写第4步，布局css

\2. 先实现 for 循环生成4个柱子li，高度不同先不管

\3. 动态获取用户输入的高度

\4. 还需把这些高度按个设置到对应的li标签中

先实现4功能写css（行内形式增加在js里面）

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
            width: 1000px;
            height: 600px;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
            background-color: aqua;

            align-items: flex-end;
        }

        li {
            width: 100px;
            background-color: pink;
            position: relative;
        }

        span {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
        }

        div {
            position: absolute;
            width: 100%;
            text-align: center;
            /* 相对于父元素的高 */
            top: 100%;
            background-color: red;
        }
    </style>
</head>

<body>
    
    <script>
        //用来存放4个li标签的 字符串，ul不需要循环，放在for外面
        let liHtml = `<ul>`; //ul开始

        let liHeight = []; //定义个数组，用来存放用户输入的4个数据
        
        
        //循环 4个弹窗，给用户输入4个数据
        for (let index = 0; index < 4; index++) {
            //定义个变量 是用户弹窗输入的数据
            let height = +prompt(`请输入你想要第${index + 1}个高度数据`);
            liHeight.push(height);//把用户输入的数据添加到数组里面
        }

        
        //循环 4 个li ，把上面数组的数据分别循环套进去，用行内式css给li添加高度px像素，px像素里面的数据就是上面数组收集到的数字。
        for(let index = 0; index < 4; index++){
            liHtml +=`
            <li style="height:${liHeight[index]}px">
                <span>${liHeight[index]}</span>
                <div>第${index + 1}季度</div>
                </li>`
        }

        liHtml += `</ul>` //ul结束
        document.write(liHtml)
    </script>
</body>

</html>

JavaScript基础day5