JavaScript基础语法7-数组

• 数组(Array)的概念

数组就是一组数据的集合，其中的每个元素被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

var num = 10 ;         // 普通变量一次只能存储一个值

var arr = [ 1,2,3,5];   //数组一次可以存储多个值

• 创建数组

1. 利用 new 创建数组

var  数组名 = new Array();

var arr = new Array();   // 创建一个新的空数组

2. 利用数组字面量创建数组（使用的最多）

 // 1. 使用数组字面量方式创建空的数组

var 数组名 = [ ];

//  2. 使用数组字面量方式创建带初始值的数组

var  数组名 = ['大白','小黑','阿黄','小花','瑞奇'];

        数组字面量是方括号[ ]

        声明数组并赋值称为数组的初始化

• 获取数组中的元素

1.数组的索引

索引(下标): 用来访问数组元素的序号(数组下标从0开始)。

 数组可以通过索引来访问、设置、修改对应的数组元素。我们可以通过"数组名[索引]"的形式来获取数组中的元素。

var arrStus = [1, 2, 3];  // 定义数组

alret(arrStus[1]);    //  获取数组中的第2个元素 

• 遍历数组

遍历：就是把数组中的每个元素从头到尾都访问一次。

    <script>
        //  遍历就是把数组的元素从头到尾访问一次
        var arr= ['red','green','blue'];
        for(var i = 0; i < 3; i++){
            console.log(arr[i]);
        }
        // 1.因为数组索引号从0开始，所以 i 必须从 0 开始 i < 3
        // 2. 输出的时候 arr[i] i 计数器当索引号来用
    </script>

数组的长度(数组名.length)

        //  1. 数组的长度是元素的个数 不要跟索引号混淆

        //  2. arr.length 动态监测数组元素的个数

示例

    <script>
        // 数组的长度
        var arr= ['关羽','张飞','马超','赵云','黄忠','刘备','姜维'];
        for(var i = 0; i < 7; i++){
            console.log(arr[i]);
        }
        console.log(arr.length);
        for(var i = 0; i < arr.length; i++){
            console.log(arr[i]);
        }
        //  1. 数组的长度是元素的个数 不要跟索引号混淆
        //  2. arr.length 动态监测数组元素的个数
    </script>

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

 <script>
        //  1. 求数组[2,6,1,7,4] 里面所有元素的和以及平均值
        var arr = [2,6,1,7,4];
        var sum = 0;
        
        for(var i = 0; i < arr.length; i++){
            sum = sum + arr[i]; 
        }
        avg = sum/arr.length;
        console.log(sum);
        console.log(sum/arr.length);
        console.log(sum, avg); // 输出多个变量，用逗号分隔
    </script>

     案例：    2.求数组[2,6,1,77,53,25,7]中的最大值

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

案例：3. 将数组['red','green','blue','pink']转换为字符串，并且用|或其他符号分割 

    <script>
        // 将数组['red','green','blue','pink']转换为字符串，并且用|或其他符号分割
        // 输出'red|green|blue|pink|'
        var arr = ['red','green','blue','pink'];
        var str = '';
        var sep = '|';
        for(var i = 0; i < arr.length; i++){
           // str = str + arr[i]+'|';
              str = str + arr[i]+ sep ;
        }
        console.log(str);
    </script>

• 数组中新增元素

1.可以通过修改length长度以及索引号增加数组元素                

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

    <script>
        // 1. 新增数组元素，修改length长度
        var arr = ['red','green','blue'];
        console.log(arr.length);
        arr.length = 5; // 把数组的长度修改为了 5 里面应该有5个元素
        console.log(arr);
        console.log(arr[3]);    // undefined
        console.log(arr[4]);    // undefined
    </script>

2.通过修改数组索引新增数组元素

• 可以通过修改数组索引的方式追加数组元素

    <script>    
        // 2. 新增数组元素 修改索引号
        var arr1 = ['red','green','blue'];
        arr1[3]='pink';
        console.log(arr1);
        arr1[4]='hotpink';
        console.log(arr1);
        arr1[0]='yellow'; // 这里是替换原来的数组元素 
        console.log(arr1);
        arr1 = '有点意思';
        console.log(arr1); // 不要直接给 数组名赋值 ，否则里面的数组元素都没有了
    </script>

 案例： 新增一个数组，里面存放10个整数

    <script>
        // 新增一个数组，里面存放10个整数
        var arr = [];
        for(var i = 0; i < 10; i++){
            // arr = i; 不要直接给数组名赋值 否则以前的元素都没了
            arr[i] = i + 1;
        }
        console.log(arr);

    </script>

案例：筛选数组

    <script>
        // 将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组
        // 方法 1
        var arr = [2,0,6,1,77,0,52,0,25,7];
        var newArr = [];
        var j = 0;
        for(var i = 0; i < arr.length; i++){
            if(arr[i] >= 10){
                //  新数组索引号应该从0开始，依次递增
                newArr[j] = arr[i];
                j++;
            }
        }
        console.log(newArr);
        // 方法 2
        var arr = [2,0,6,1,77,0,52,0,25,7];
        var newArr = [];
        // 刚开始 newArr.length 就是 0
        for(var i = 0; i < arr.length; i++){
            if(arr[i] >= 10){
                //  新数组索引号应该从0开始，依次递增
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>

• 数组案例

1.  删除指定数组元素 

    <script>
        // 将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组
        var arr = [2,0,6,1,77,0,52,0,25,7];
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if( arr[i] != 0){
                newArr[newArr.length] = arr[i];
            }
        }   
        console.log(newArr);
    </script>

2.  翻转数组

    <script>
        // 将数组['red','green','blue','pink']的内容反过来存放
        var arr = ['red','green','blue','pink'];
        var newArr=[]
        for(var i = arr.length-1; i >= 0; i--){
            newArr[newArr.length]=arr[i];
        }
        console.log(newArr);
    </script>

3. 数组排序（冒泡排序）

冒泡排序： 是一种算法，把一系列的数据按照一定的顺序进行排序显示(从小到大或者从大到小).

冒泡排序是一种简单的排序算法，它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。

 案例

    <script>
        // 将[5,4,3,2,1]中的元素按照从小到大的顺序排序，输出：1,2,3,4,5
        var arr = [3,5,2,4,1];
        for(var i = 0; i <= arr.length-1; i++){ //外层循环管趟数
            for(var j = 0; j <= arr.length-i-1; j++){ // 里层循环 管每一趟的交换次数
                // 内部交换2个变量的值 前一个和后面一个数组元素相比较
                if(arr[j] > arr[j+1]){
                //  if(arr[j] < arr[j+1]){ //从大到小
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);
    </script>