一、概述

1.1、问题

​ 思考：之前学习过变量，我们说变量的本质是计算机内存的一块空间，而我们定义的一个变量，一次只能存储一个值，比如说，张三的姓名存储起来，可以定义一个username这样的变量。但是问题是：如果我们想存储班级中所有学生的姓名，那么该如何存储呢？

​ 答：可以使用数组（Array），数组可以把一组相关的数据一起存放，并提供非常方便的访问（获取）方式。

1.2、简介

1
2
3
# 1. 数组(Array)是指一组数据的集合，其中的每个数据被称作元素。
# 2. 在数组中可以存放任意类型的元素。
# 3. 存储一组具有“相同数据类型”的数据结构。

0047

二、创建数组

2.1、概述

​ 在JavaScript中，创建数组有整体来说，有两种方式。

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

2.2、利用 new 创建数组

2.2.1、新建一个长度为0的数组

1
2
3
4
<script>
   // 新建一个长度为0的数组
   var arr = new Array();
</script>

2.2.2、新建长度为n的数组

1
2
3
4
<script>
   // 新建一个长度为3的数组
   var arr = new Array(3);
</script>

2.2.3、新建指定长度的数组，并赋值

1
2
3
4
<script>
   // 新建指定长度的数组，并赋值
   var arr = new Array(1, 2, 3, 4, 5);
</script>

2.3、利用数组字面量创建数组

1
2
3
4
5
6
7
<script>
   	// 创建了一个空的数组
   	var arr = [];
    
    // 创建了一个具有三个元素的数组
  	var arr1 = ["张三", "李四", "王五"]; 
</script>
  • 数组的字面量是方括号 []
  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后最多使用的方式

三、数组的下标

3.1、概述

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

3.2、案例

1
2
3
4
5
6
7
8
9
10
<script>
   // 创建数组并初始化数据
   var arr = ["张三", "李四", "王五"];

   console.log(arr[0]); // 张三
   console.log(arr[1]); // 李四
   console.log(arr[2]); // 王五

   console.log(arr[3]); // undefined,因为没有这个数组元素 所以输出的结果是 undefined
</script>

四、数组的长度

4.1、概述

​ 使用“数组名.length”可以访问数组元素的数量（数组长度）。

4.2、案例

1
2
3
4
5
6
7
8
9
<script>
   // 创建数组并初始化数据
   var arr = ["张三", "李四", "王五"];

   // 通过length获取数组的长度
   var len = arr.length;

   console.log("该数组的长度是：" + len);	// 3
</script>

4.3、注意

  • 此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆

  • ==当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化，即：动态监测数组元素的个数。==

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script>
        // 创建数组并初始化数据
        var arr = ["张三", "李四", "王五"];

        var len = arr.length;
        console.log("该数组的长度是：" + len);

        // 再额外的添加一个元素
        arr[3] = '赵六';
        console.log("新添加后，数组的长度是：" + arr.length); // 4
    </script>

五、遍历数组

5.1、概述

​ 就是把数组的元素从头到尾访问一次。

5.2、方式一

1
2
3
4
5
6
7
8
9
<script>
   // 创建数组并初始化数据
   var arr = ["张三", "李四", "王五"];

   // 遍历数组
   for (var i = 0; i < arr.length; i++) {
      	console.log(arr[i]);
   }
</script>

5.3、方式二

1
2
3
4
5
6
7
8
9
<script>
    // 创建数组并初始化数据
    var arr = ["张三", "李四", "王五", "赵六"];

    // 遍历数组
    for (var index in arr) {
       console.log(arr[index]);
    }
</script>

5.4、方式三

1
2
3
4
5
6
7
8
9
<script>
   // 创建数组并初始化数据
   var arr = ["张三", "李四", "王五", "赵六", "猪头"];

   // 遍历数组
   for (var item of arr) {
      console.log(item);
   }
</script>

六、数组中新增元素

6.1、通过修改 length 长度新增数组元素

  • 可以通过修改 length 长度来实现数组扩容的目的
  • length 属性是可读写的
1
2
3
4
5
6
7
8
9
<script>
   	var arr = ["张三", "李四", "王五"];
    console.log("数组的长度是:" + arr.length);

    // 数组的长度修改为了 5  里面应该有5个元素
    arr.length = 5;
    console.log(arr[3]); // undefined
    console.log(arr[4]); // undefined
</script>

6.2、通过修改数组索引新增数组元素

  • 可以通过修改数组索引的方式追加数组元素
1
2
3
4
5
6
7
8
9
10
11
<script>
    var arr = ["张三", "李四", "王五"];
    console.log("数组的长度是:" + arr.length);

    // 通过修改索引的方式新增数组元素
    arr[5] = '赵六';
    
    console.log(arr[3]); // undefined
    console.log(arr[4]); // undefined
    console.log(arr[5]); // 赵六
</script>

7、数组练习

7.1、案例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 求数组 [2, 6, 1, 7, 4] 里面所有元素的和以及平均值。
    
    var sum = 0; // 求和变量
    var average = 0; // 求平均值变量
    var arr = [2, 6, 1, 7, 4];
    for (var i = 0; i < arr.length; i++) {
     	sum = sum + arr[i];
    }
    average = sum / arr.length;

    // 要输出多个变量，可以使用","进行分隔
    console.log(sum, average);
</script>

7.2、案例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    // 求数组[2,6,1,77,52,25,7]中的最大值

    /*
            思路：
                1. 声明一个保存最大元素的变量 max。
                2. 默认最大值可以取数组中的第一个元素。
                3. 遍历这个数组，把里面每个数组元素和 max 相比较。
                4. 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
                5. 最后输出这个 max
    */
    var arr = [2, 6, 1, 77, 52, 25, 7];
    var max = arr[0];

    for (var i = 1; i < arr.length; i++) {
        if (max <= arr[i]) {
             max = arr[i];
        }
    }
    console.log("数组中最大元素是：" + max);
</script>

7.3、案例3

7.3.1、需求

​ 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。

7.3.2、方式一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    // 原数组
    var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];

    // 新数组,保存原数组中大于10的元素
    var newArr = [];

    // 筛选
    // 定义一个变量 用来计算 新数组的索引号
    var j = 0;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] > 10) {
             newArr[j] = arr[i];
             j++;
        }
    }
    console.log("新数组的元素:" + newArr);
</script>

7.3.3、方式二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    // 原数组
    var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];

    // 新数组,保存原数组中大于10的元素
    var newArr = [];

    // 筛选
    // 定义一个变量 用来计算 新数组的索引号
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] > 10) {
            newArr[newArr.length] = arr[i];	 // newArr.length 动态检测数组长度的变化
        }
    }
    console.log("新数组的元素:" + newArr);
</script>

7.4、翻转数组

7.4.1、需求

​ 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]的内容反过来存放。

7.4.2、方式一：存入新数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 原数组
    var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];

    // 新数组
    var newArr = [];

    // 翻转实现
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }

    console.log(newArr);
</script>

7.4.3、方式二：原来数组的基础上翻转

1
2
3
4
5
6
7
8
9
10
11
12
<script>
   // 原数组
   var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
   // 翻转实现
   for (var i = 0; i < arr.length / 2; i++) {
      var temp = arr[i];
      arr[i] = arr[arr.length - i - 1];
      arr[arr.length - 1] = temp;
   }

 	console.log(arr);
</script>