JavaScript 基础（05）

数组

数组是什么

数组（Array）是一种可以按顺序保存数据的数据类型
如果有多个数据可以用数组保存起来

数组的基本使用

声明语法

 <script>
        // 声明数组 （array）
        let arr = ['周星驰','刘德华','张国荣','张学友']

        // 2 获取  这个数组中的第0个元素  （只讲的下标）
        console.log(arr[0]); // 周星驰

        // arr .length 表示数组的长度
        console.log(arr.length);//  4

        console.log(arr[1000]);// 不会有一个正常的结果 （如果我们获取的元素的下标超出了 数组的长度   undefined）
    </script>

数组是按顺序保存 ，所以每个数据都有自己的编号
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据
通过下标取数据

一些术语
- 元素；数组中保存的每个数据都叫数组元素
- 下标；数组中数据的编号
- 长度；数组中数据的个数，通过数组的length属性获得
```
   // arr .length 表示数组的长度
        console.log(arr.length);//  4
```

循环

定义一个数组
通过循环挨个打印数组里面的元素

<script>
let arr = [10,20,30,40,50]
for(let index = 0; index < arr.length; index++){
    console.log(arr[index])
}
</script>

案例

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

<script>
        // 数组
        let arr =[2,6,1,7,2,4];
        // 存放总的数据
        let num = 0
        //循环
        for (let index = 0; index < arr.length; index++) {
            num += arr[index];
            
        }
        console.log(num);
        // 平均值 = 和 / 数组的长度
        console.log(num / arr.length);
    </script>

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

<script>
      let arr = [2,6,1,77,52,25,7]
      // 假设一个最大值   数组的第0个元素
      let max = arr[0]
      let min = arr[0]
      //for 循环
      for (let index = 0; index < arr.length; index++) {
          // 如果当前的数组元素   大于  max

          if(arr[index] > max){
              // 设置max 等于 你这个数组元素
              max =arr[index]
          }
        //   找出数组里面的最小数
          if(arr[index] < min){
              min =arr[index]
          }

      }
      console.log(max);
      console.log(min);
    </script>

数组的增删改查

增

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

<script>
let arr =['rde' ,'green']
arr.push('pink')  //从最后加
arr.unshift（'pink'）//从前面加
 console.log(arr)
</script>

删

删除数组中数据
- arr.pop() 删除最后一个数组
- arr.shift() 删掉第一个数组
- arr.splice (操作的下标，删除的个数)

<script>
      //  数组 删除最后一个元素 pop

      let arr = ['西瓜', '香蕉', '麻瓜'];

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

      // console.log(arr); // ['西瓜', '香蕉'


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

      console.log(arr);// 
      // 现在想要删除 香蕉

      // splice("想要删除的元素的下标","想要删除几个");

      // 删除数组中的下标为1的元素，
      // 从 1 的位置开始 想要删除几个
      // arr.splice(1, 2);
      //
      // console.log(arr);

      //  指定位置来插入元素
      // splice("想要删除的元素的下标","想要删除几个","在该下标位置添加元素");

      // 在 1的位置，删除0个元素，增加一个红薯
      // let arr = ['西瓜', '香蕉', '麻瓜'];
      // ['西瓜', '红薯', '香蕉', '麻瓜'];
      arr.splice(1, 1, '红薯');
      console.log(arr);
    </script>

案例

根据数据生成柱形图

需求：用户输入四个季度的数据，可以生成柱形图
- 需要输入4次，所以可以把4个数据放到一个数组里面
  
  利用循环，弹出4次框，同时存到数组里面
- 遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
  
  柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
  
  div里面包含显示的数字和第n季度

<!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>24-动态生成柱状图-获取用户输入的高度</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>
      /*
      动态获取用户输入的高度 ，然后把高度都设置到一个数组即可 
      1 弹出4个窗口，让用户输入数据  
     
      */

      let liHtml = `<ul>`;
      let liHeight = [];

      // for循环来弹出4个窗口 获取内容
      for (let index = 0; index < 4; index++) {
        // 弹窗获取用户的输入的高度
        let height = +prompt(`请输入你想要的第${index + 1}个高度数据`);

        // 把数据 添加到数组中
        liHeight.push(height);
      }

      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>`;
      document.write(liHtml);
    </script>
  </body>
</html>

JavaScript 基础 （05） 分享

JavaScript 基础 （05）

数组

数组是什么

数组的基本使用

案例

数组的 增 删 改 查

增

删

案例

JavaScript 基础（05）分享

JavaScript 基础（05）

数组的增删改查