【前端学记笔记】07-JavaScript数组

数组

数组的概念

• 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据储存在单个变量名下的优雅方式
• 数组可以把一组相关的数据一起存放，并提供便捷的访问方式
  

创建数组

利用new创建数组

• 注意Array()的A要大写
• 暂时只做了解，等学完对象再学习

利用数组字面量创建数组

语法格式：

代码示例：

	 // 利用数组字面量创建数字
        var arr = [];
        var arr1 = [1,2,'马尔扎哈',true];
     // 数组里面的数据，如1,2称为数组元素
     //注意数组中的数据用逗号隔开 

获取数组中的元素

数组的索引

• 概念：如下图所示

• 数组可以通过数组的索引来访问（获取），设置和修改对应的数组元素，我们可以通过数组名[索引]的形式来获取数组中的元素
• 代码示例：

var arr1 = [1,2,'马尔扎哈',true];
        // 数组里面的数据，如1,2称为数组元素 
      // 获取数组元素：通过索引（下标）；下标从零开始
        console.log(arr1[2]);
        console.log(arr1[4]);//因为没有这个数组元素,undefined

遍历数组

• 概念：(通过循环)把数组中的每个元素从头到尾都访问一次
• 代码示例：

// 遍历数组:从头到尾把数组元素都访问一次
   var arr3 = ['关羽','张飞','赵云','黄忠','马超','刘备','姜维'];
        // for(i=0;i<7;i++){
        //     console.log(arr3[i]);
        // }//同理可利用数组长度=元素个数：
        //数组名.length（动态监测数组元素个数） 
        for(vari=0;i<arr3.length;i++){
            console.log(arr3[i]);
        }

• 数组长度：上述代码优化使用到的数组长度，通过数组名.length，可以访问数组元素的数量（数组长度）

在数组中新增元素

修改length长度

• 可以通过修改length长度来实现数组扩容目的
• length属性是可读写的
• 代码示例：

// 修改length元素
        var arr2 = ['red','green','pink'];
        console.log(arr2.length);//3
        arr2.length = 5;//修改为5后，新增两个变量未赋值：undefined

修改数组索引追加数组元素

• 可以通过修改数字索引的方式来追加数组元素
• 不能直接给数组名赋值，否则会覆盖掉以前的数据
• 这种方式是最常用的一种方式
• 代码示例：

// 通过修改数组索引追加数组元素
        var arr3 = ['red','green','pink'];
        arr3[3] = 'blue';
        console.log(arr3);//四个数组元素
        arr3[1]= 'yellow';//原本的数组元素会被替换
        // arr3 = 'oooo';
        //不要直接给数组名赋值，否则里面的数组元素都会消失

数组案例源码

其中重点案例：

• 数组求和及平均值数组分割成字符串
• 筛选数组
• 删除指定数组元素
• 翻转数组
• 冒泡排序

        // 1.定义数组，存放星期一到星期日（共7天），在控制台输出星期日
        var week = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        console.log(week[6]);

        // 2.数组求和及平均值
        var arr = [2,6,1,7,4];
        var sum = 0;
        for(i=0;i<arr.length;i++){
            sum += arr[i];
        }
        console.log(sum);
        console.log(sum/arr.length);

        // 3.求数组最大值
        var arr1 =[2,6,1,77,52,25,7];
        var max = arr[0];
        for(i=1;i<arr1.length;i++){
            if(arr1[i]>max){
                max = arr1[i];
            }
           
        }
        console.log(max);

        // 4.数组转换为分割字符串：
        // 将['red','blue','pink','green']转换为字符串，
        //并且用|或任意符号分割，输出red|blue|pink|green|
        var arr4 = ['red','blue','pink','green'];
        var sum1 = '';
        var sep ='|';
        for(i=0;i<arr4.length;i++){
            sum1 += arr4[i] + sep;
        
        }
        console.log(sum1);

        // 5.新增一个数组，里面存放10个整数（1-10）
            var arr5 = [];
            var num = 1;
            for(i=0;i<=9;i++){
              arr5[i] = num;
              num++;
            }
            console.log(arr5);
        
        // 6.筛选数组：
        //[2,0,6,1,77,0,52,0,25,7]中大于10的元素选出来，放入新数组
            var arr6 = [2,0,6,1,77,0,52,0,25,7];
            var arr7 = [];
            j = 0;
            for(i=0;i<arr6.length;i++){
                if(arr6[i]>10){
                    // 新数组索引号应从0开始，依次递增
                    arr7[j]=arr6[i];
                    j++;
                }
            }
            console.log(arr7);
            // 筛选数字2：代码优化
            var arr6 = [2,0,6,1,77,0,52,0,25,7];
            var arr7 = [];
            // 刚开始arr7.length长度就是0
            for(i=0;i<arr6.length;i++){
                if(arr6[i]>10){
                    // 新数组索引号应从0开始，依次递增
                    arr7[arr7.length]=arr6[i];
                }
            }
            console.log(arr7);

        // 7.删除数组指定元素：
        //将[2,0,6,1,77,0,25,7]中的0去掉后，形成一个不包含0的新数组
            var arr = [2,0,6,1,77,0,25,7];
            var newarr = [];
            for(i=0;i<arr.length;i++){
                if(arr[i]!=0){
                    newarr[newarr.length]=arr[i];
                }
            }
            console.log(newarr);

        // 8.翻转数组：
        //将['red','green','blue','pink'];的内容反过来存放
                // 自己的解法：
                var arr = ['red','green','blue','pink'];
                var newarr = [];
                var long = arr.length;//取原数组长度用于循环
                for(i=0;i<long;i++){
                    newarr[i] =arr[arr.length - 1];//取末尾的值
                    arr.length = arr.length - 1;//缩短数组
                    }
                 console.log(newarr);

                // 老师的解法 :思路一致，但代码更为简洁
                var arr = ['red','green','blue','pink'];
                var newarr = [];
                for(i=arr.length-1;i>=0;i--){
                    newarr[newarr.length]=arr[i];
                    }
                 console.log(newarr);

        // 9.数组排序（冒泡排序）：
        // 是一种算法：
        //把一系列的数据按照一定的顺序进行排列显示（从小到大，或从大到小）
        // 自己做的：效果实现，但代码无用功多,无参考意义
                var arr = [7,4,2,3,5];
                var temp;   
                for( var i=0;i<arr.length;i++){
                    for(var j=0;j<arr.length;j++){
                        if(arr[i]>arr[j]){
                        temp = arr[j];
                        arr[j] = arr[i];
                        arr[i] = temp;
                        }
                        
                    }
                }
                console.log(arr);//7 5 4 3 2