数组基本用法介绍加案例

1.数组的初体验

<script>
      //  1 声明数组 (array)
      let arr = ['苹果', '西瓜', '雪梨', '哈密瓜', '榴莲'];

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

      // 告诉我 我的数组 里面有几个元素 （数组的长度）
      // arr.length 表示 该数组的长度
      console.log( arr.length ); // 5 

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

2.数组的循环

数组一般搭配循环来使用

 <script>

      // 定义一个数组 
      let arr=[10,20,30,40,50];

      // 挨个打印数组里面的元素
      arr[0]; // 10
      arr[1]; // 20
      arr[2]; // 30 
      arr[3]; // 40
      arr[4]; // 50
      // arr[5]; // undefined 

      // 通过循环 挨个打印数组里面的元素
      for (let index = 0; index < 5 ; index++) {
        // index =  1 , 2 ,3 ,4 , 5   arr[5] 
        // arr[index]   1 没有输出  arr[0]  2 输出 arr[5] undefined
        // 综上所述 我们发现  下标 index 的范围只能是 0 - 4 
        // let index = 0; 
        // index <= 4 或者 index < 5  因为 数组的长度 arr.length = 5 
        // index < 5   =>  index < arr.length 

        /* 
        小结：
         1 我们使用 数组做for循环的时候 
           1 let index= 0 ;
           2 判断循环的条件  index < 数组的长度 

         */

      }
    </script>

3.数组的循环输出案例

万少跟我们约定数组从零开始，别乱搞(因为数组第一位是0往后这样顺延的)

 <script>
      let arr = ['苹果', '西瓜', '香蕉', '葡萄'];

      //  输出数组中的每一个元素
      for (let index = 0; index < arr.length; index++) {
        // index = 0 开始做变化  1 2 3 4
        console.log(arr[index]);
      }
    </script>

4.数组求和案例

 <script>
      // 数组
      let arr = [2, 6, 1, 7, 4];
      // 存放总的数据
      let sum = 0;
      // 循环
      for (let index = 0; index < arr.length; index++) {
        // 使用变量 来存放数组中的每一个数值
        sum += arr[index];
        // index=0   sum += arr[index]  sum += 2;
        // index=1   sum += arr[index]  sum += 6;
      }
      console.log(sum); // 和 20
      // 平均值 =   和 / 数组的长度
      console.log(sum / arr.length);
    </script>

5.数组求最大最小案例

求非零的数也是这样，就是不等于零就行，还有更多的办法联想到再补

<script>
      let arr = [2, 6, 1, 77, 52, 25, 7];
      let max = arr[0];
      let min = arr[0];

      // for循环
      for (let i = 0; i < arr.length; i++) {
           //  如果当前的数组元素 大于 max
        if (arr[i] > max) {
              // 设置 max 等于 你这个数组元素
          max = arr[i];
        }

        // 如果 arr[i]   比 我的min 要小 那 min 等于你arr[i]
        if (arr[i] < min) {
          min = arr[i];
        }
      }
      console.log(max);
      console.log(min);
    </script>

求非零元素演示

<script>
      /*
      获取到一个新的数组  新的数组 大于等于10

      获取到一个新的数组  新的数组 不需要带上0
       */
      let arr = [1, 3, 4, 5, 3, 2, 4, 0, 0, 3, 22, 98];

      let newArr = [];

      for (let index = 0; index < arr.length; index++) {
        // 满足条件的就要

        // 1 满足 元素大于等于10的就要
        // if (arr[index] > 10) {
        // 新的数组 不需要带上0
        if (arr[index] !== 0) {
          newArr.push(arr[index]);
        }
      }

      console.log(newArr);
    </script>

6.push增加数值和应用案例

增加数值演示

 <script>
      // 定义一个数组
      let arr = ['苹果', '香蕉'];

      // 多增加一个元素
      arr.push("西瓜");

      console.log(arr);
    </script>

应用演示

 <script>
      // 接收用户的4个输入 输入同学的名字，组成一个数组
      let arr = [];

      // 用户的输入来实现
      for (let index = 1; index <= 4; index++) {
        // 用户的输入
        let userName = prompt('请输入你同学的名字');
        // 把userName 设置到数组中
        arr.push(userName);
      }
      console.log(arr);
    </script>

7. 数组的过滤

 <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 (arr1[index] >= 10) {
          // 需要把当前的这个元素 添加到新数组中
          arr2.push(arr1[index]);
        }
      }
      console.log(arr2);
    </script>

