js数组

1-数组的初体验

  <script>
        // 1.声明数组
        let arr = ['不挑', '吃什么', '都行' , '随便']
        // 获取 这个数组中的 第0个元素 
          console.log(arr[0]);
        //   arr.length 表示 该数组的长度
          console.log(arr.length);
          console.log(arr[100]); //不会有一个正常的结果 （超出数组的长度）
    </script>

2.数组的循环输出

<script>
        let arr = [10, 20, 30, 40, 50]
        // 通过循环 挨个大印出来数组里面的元素
        for (let index = 0; index < 5; index++) {
            // xndex = 1.2.3.4.5 arr [5]
            // console.log(arr[index]);
            // arr[index] 1没有输出arr[0] 2.输出arr[5] nudefined

        }
    </script>

3.数组的案例

 <script>
        let arr = ['紫色', '红色', '蓝色', '粉色']
        for (let index = 0; index < arr.length; index++) {
            console.log(arr[index]);
        }

    </script>

4.数组的求和

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

5.数组求最大值和最小值

1最大值

<script>

        let a = [2, 3, 55, 56, -20, 736, 1, 0]
        // 假设一个最大值 数组的第0个元素
        let max = a[0];
        // let max;
        // let max = undefined;
        // let max = 0;

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

2.最小值

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

      // for循环
      for (let i = 0; i < arr.length; i++) {
        // 如果 arr[i]   比 我的min 要小 那 min 等于你arr[i]
        if (arr[i] < min) {
          min = arr[i];
        }
      }
      console.log(min);
    </script>

6-数组的新增

 <script>
        // 定义一个数组
        let arr = ['水果', '刚卖完'];
        // 多增加一个元素
        arr.push('好的')

        console.log(arr);
    </script>

7.数组用户输入执行新增

<script>
        // 接收用户输入
        let arr = [];
        for (let index = 1; index <= 4; index++) {
            let userName = prompt('')
            arr.push(userName)
        }
    </script>

8.数组-push的应用

  <script>
        // 接收用户的4个输入的值,组成一个数组
        let arr = []
        // 用户的输入实现
        for (let index = 0; index < 4; index++) {
            // 用户的输入
            let userName = prompt ('输入你想要输入的数组')
            arr.push (userName)
            
        }
        console.log(arr);
    </script>

9.数组的过滤

<script>
        // 把数组中 大于等于10元素 存放到新的数组中
            let arr1 = [10, 33, 55, 9, 09, 2,]
            // 存放过滤好的元素的数组
            let arr2 = []
            // 对第一个数组 循环

            for (let index = 0; index < arr1.length; index++) {
                
            if (arr1[index] >= 10 ) {
                // 需要把前的这个元素 添加到新数组中
                arr2.push (arr1[index])
            }
            }
            console.log(arr2);
    </script>

10.数组-unshift-增加元素

<script>
        let arr = ['red', 'pink']
        // push 是把新的元素 设置到 数组的尾部
        arr.push ('blue')
        alert(arr)

        // unshift 是把新的元素 设置到 数组的开头
        arr.unshift("pink")
        alert(arr)

        // 数组添加元素的总结
        // 1 两种元素添加元素的方式
        // push 尾部
        // nushift 开头添加元素
        // 2. 在开发中  push 用得最多  unshift 了解即可
        
    </script>

11.push和unshift返回数组的长度

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

        let arr = ['芒果', '西瓜']
        let arr1 = arr.unshift('香瓜') //arr1 = 数组的长度 = 3 
        console.log(arr1);
        console.log(arr.length);
    </script>

12.获取不等于0数组的元素

  <script>
        // 获取到一个新的数组 新的数组 大于等于10 
        // 获取到一个新的数组 新的数组 不需要带上0 
        let arr = [10, 0, 0, 9, 7, 4, 3, 22, 33,]
        //   存放新的数组的
        let nuwArr = []
        for (let index = 0; index < arr.length; index++) {
            //  满足条件的就要

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

            /*   if (arr[index] !== 0) {
                  nuwArr.push(arr[index])
              } */
        }
        console.log(nuwArr);
    </script>

13.数组 删除-pop

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

        // 希望删除掉最后的一个元素 麻瓜不要
        // arr.pop();
        // console.log(arr);
         // 希望删除掉第一个元素
         arr.shift();
         console.log(arr);
    </script>

14.数组的补充

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

15.数组指定元素来删除

<script>
        let arr = ['西瓜', '香蕉', '麻瓜']
        // 从 1 的位置开始 想要删除几个
        // 前面的是控制数组的 后面的是想要删除多少个
        // arr.splice(2,1)
        // console.log(arr);
        // 在 0的位置，删除0个元素，增加一个红薯
        arr.splice(0, 1, '红薯')
        console.log(arr);
    </script>

17.案例-动态生成柱状图

    <script>
        /* 
        
        需求分析：（用文字 把看见的需求 描述下来）
        1 一打开页面 弹出了4个 输入框 
        2 用户在每一个输入框 填写数字
        3 最后一个输入框填写完毕了 页面上出现 4个div
        4 4个div的样式部分
          1 一行放4个元素
          2 每一个元素颜色相同 高度不同 
  
        5 操作
          1 第4个步骤 我最熟悉了  写布局 css 
        */
        let lihtml = (`<ul>`);
        let liheight = [];

        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>