【JavaScript 前端开发 】 第三章

一.数组的基本概念

java中的数组：储存很多数据的容器，
特点：1.所有的数据的类型必须要一致
2.长度无法更改
    
javaScript中的数组：储存很多数据的容器，
特点：1.所有的数据的类型可以不一致
 2.长度可以随意更改
                     
数组是存储一系列值的集合，它是由一个或多个元素组成的，各元素之间使用逗号“,”分隔。
数组中的每个元素由“索引”和“值”构成。 
索引：也可称为“下标”，用于识别元素，以数字表示，默认情况下从0开始依次递增。
值：元素的内容，可以是任意类型的数据。

二.如何创建数组

js中创建数组的两种方式：都要掌握
1.静态声明:声明数组的同时，将元素值都定下来。
var  arr = [1,2,3,4,5,6,7];   //java是大括号 JS是中括号
var  arr = [];  //创建一个长度为0的空数组
                            
2.动态声明：暂时只声明，赋值放到后续进行
var arr = new Array();//声明了一个空数组（长度为0）
arr[0] = 1; arr[1] = 2;
            
动态声明的注意事项：
写法1：var arr = new Array(); 创建了一个长度为0的空数组
写法2：var arr = new Array(10); 创建了一个长度为10的空数组
写法3：var arr = new Array(1,2,3,4,5); 创建了一个长度为0的空数组
注意事项：写法2和写法3的区分。如果括号内部只有一个数字，就表示长度，而非值
如果有若干个，才表示值

三.数组的基本操作

<script>
        //常见的数组操作1:获取指定位置的元素 语法:arr[index] 下标从0开始
        //常见的数组操作2:获取数组的长度，通过属性，xxx.length    
        // 注意事项:Java中获取数组长度通过方法：xxx.length()
        //常见的数组操作3:遍历数组,根据for循环进行遍历
            
        var arr = [1,2,3,"语文" , true , 22.22 , undefined , null];
        // console.log(arr[5]);//获取下标为5的元素
        // console.log(arr.length);
            
        // for(var i = 0 ;i<arr.length;i++){
        //     console.log(arr[i]);
        // }
            
        //常见的数组操作4:随意地更改数组的长度
        console.log("数组修改之前的长度为" + arr.length);
        //方法1: 简单操作直接修改 ,不推荐
        // arr.length = 100;
        // console.log("数组修改之后的长度为" + arr.length);
        //方法2:直接在数组的后面添加元素即可
        arr[8] = "新元素1";
        arr[9] = "新元素2";
        arr[19] = "新元素3";
        //修改元素
        arr[0] = 111;
        console.log("数组修改之后的长度为" + arr.length);
        for(var i = 0 ;i<arr.length;i++){
            console.log(arr[i]);
        }
            
            
        console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
        //删除数组中指定的元素
        var arr = [1,2,3,4,5];
        // console.log(arr);
        // delete arr[2];//准确地说法应该是: 讲指定位置的元素 修改成 empty而已  并没有实现真正的删除.
        // console.log(arr);
            
        //如何实现真正的删除:  Java也好JS也好 都没有直接提供相对的方法.
        //思路:创建一个新的数组,然后旧数组遍历 赋值给新数组.然后遍历的时候进行判断,如果到了那个值不想要,跳过
        // var arr1 = [ ];
        // var index = 0;
        //  for(var i = 0 ; i<arr.length;i++){
        //      if (arr[i]==3) {
        //          continue;
        //      }
        //      arr1[index] = arr[i];
        //      index++;
        //  }
        // console.log(arr);
        // console.log(arr1);
    </script>

四.查找最大值和最小值的案例

<script>    
        var arr =[12,324,543,654,6,547,3,5443,534,5654,654,654,7,5,765];
        //查找出最大值和最小值
        var max = arr[0];
        var min = arr[0];
        for(var i = 0 ;i<arr.length;i++){
            if( arr[i] > max ){
                max = arr[i];
            }
            
            if(arr[i]<min){
                min = arr[i];
            }
        }
        console.log(max + "~~" + min);    
    </script>

五.斐不拉切数列