8. -数组-unshift-增加元素

 <script>
        let arr = ['yellow', 'red']

        //  push  是把新的元素 设置到 数组的末位
        // arr.push('yellow');

        // unshift 是把新的元素 设置到数组的开头
        arr.unshift('bule')
        console.log(arr);
//         数组添加元素的总结
//         1 两种元素添加元素的方式
//           push  末位
//           unshift 开头添加元素

//         2 在开发中    push 用得最多  ， unshift 了解即可 
    </script>

9.-push和unshift返回数组的长度

就是添加新元素的时候加入arrLength，还可以返回数组的长度，写法如下

 <script>
      /* 
      1 push 和 unshift 都可以做到 给数组添加新元素
      2 这两个代码在执行的时候  还可以返回  数组的长度 (了解)
       */

      let arr = ['苹果', '西瓜'];

      //  添加新元素 == 返回 添加完新元素之后的数组长度
      let arrLength = arr.unshift('哈密瓜'); // arrLength = 数组的长度 =  3 
      console.log(arrLength);
      console.log(arr.length);

    </script>

10. 数组-删除-pop

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

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

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

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


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

      console.log(arr);// 
    </script>

11.数组指定元素来删除 -splice

//splice：指定删除和增加，一般不是末尾的值都可以用它，但是常用的是删除功能，括号里面第一个值是数组里面元素的位置，

// 第二个值是删除几个的意思（删除多个是从第一个值数组元素的位置开始往后删），如果是0就是不删除的意思，第三个是需要增加的元素，只可以增加一个（增加的元素会在指定元素位置的前面）

 <script>
      let arr = ['西瓜', '香蕉', '麻瓜'];
      // 现在想要删除 香蕉

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

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

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

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

数组方法的补充(1)

<script>
      // 指定哪个删除  可以 只是还没有讲到  splice
      // 假如是删除了最后一个后，length的长度会从3个变成2吗？ 会
      // 这种删除  和直接删了代码有什么区别
      // 数组是我们自己手写的  自己手动删除 不就可以了吗 ！！
      // shift和pop 在执行删除的时候  会返回被删除的元素 （理解成从一个鸡蛋篮子里面取鸡蛋）
      // 1 篮子里面的鸡蛋个数减少
      // 2 获取到那个取出来对应的鸡蛋

      // 有默契，  我讲解知识，先讲解最基本使用   大家基本使用都没有问题，
      // 愿意补充和拓展

      // 这个数组 是动态生成的
      // let arr = [];
      // for (let index = 0; index < 4; index++) {
      //   arr.push(prompt('请输入你的分数'));
      // }

      // // 去掉第一0个分数
      // arr.shift();
      // // 去掉最后一个分数
      // arr.pop();

      // console.log(arr);

      /* 
      4种方式  操作数组
      2种增加
      push   末位 增加
      unshift  开头 增加
      2种删除
      pop 末位删除
      shift 开头删除 
       */

      let arr = ['西瓜', '香蕉', '麻瓜'];
      // let first = arr.shift(); // first = 西瓜  arr = 香蕉 麻瓜
      // console.log(first);
      // console.log(arr);

      let last = arr.pop();
      // last =  麻瓜
      // arr =  西瓜 香蕉
      console.log(last);
      console.log(arr);
    </script>

数组方法的补充(2)

 <script>
      /* 
      1 获取数组的最后一个元素 arr[arr.length - 1]  常用的规则！！ 

      2 新增或者修改数组元素 
        arr[10]='南瓜'   
        1 如果 10这个位置已经有元素 那么 就是修改
        2 如果 10这个位置没有元素  添加就可以了  最终数组的度变成 10+1  

      3 数组 可以存放任意类型的数据   可以这么做，但是不建议 我们建议 一个数组内的数据类型要统一！！ 
        let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      4 数组快速清空或者删除元素的方式 
        arr.length = 0 
       */

      // let arr = ['西瓜', '香蕉', '麻瓜','香瓜','苦瓜','傻瓜'];
      // // let arr = ['西瓜', '香蕉', '麻瓜'];
      // // 获取数组中最后的一个元素
      // // arr.length - 1
      // console.log(arr[arr.length - 1]);

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

      // 想要把香蕉修改成葡萄
      // arr[1] = '葡萄'; // 修改

      // console.log( arr[3] );// 输出什么 undefined

      // 添加元素
      // arr[3] = '南瓜';
      // console.log(arr);

      // arr[10] = '南瓜';
      // console.log(arr[8]);

      // 存放其他类型 数据
      // let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      // 把数组 清空掉！！  不想要里面的元素了！！
      // arr = [];

      // 保留 3个元素 其他不要了
      // arr.length = 3;
      arr.length = 0;

      console.log(arr);
    </script>

