目标

• 能够知道为什么要有数组
• 能够创建数组
• 能够获取数组中的元素
• 能够对数组进行遍历
• 能够给数组新增一个元素
• 能够独立完成冒泡排序的案例

数组的概念

• 数组（Array）可以把一组相关的数据一起存放，并提供方便的询问（获取）方式
• 数组指一组数据的集合，其中的每个数据项被称为元素，数组中可以存放任意类型的元素
• 数组就是将一组数据存储在单个变量名下

创建数组

JS 中创建数组有两种方式：

• 利用 new 创建数组
• 利用数组字面量创建数组

利用 new 创建数组

    <script>
        // 利用 new 创建数组
        // var 数组名 = new Array();
        var arr = new Array(); // 创建一个新的空数组
    </script>

• 了解，学完对象再掌握 

利用数组字面量创建数组

    <script>
        // 利用数组字面量创建数组
        var 数组名 = [];
        // 使用数组字面量方式创建带初始值的数组
        // '青龙', 1, true, 1.1 都被称为数组元素
        // 用逗号分隔
        var 数组名 = ['青龙', 1, true, 1.1];
    </script>

•  数组的字面量是方括号 [ ]
• 声明数组并赋值称为数组的初始化
• 字面量方式是我们使用最多的方式
• 数组中可以存放任意类型的数据，例如字符串、数字、布尔值等

获取数组中的元素

数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从 0 开始）

• 数组可以通过索引来访问、设置、修改对应的数组元素
• 可以通过 "数组名【索引】" 的形式来获取数组中的元素
• 访问即获取、得到的意思

    <script>
        var arr = ['青龙', 1, true, 1.1];
        console.log(arr[1]);
        console.log(arr[3]);
        console.log(arr[0]);
        console.log(arr[2]);
    </script>

    <script>
        var week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
        var num = prompt('请输入您最喜欢的星期：');
        alert(week[num]);
    </script>

遍历数组

• 遍历：把数组中的每个元素从头到尾都访问一次
• 规律：遍历数组，即从数组中取出每一个元素时，代码是重复的，唯一不同的是索引值在递增

    <script>
        var week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
        for (var i = 0; i < week.length; i++) {
            // 此处计数器 i 被当作数组的索引号使用
            console.log(week[i]);
        }
    </script>

数组长度

• 数组名.length；
• 数组的长度是元素的个数，不要和索引号混淆
• 数组名.length 动态监测数组元素的个数

    <script>
        var shuhan = ['刘备', '诸葛亮', '关羽', '张飞', '赵云', '马超', '黄忠', '刘禅', '姜维'];
        for (var i = 0; i < shuhan.length; i++) {
            // 此处计数器 i 被当作数组的索引号使用
            console.log(shuhan[i]);
        }
    </script>

案例1：数组求和、平均值

    <script>
        var sum = 0;
        var average = 0;
        var num = [2, 6, 4, 3, 8, 7, 5];
        for (var i = 0; i < num.length; i++) {
            // 此处计数器 i 被当作数组的索引号使用
            sum += num[i];
        }
        average = sum / num.length;
        console.log('数组和为' + sum, '\n数组的平均值为' + average);
    </script>

案例2：数组最大值

    <script>
        var num = [2, 6, 4, 3, 8, 7, 5];
        var max = num[0];
        for (var i = 1; i < num.length; i++) {
            if (num[i] > max) {
                max = num[i];
            }
        }
        console.log('该数组中的最大值为' + max);
    </script>

案例3：数组转换为分割字符串

    <script>
        var num = ['王朝', '马汉', '张龙', '赵虎'];
        var str = '';
        var separator = prompt('请输入您想要的分隔符：');
        for (var i = 0; i < num.length; i++) {
            str += num[i] + separator;
        }
        console.log(str);
    </script>

数组中新增元素

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

修改 length 长度新增数组元素

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

    <script>
        // 修改 length 长度新增数组元素
        var arr = ['王朝', '马汉', '张龙', '赵虎'];
        console.log(arr.length);
        arr.length = 5; // 将数组长度修改为 5，里面将新增一个元素
        console.log(arr);
        console.log(arr[4]); // 由于没有给新增元素定义并赋值，所以新增的元素为 undefined
    </script>

修改索引号追加数组元素

• 可以通过修改数组索引的方式追加数组是数组元素
• 不能直接给数组名赋值，否则会覆盖原先的整个数组
• 最常用的方式

    <script>
        // 修改索引号追加数组元素
        var arr = ['王朝', '马汉', '张龙', '赵虎'];
        arr[4] = '展昭'; // 索引号未被使用，追加元素
        arr[5] = '公孙策';
        arr[0] = '包拯'; // 索引号已被使用，替换元素
        console.log(arr);
    </script>

案例：数组新增元素

    <script>
        // 新建一个空数组，将 1~10 添加到数组中
        var arr = [];
        for (var i = 0; i < 10; i++) {
            arr[i] = i + 1;
        }
        console.log(arr);
    </script>

案例：筛选数组

    <script>
        // 将数组 arr 中大于等于 10 的元素选出来存入新的数组 newArr
        var arr = [15, 25, 7, 5, 3, 22, 10];
        // 方法1：newArr.length
        var newArr1 = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr1[newArr1.length] = arr[i];
            }
        }
        console.log(newArr1);
        // 方法2：添加新的计数器 j
        var newArr2 = [];
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr2[j] = arr[i];
                j++;
            }
        }
        console.log(newArr2);
        // 方法3：push()
        var newArr3 = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr3.push(arr[i]);
            }
        }
        console.log(newArr3);
    </script>

数组案例

案例1：删除指定数组元素

    <script>
        // 删除指定元素
        var arr = [11, 8, 2, 31, 8, 43, 10, 8];
        // 方法1：newArr.length
        var newArr1 = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 8) {
                newArr1[newArr1.length] = arr[i];
            }
        }
        console.log(newArr1);
        // 方法2：添加新的计数器 j
        var newArr2 = [];
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 8) {
                newArr2[j] = arr[i];
                j++;
            }

        }
        console.log(newArr2);
        // 方法3：push()
        var newArr3 = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 8) {
                newArr3.push(arr[i]);
            }
        }
        console.log(newArr3);
    </script>

案例2：翻转数组