<script>
        /*
            该数列又称为为兔子数列， 源自于澳大利亚的兔子衍生事件
            若干年以前  一位农夫不小心弄丢了一对兔子，然后2年以后他的农场就没了
            原因：兔子不仅可以公母繁殖，还可以公公  母母繁殖
            兔子的繁殖能力特别强，强到什么地步 如下：
            每对兔子 每第三个月都能够产下一对兔子。然后后续每个月都能产下一对兔子
            
            问第10个月有多少对兔子：假设一开始就一对。
            月份    对数
            1        1     
            2        1
            3        2    原有的一对  +  生下来的1对
            4        3    原有的一对  +  生下来的2对
            5        5    原有的一对  +  生下来的3对   + 最开始生下来的又生了
            6       8
            7       13
            8       21
        */
       
       //规律:  从第三个月开始  每个月的兔子数  = 前第1个月 + 前第2个月
       //要求:显示前10对兔子的对数
       var arr = new Array(10);
       arr[0] = 1;
       arr[1] = 1;
       for(var i = 2;i<arr.length;i++){
           arr[i] = arr[i-1]  + arr[i-2];
       }
       
       console.log(arr)
       
    </script>

六.数组的排序

<script>
        //数组的排序非常重要:  成绩 销量   热度 等等属性 都需要进行排序
        var arr = [78,6213,5544,5432,213,654,756,767,654,876,87,69789,789,78];
        //要求:从小到大排序.
        //最常见的排序算法  : 冒泡排序
            
        //步骤1: 需要判断多少轮  arr.length-1
        for(var i = 0 ; i<arr.length-1;i++){
            //步骤2:比较   第i个数  和 后续的数一一比较   问题:比较多少次 arr.length-1-i
            for(var j = i+1 ; j<arr.length;j++){
                if(arr[i]>arr[j]){
                    var temp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = temp;
                }
            }
        }  
        console.log(arr);    
    </script>

七.二维数组

<script>
        /*
            javaScript中的数组：数据的类型可以不一致
            也就是意味着数组里面可以再次存储数组 来实现二维甚至多维数组
            一般来说掌握二维数组就够了。
            二维数组：可以看成  几行几列
            
        */
           
          //声明二维数组的语法:
          //语法1:  var arr = new Array( new Array(10) , new Array(9) , new Array(12)  );
           
           //语法2:  var arr = [ [1,3] , [11,22,33] , [33,22,55] ];
           
                var arr = [
                    [1,2],
                    [2,3,4],
                    [4,5,6]
                ]
         
           //例题:如何创建一个二维数组,要求长度为100  且二维数组里面的每个数组长度也为100,暂时不知道元素内容
           //写法1： 不推荐  var arr = new Array( new Array(10) , new Array(10)  , new Array(10) , ... ,new Array(10)  );
           //写法2:
           var arr = new Array(100);//仅仅是一个一维数组
           for(var i = 0 ; i<100;i++){
               arr[i] = new Array(100);
           }
           console.log(arr);
           
           
           //遍历二维数组思路: 先将二维数组看成一维数组
           
           var arr = [ [1,2,3,4]  , [5,6,7,8]  , [11,22,33,44] ];
           //如何遍历
           //1.先遍历总长度
           for(var i = 0 ; i<arr.length ; i++){
               //2.在遍历数组里面的数组
               for(var j = 0 ; j<arr[i].length ; j++){
                   console.log(arr[i][j]);
               }
           }
           
           //如何获取二维数组中指定的数
           var index = arr[1][2] ; //7
           
           var index = arr[2][1] ; //22
           
           //利用二维数组实现杨辉三角 姓名为杨辉吃饱了没事做,发明的一个三角形
           //将杨辉三角的前10行打印在页面上.
           /*
           
            1
            1   1
            1   2   1
            1   3   3   1
            1   4   6   4    1
            1   5   10  10   5   1
            1   6   15  20   15  6    1
           
           */
          
           //思路:1.找规律  几行几列的三角形   10行 和  "和行数相等的" 列
           //第几行就有几列
           //转换成二维数组,我们应该创建一个 长度为10的二维数组 ,然后数组里面的长度随之改变
           var arr = new Array(10);
           for(var i = 0;i<arr.length;i++){
               arr[i] = new Array(i+1);
           }
           //以上就声明了一个可以容纳的容器
           
           //赋值:
           for(var i = 0 ; i<arr.length;i++){//i行数
                   for(var j = 0 ; j<arr[i].length ; j++){//j列数
                    if( j==0  ||  j==i  ){
                        arr[i][j] = 1;
                    }else{
                        arr[i][j] = arr[i-1][j] + arr[i-1][j-1];
                    }
                   }
           }
           
           //以上知识点 均没有实际意义,单纯就是提升自己思维能力.解决问题的能力
           

           for(var i = 0 ; i<arr.length;i++){
               
               for(var j = 0 ; j<arr[i].length ; j++){
                   document.write(arr[i][j] + "  ");
               }
               document.write("<br>");
               
           }
           
    </script>