1 初识数组
如何保存一个班级的所有学生的相关信息，如姓名、学号、年龄？
- 一种方法利用前面学习过的知识，则每一条信息都需要一个变量去保存，缺点是这样做很麻烦，而且容易出错，又不合理。
- 另一种方法就是利用数组。
数组是存储一系列值的变量集合。
数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。
数组元素：每个数组元素由“下标”和“值”构成。
- 下标：又称索引，以数字表示，默认从0开始依次递增，用于识别元素。
- 值：元素的内容，可以是任意类型的数据，如数值型、字符型、数组、对象等。
数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。
-
一维数组：就是指数组的“值”是非数组类型的数据，如上图。
-
二维数组：是指数组元素的“值”是一个一维数组，如下图。
-
多维数组：当一个数组的值又是一个数组时，就可以形成多维数组。它通常用于描述一些信息。
保存一个班级学生信息，每个数组元素都代表一个学生，而每个学生都使用一个一维数组分别表示其姓名、学号、年龄等信息，这样通过一个变量即可有规律的保存一个班级的所有学生信息，方便开发时进行处理。
2 创建数组
数组在 JavaScript 中的创建方式：
- 实例化 Array 对象的方式，也就是 new Array()。
- 直接使用 “[]” 的方式。
2.1 使用 Array 对象创建数组
实例化 Array 对象的方式创建数组，是通过 new 关键字实现的。
// 元素值类型为字符串
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array();
var arr2 = new Array;
2.2 使用 “[]” 创建数组
直接法 “[]” 与 Array() 对象的使用方式类似，只需将 new Array() 替换为 [] 即可。
var weather = ['wind', 'fine',]; // 相当于：new Array('wind', 'fine',)
var empty = []; // 相当于：new Array
// 控制台输出 mood：(5) ["sad", empty × 3, "happy"]
var mood = ['sad', , , ,'happy'];
- 在创建数组时，最后一个元素后的逗号可以存在，也可以省略。
- 直接法 “[]” 与 Array() 对象在创建数组时的区别在于，前者可以创建含有空存储位置的数组，而后者不可以。
- 当参数只有一个时，结果会有所不同。
var arr = [10]; //创建一个第一个值为10的数组
var arr1 = new Array(10); //创建一个长度为10的数组
console.log(arr);
console.log(arr1);
3 数组的基本操作
3.1 获取数组长度
Array 对象提供的 length 属性可以获取数组的长度，其值为数组元素最大下标加1。
var arr1 = [78, 88, 98];
var arr2 = ['a', , , , 'b', 'c'];
console.log(arr1.length); // 输出结果为：3
console.log(arr2.length); // 输出结果为：6
- 数组 arr2 中没有值的数组元素会占用空的存储位置。因此，数组的下标依然会递增。从而 arr2 调用 length 属性最后的输出结果即为6。
数组的 length 属性不仅可以用于获取数组长度，还可以修改数组长度。
在利用 length 属性指定数组长度时，有以下是三种情况：
- 设置的 length>原数组长度，若 length 的值大于数组中原来的元素个数，则没有值的数组元素会占用空存储位置。
var arr1 = [];
arr1.length = 5;
console.log(arr1); // 输出结果：(5) [empty × 5]
var arr2 = [1, 2, 3];
arr2.length = 4;
console.log(arr2); // 输出结果：(4) [1, 2, 3, empty]
- 设置的 length=原数组长度，若 length 的值等于数组中原来的元素个数，数组长度不变。
var arr3 = ['a', 'b'];
arr3.length = 2;
console.log(arr3); // 输出结果：(2) ["a", "b"]
- 设置的 length<原数组长度，若 length 的值小于数组中原来的元素个数，多余的数组元素将会被舍弃。
var arr4 = ['hehe', 'xixi', 'gugu', 'jiujiu'];
arr4.length = 3;
console.log(arr4); // 输出结果：(3) ["hehe", "xixi", "gugu"]
除此之外，在利用 Array 对象方式创建数组时，也可以指定数组的长度。
var arr = new Array(3);
console.log(arr); // 输出结果：(3) [empty × 3]
注意：JavaScript 中不论何种方式指定数组长度后，并不影响继续为数组添加元素，同时数组的 length 属性值会发生相应的改变。
3.2 数组的访问与遍历
访问数组元素
数组元素访问方式：“数组名[下标]”。
var fruit = ['苹果', '香蕉', '橘子'];
console.log(fruit[0]);
console.log(fruit[1]);
console.log(fruit[2]);
console.log(fruit[3]);
当访问数组中不存在的数据时，会返回 undefined 而不是报错
遍历数组元素
所谓遍历数组就是依次访问数组中所有元素的操作。
- 利用下标遍历数组可以使用：for(循环语句)。
- 利用下标遍历数组可以使用：for…in语句。
for (variable in object) {
...}
- for…in 中的 variable 指的是数组下标。
- for…in 中的 object 表示数组的变量名称。
- 除此之外，若 object 是一个对象，for…in 还可以用于对象的遍历。
var arr = [12, 59, 66]; // 待求和的二维数组
var sum = 0;
for (var j in arr) {
// 遍历数组arr的元素
sum += arr[j]; // 二维数组元素累计相加
}
ES6 新增的 for…of 语法
在 ES6 中，新增了一种 for…of 语法，可以更方便地对数组进行遍历。
var arr = [1, 2, 3];
for (var value of arr) {
console.log(value);
}
- 变量 value：表示每次遍历时对应的数组元素的值。
- 变量 arr：表示待遍历的数组。
- 结果：在控制台中依次输出1、2和3。
forEach 遍历数组
- 按顺序遍历整个数组
- 支持 IE8 以上或者其他的浏览器
- 由自己创建但不由自己调用的函数称为回调函数
语法：
Array.forEach(function(value, index, arr){
... });
var arr = [2, 3, 4, 5, 6, 7];
arr.forEach(function(item, index, arr){
//三个参数分别代表 item 当前遍历到的元素 index 当前遍历到的下标 arr 数组本身
})
3.3 元素的添加与修改
元素的添加与修改元素的方式：“数组名[下标]”。与访问数组中的元素的方式相同。
添加元素
var height = [];
height[5] = 183;
height[0] = 175;
height[3] = 150;
console.log(height);
- 添加数组元素：数组名[下标] = 值。
- 允许下标不按照数字顺序连续添加，未设置具体值的元素，会以空存储位置的形式存在。
- 数组中元素保存顺序与下标有关，与添加元素的顺序无关。
var arr = ['Asa','Taylor'];
arr[2] = 'Tom';
arr[3] = 'Jack';
console.log(arr);
修改元素
修改元素与添加元素的使用相同，区别在于修改元素是为已含有值的元素重新赋值。
var arr = ['a', 'b', 'c', 'd'];
arr[2] = 123;
arr[3] = 456;
console.log(arr);
3.4 元素的删除
在创建数组后，有时也需要根据实际情况，删除数组中的某个元素值。
例如，一个保存全班学生信息的多维数组，若这个班级中有一个学生转学了，那么在这个保存学生信息的数组中就需要删除此学生。
此时，可以利用 delete 关键字删除该数组元素的值。
delete 关键字只能删除数组中指定下标的元素值，删除后该元素依然会占用一个空的存储位置。
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu); // 输出结果：(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1]; // 删除数组中第2个元素
console.log(stu); // 输出结果：(3) ["Tom", empty, "Lucy"]
3.5 解构赋值
除了前面学习过的变量声明与赋值方式，ES6 中还提供了另外一种方式——解构赋值。
例如，若把数组 [1,2,3] 中的元素分别赋值为 a、b和c，传统的做法是单独为变量声明和赋值。
// 传统的做法
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
// 解构赋值方式
[a, b, c] = [1, 2, 3];
- 当左侧变量的数量小于右侧的元素的个数，则忽略多余的元素。
- 当左侧变量数量大于右侧的元素个数时，则多余的变量会被初始化为 undefined。
var arr = [1, 2, 3];
[a, b] = arr;
// 输出结果：1 - 2
console.log(a + ' - ' + b);
var n1 = 4, n2 = 8;
[n1, n2] = [n2, n1];
// 输出结果：8 - 4
console.log(n1 + ' - ' + n2);
- 解构赋值时右侧的内容还可以是一个变量。
- 通过解构赋值完成两个变量数值的交换。
3.6 练习作业
- 查找最大值与最小值，输入5门成绩，求总分，平均分、最高分，最低分
- 假设待查找数组的第一个元素为最大值max和最小值min。
- 从数组的第二个元素开始遍历数组。
- 在遍历数组时，判断当前元素是否大于max，若大于，修改max值。
- 同理，在遍历数组时，判断当前元素是否小于min，若小于，修改min值。
- 返回数组中指定元素的下标
4 常见二维数组操作
4.1 创建与遍历
了解一维数组如何创建后，二维数组的创建就非常的简单了，只需将数组元素设置为数组即可。
// 使用Array对象创建数组
var info = new Array(new Array('Tom', 13, 155), new Array('Lucy', 11, 152));
var arr = new Array(new Array, new Array);// 空二维数组
// 使用“[]”创建数组
var num = [[1, 3], [2, 4]];
var empty = [[], []]; // 空二维数组
在创建完二维数组后，如何遍历二维数组中的元素，对其进行操作呢？
- 一维数组可以利用 for、for…in 或 for…of（ES6提供）进行遍历。
- 二维数组只需在遍历数组后，再次遍历数组的元素即可。
在 Web 项目开发中，还经常通过多维空数组添加元素的方式来创建多维数组。
var arr = []; // 创建一维空数组
for(var i = 0 ; i< 3; ++i){
arr[i] = []; // 将当前元素设置为数组
arr[i][0] = i; // 为二维数组元素赋值
}
注意：
- 若要为二维数组元素（
如arr[i][0]）赋值，首先要保证添加的元素（如arr[i]）已经被创建为数组，否则程序会报“Uncaught TypeError……”错误。 - 在创建多维数组时，虽然 JavaScript 没有限制数组的维数，但是在实际应用中，为了便于代码阅读、调试和维护，推荐使用三维及以下的数组保存数据。
4.2 练习作业
-
二维数组转置
-
二维数组的转置指的是将二维数组横向元素保存为纵向元素。
-
res[0][0] = arr[0][0]、res[0][1] = arr[1][0]、res[0][2] = arr[2][0]。 -
res[i][j] = arr[j][i]。 -
res数组长度=arr元素（如arr[0]）的长度。
-
res元素（如res[0]）的长度=arr数组的长度。
-
5 数组排序
5.1 冒泡排序
冒泡排序：是计算机科学领域中较简单的排序算法。
实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，较小或较大的元素前移。
-
比较相邻的元素。如果第一个比第二个大，就交换他们两个。
-
对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
-
针对所有的元素重复以上的步骤，除了最后一个。
-
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比比较
比较的轮数 = 数组长度 - 1;
每轮比较的次数 = 数组长度 - 当前的轮数
// 编写方法，实现冒泡
var arr = [98, 31, 5, 27, 2, 78];
//外层循环，控制趟数，每一次找到一个最大值
for (var i = 0; i < arr.length - 1; i++) {
// 内层循环,控制比较的次数，并且判断两个数的大小
for (var j = 0; j < arr.length - (i + 1); j++) {
// 白话解释：如果前面的数大，放到后面(当然是从小到大的冒泡排序)
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
5.2 插入排序
插入排序：也是冒泡排序的优化，是一种直观的简单排序算法。
实现原理：通过构建有序数组元素的存储，对于未排序的数组元素，在已排序的数组中从最后一个元素向第一个元素遍历，找到相应位置并插入。其中，待排序数组的第1个元素会被看作是一个有序的数组，从第2个至最后一个元素会被看作是一个无序数组。
- 从第一个元素开始，该元素可以认为已经被排序；
- 取出下一个元素，在已经排序的元素序列中从后向前扫描；
- 如果该元素（已排序）大于新元素，将该元素移到下一位置；
- 重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；
- 将新元素插入到该位置后；
- 重复步骤2~5。
let arr = [98, 7, 65, 54, 12, 6];
let len = arr.length;
let preIndex, current;
for (let i = 1; i < len; i++) {
preIndex = i - 1;
current = arr[i];
while (preIndex >= 0 && current < arr[preIndex]) {
arr[preIndex + 1] = arr[preIndex];
preIndex--;
}
arr[preIndex + 1] = current;
}
return arr;
例如：按从小到大排序。插入排序比较的次数与无序数组的长度相等。
6 常见数组方法
6.1 栈和队列方法
JavaScript 中，除了前面讲解的添加与删除数组元素的方式外，还可以利用 Array 对象提供的方法，模拟栈和队列的操作。
- 在数组的末尾或开头添加数组的新元素。
- 在数组的末尾或开头删除数组元素。
| 方法名称 | 功能描述 | 格式 |
|---|---|---|
| push() | 将一个或多个元素添加到数组的末尾，并返回数组的新长度。 | Array.push(参数1, 参数2…); |
| unshift() | 将一个或多个元素添加到数组的开头，并返回数组的新长度。 | Array.unshift(参数1, 参数2…); |
| pop() | 从数组的末尾移出并返回一个元素，若是空数组则返回undefined。 | Array.pop(); |
| shift() | 从数组的开头移出并返回一个元素，若是空数组则返回undefined。 | Array.shift(); |
- push() 和 unshift() 方法的返回值是新数组的长度。
- pop() 和 shift() 方法返回的是移出的数组元素。
6.2 检索方法
在开发中，若要检测给定的值是否是数组，或是查找指定的元素在数组中的位置。
| 方法名称 | 功能描述 | 格式 |
|---|---|---|
| includes() | 用于确定数组中是否含有某个元素，含有返回true，否则返回false。 | Array.includes(searchvalue, start); |
| Array.isArray() | 用于确定传递的值是否是一个 Array，是返回true，不是返回false。 | |
| indexOf() | 返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1 | Array.indexOf(searchvalue,start); |
| lastIndexOf() | 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1 | Array.indexOf(searchvalue,start); |
表中除了 Array.isArray() 方法外，其余方法默认都是从指定数组索引的位置开始检索，且检索方式与运算符“===”相同，即只有全等时才会返回比较成功的结果。
includes() 和 Array.isArray() 方法
var data = ['peach', 'pear', 26, '26', 'grape'];
// 从数组下标为3的位置开始检索数字26
console.log(data.includes(26, 3)); // 输出结果：false
// 从数组下标为data.length - 3 的位置查找数字26
console.log(data.includes(26, -3)); // 输出结果：true
// 判断变量data是否为数组
console.log(Array.isArray(data)); // 输出结果：true
- includes() 方法的第1个参数表示待查找的值。
- includes() 方法的第2个参数用于指定在数组中查找的下标起始位置。
- 设置为大于数组长度时，数组不会被检索，直接返回 false。
- 设置为小于 0 的数时，则检索的索引位置等于数组长度加上指定的负数，若结果仍是小于0的数，则检索整个数组。
indexOf() 方法
indexOf() 用于在数组中从指定下标位置，检索到的第一个给定值，存在则返回对应的元素下标，否则返回-1。
indexOf() 方法的第2个参数用于指定开始查找的下标：
- 当其值大于或等于数组长度时，直接返回-1。
- 当其值为负数时，则查找的下标位置等于数组长度加上指定的负数，若结果仍是小于0的数，则检索整个数组。
var fruits = ["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
lastIndexOf() 方法
Array 对象提供的 lastIndexOf() 方法，用于在数组中从指定下标位置检索到的最后一个给定值的下标。与indexOf() 检索方式不同的是，lastIndexOf() 方法默认逆向检索，即从数组的末尾向数组的开头检索。
lastIndexOf() 方法的第2个参数用于指定查找的下标，且由于其采用逆向的方式检索：
- 当其值大于或等于数组长度时，则整个数组都会被查找。
- 当其值为负数时，则索引位置等于数组长度加上给定的负数，若其值仍为负数，则直接返回-1。
var fruits = ["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple",4);
6.3 数组转字符串
开发中若需要将数组转换为字符串时，则可以利用 JavaScript 提供的方法实现。
| 方法名称 | 功能描述 | 格式 |
|---|---|---|
| join() | 将数组的所有元素连接到一个字符串中。 | Array.join(字符串); |
| toString() | 返回一个字符串，表示指定的数组及其元素。 | Array.toString(); |
var arr = ['a','b','c'];
console.log(arr.join()); // 输出结果：a,b,c
console.log(arr.join('-')); // 输出结果：a-b-c
console.log(arr.toString()); // 输出结果：a,b,c
join() 和 toString() 方法的相同点：
- 可将多维数组转为字符串，默认情况下使用逗号连接。
- 当数组元素为 undefined、null 或空数组时，对应的元素会被转换为空字符串。
join() 和 toString() 方法的不同点：
- join()方法可以指定连接数组元素的符号。
6.4 其他方法
除了前面讲解的几种常用方法外，JavaScript 还提供了很多其他常用的数组方法。
例如，合并数组、数组浅拷贝、颠倒数组元素的顺序等。
| 方法名称 | 功能描述 | 格式 |
|---|---|---|
| sort() | 对数组的元素进行排序，并返回数组。 | array.sort([回调函数]); |
| fill() | 用一个固定值填充数组中指定下标范围内的全部元素 | array.fill(value, start, end); |
| reverse() | 颠倒数组中元素的位置 | array.reverse(); |
| splice() | 对一个数组在指定下标范围内删除或添加元素 | array.splice(start, number[,元素1, 元素2…]); |
| slice() | 从一个数组的指定下标范围内拷贝数组元素到一个新数组中 | array.slice(start, end); |
| concat() | 返回一个合并两个或多个数组后的新数组 | array.concat(任意数据类型[，任意数据类型…]); |
- slice() 和 concat() 方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会原数组产生影响。
- splice() 方法的第1个参数的值等于或大于数组长度时，从数组末尾开始操作；当该值为负数时，则下标位置等于数组长度加上指定的负数，若其值仍为负数，则从数组的开头开始操作。
/* array.sort([回调函数]);
** 给数组中的元素排序，默认以 unicode 编码顺序排列，因此直接对数组中的数字排序会产生预料外的结果
** 可以传递一个回调函数作为sort的参数，回调函数中有两个形参分别表示数组中一前一后的两个元素，具体是哪两个元素需要根据循环确认
** 函数的返回值决定是否交换这个两个元素
** -- 当返回值大于0时交换
** -- 小于0时不交换
** -- 等于0时认为两个值相等不交换
** 会直接修改原数组的元素，与方法的返回值相同
*/
var arr = [1, 10, 20, 15, 25, 5];
arr.sort(function(a, b){
return a-b;
});
/* arr.reverse();
** 第一个参数是截取开始的索引，返回数组会包括开始索引的元素
** 第二个参数是截取结束的索引，返回数组不会包括结束索引的元素
** 参数可以是负值，如果为负就是从后往前计数
*/
var arr = [1,2,3,4];
var result = arr.reverse()
console.log(result); // 4,3,2,1
console.log(arr); // 4,3,2,1
/* array.slice(start, end);
** 第一个参数是截取开始的索引，返回数组会包括开始索引的元素
** 第二个参数是截取结束的索引，返回数组不会包括结束索引的元素
** 参数可以是负值，如果为负就是从后往前计数
*/
var arr = [0,1,2,3,4,5];
var arr1 = arr.slice(0,4);
console.log(arr1);
var arr2 = arr.slice(-3,-1);
console.log(arr2);
/* array.splice(start, number[,元素1, 元素2...]);
** 第一个参数为从哪个索引开始删除元素
** 第二个参数为删除几个元素
** 从第三个参数开始的参数都是是在第一个参数的索引之前添加这些元素
*/
var arr = [0,1,2,3,4,5];
arr.splice(0,1,7,8,9);
console.log(arr);
/* array.concat(任意数据类型[，任意数据类型...]);
** 可以将两个或者多个数组连接成一个数组，不会改变原数组
** 拷贝原数组，生成原数组
*/
var arr = [1,2,3,4];
var result = arr.concat([5,6,7,8],1,"a", false, null, undefined, {
});
console.log(result);
7 练习作业
-
采用冒泡排序，从大到小排序，数组是 70,35,67,49,20,59,98,100
-
求字符串数组中每一项的长度
-
输出任意一个二维数组中数据的个数
-
将字符串数组用|或其他符号分割
-
数组去重
-
有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中
-
猴子选大王
-
要求一群猴子排成一圈，按“1,2,……,n”依次编号。然后从第1只开始数，数到第m只，把它踢出圈，其后的猴子再从1开始数，数到第m只，再把它踢出去……，如此不停的进行下去，直到最后只剩下一只猴子为止，那只猴子就是我们要找的大王。
-
假设n（猴子总数）：8、m（踢出圈的）：3
-
第一圈：踢出的猴子编号为3、6，位置编号为3、6。
-
第二圈：踢出的猴子编号为1、5，位置编号为9、12。
-
第三圈：踢出的猴子编号为2、8，位置编号为15、18。
-
第四圈：无。
-
第五圈：踢出的猴子编号为4，位置编号为21。
-
得出猴王编号：7。
-
通过prompt()接收用户传递的猴子总数n和踢出的第m只猴子。
-
-
利用数组保存所有猴子的编号（1~n）。
-
设置一个变量i，记录每次参与游戏（报数）的猴子位置。
-
通过while循环，只要猴子数组内元素个数大于1，就继续循环。
-
在循环中判断当前猴子的位置i与m求余是否为0，若为零，删除该数组元素。
-
-
省份城市的三级联动
- 在Web开发中，地区联动是很常见的功能。
- 例如，购物、外卖等需要选择填写的送货地址。
- 其中，省份城市的三级联动则是最基础的功能。
- 接下来利用数组保存相关的省份、城市和地区的信息。
- 一维数组provinces保存省、自治区和直辖市。
- 二维数组cities保存对应省、自治区和直辖市下的所有城市，存储时要保证cities[index]中index值与对应provinces中元素的下标索引相同。
- 同理，利用三维数组保存每个城市下的区域的所有区域。
如此不停的进行下去，直到最后只剩下一只猴子为止，那只猴子就是我们要找的大王。
- 假设n（猴子总数）：8、m（踢出圈的）：3
- 第一圈：踢出的猴子编号为3、6，位置编号为3、6。
- 第二圈：踢出的猴子编号为1、5，位置编号为9、12。
- 第三圈：踢出的猴子编号为2、8，位置编号为15、18。
- 第四圈：无。
- 第五圈：踢出的猴子编号为4，位置编号为21。
- 得出猴王编号：7。
- 通过prompt()接收用户传递的猴子总数n和踢出的第m只猴子。
-
利用数组保存所有猴子的编号（1~n）。
-
设置一个变量i，记录每次参与游戏（报数）的猴子位置。
-
通过while循环，只要猴子数组内元素个数大于1，就继续循环。
-
在循环中判断当前猴子的位置i与m求余是否为0，若为零，删除该数组元素。
-
省份城市的三级联动
- 在Web开发中，地区联动是很常见的功能。
- 例如，购物、外卖等需要选择填写的送货地址。
- 其中，省份城市的三级联动则是最基础的功能。
- 接下来利用数组保存相关的省份、城市和地区的信息。
- 一维数组provinces保存省、自治区和直辖市。
- 二维数组cities保存对应省、自治区和直辖市下的所有城市，存储时要保证cities[index]中index值与对应provinces中元素的下标索引相同。
- 同理，利用三维数组保存每个城市下的区域的所有区域。