动态生成柱状图 案例

1.第一步先做静态页面

<!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>21-动态生成柱状图.html</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;
      }
      li:nth-child(1) {
        height: 100px;
      }
      li:nth-child(2) {
        height: 200px;
      }
      li:nth-child(3) {
        height: 300px;
      }
      li:nth-child(4) {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>1</span>
        <div>第1季度</div>
      </li>
      <li> <span>2</span> <div>第2季度</div> </li>
      <li>
        <span>3</span>
        <div>第3季度</div>
      </li>
      <li>
        <span>4</span>
        <div>第4季度</div>
      </li>
    </ul>

    <script>
      /* 
      
      需求分析：（用文字 把看见的需求 描述下来）
      1 一打开页面 弹出了4个 输入框 
      2 用户在每一个输入框 填写数字
      3 最后一个输入框填写完毕了 页面上出现 4个div
      4 4个div的样式部分
        1 一行放4个元素
        2 每一个元素颜色相同 高度不同 

      5 操作
        1 第4个步骤 我最熟悉了  写布局 css 
      
      */
    </script>
  </body>
</html>

2.第二步实现 动态生成li标签

 <script>
      /* 
      重复就是最好帮我理解代码的  解决方法

      能不能由用户的的输入来决定 生成几个li标签 
      
       */

      let num = +prompt('请输入你想要生成的li标签的个数');

      let liHtml = `<ul>`;
      for (let index = 1; index <= num; index++) {
        liHtml += `<li>${index}</li>`;
      }
      liHtml += `</ul>`;

      document.write(liHtml);
    </script>

3.第三步实现 -获取用户输入的高度

<!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个 输入框
      2 用户在每一个输入框 填写数字-控制的是每一个li标签的高度
      3 最后一个输入框填写完毕了 页面上出现 4个div
      4 4个div的样式部分
        1 一行放4个元素
        2 每一个元素颜色相同 高度不同

      5 操作
        1 第4个步骤 我最熟悉了  写布局 css   已经完成了！！
        2 先实现 for循环生成4个柱子li(类似之前写过的一个 动态生成table表格)（每一个柱子的高不一样 先不管）
        3 动态获取用户输入的高度
        4 还需把这些高度按个设置到 对应的li标签中   
          先实现4功能 写css 3个方式 （内部、外部样式、行内）

      */

      // 用来存放4个li标签的 字符串 原来 ul 不需要 循环 只是 li标签要循环
      let liHtml = `<ul>`;

      // 4个li标签的高度
      let liHeight = [100, 150, 200, 250];

      // 数组是4个  长度就是4   0-3 4个元素
      for (let index = 0; index < 4; index++) {
        //  liHeight[0] = 100
        //  liHeight[1] = 150
        //  liHeight[2] = 200
        //  liHeight[3] = 250

        // let h = liHeight[index];
        // liHtml += `<li style="height:50px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
        // liHtml += `<li style="height:${50}px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
        // liHtml += `<li style="height:${h}px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
        liHtml += `<li style="height:${liHeight[index]}px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
      }

      liHtml += `</ul>`;

      // liHTML =    `<ul></ul>`

      // 把4个li标签 写到页面上
      document.write(liHtml);
    </script>
  </body>
</html>

4.第四步 最终实现整个案例

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

优化柱状图（添加动画）

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

        overflow: hidden;


        animation: ul-over .1s 2s forwards;
      }
      li {
        width: 100px;
        background-color: pink;
        position: relative;

        transform: translateY(100%);
      }
      span {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
      }
      div {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 100%;
      }

      .cls-move {
        animation: move 1s linear forwards;
      }

      @keyframes ul-over {
        100% {
          overflow: visible;
        }
      }

      @keyframes move {
        /* 
        你希望出现动画  解决方案
        1 不再是 高度动态变化
        2 而是   位置动态变化！！ 
          top: 10%  -  top 20%
          bottom:100% - bottom 0% 
          transform:translateY(???)       -> transform:translateY(???) 
         */
        0% {
          transform: translateY(100%);
        }
        100% {
          transform: translateY(0%);
        }
      }
    </style>
  </head>
  <body>
    <script>
      let liHtml = `<ul>`;

      let liHeight = [100, 150, 200, 250];

      for (let index = 0; index < 4; index++) {
        // li标签在插入到 网页的时候 高度 直接就死成了  100和200
        liHtml += `<li class="cls-move" style="height:${liHeight[index]}px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
      }

      liHtml += `</ul>`;
      document.write(liHtml);
    </script>
  </body>
</html>