第3章 数组《JavaScript前端开发案例教程（第2版）》学习目标/Target学习目标/Target章节概述/ Summary数组（A
rray）是一种复杂数据类型，用来将一组数据集合在一起，通过一个变量就可以访问一组数据，并且数据可以是任意类型的数据，例如字符串、
数字、数组或对象等。因此，利用数组可以很方便地对数据进行分类和批量处理。本章将对数组进行详细讲解。目录/Contents目录/Co
ntents初识数组3.1 先定一个小目标！熟悉数组的概念，能够说出数组的组成3.1 初识数组3.1 初识数组数组是存储一系列
值的集合，它是由一个或多个元素组成的，各元素之间使用逗号“,”分隔。数组中的每个元素由“索引”和“值”构成。 索引：也可称为“下标
”，用于识别元素，以数字表示，默认情况下从0开始依次递增。值：元素的内容，可以是任意类型的数据。3.1 初识数组数组中索引和值的
关系如下。创建数组3.2 先定一个小目标！掌握数组的创建，能够使用两种方式实现数组的创建3.2 创建数组3.2 创建数组创建数
组的两种方式通过new Array()方式创建数组使用数组字面量创建数组3.2 创建数组使用new Array()方式创建数组，
示例代码如下。var arr = new Array(); // 空数组var arr = new Array(3); /
/ 含3有个空元素var arr = new Array(''语文'', ''数学'', ''英语''); // 含有3个元素第1行代码中的n
ew Aray()用于创建一个空数组。第2行代码用于创建含有3个空元素的数组。第3行代码用于创建含有3个元素的数组，元素的类型为字
符串型，元素的索引依次为0、1、2。1233.2 创建数组在数组中可以存放任意类型的元素，示例代码如下。var arr1 = n
ew Array(123, ''abc'', true, null, undefined); 数字型字符串型布尔型空型未定义型3.2
创建数组在数组中还可以保存数组，示例代码如下。var arr2 = new Array(1, new Array(21, 22)
, 3);通过arr2[1][0]访问通过arr2[1][1]访问3.2 创建数组var empty = []; // [
]相当于new Array()var arr = [''语文'', ''数学'', ''英语'', ''历史'']; // 含有4个元素 使用数
组字面量创建数组只需要将new Array()替换为“[]”，示例代码如下。new Array()与[]的区别使用“[]” 可以创
建含有空存储位置的数组。使用new Array()不可以创建含有空存储位置的数组。3.2 创建数组var weather = [
''wind'', ''fine'',]; // 相当于：new Array(''wind'', ''fine'',)var mood =
[''sad'', , , ,''happy'']; // 控制台输出mood：(5) ["sad", empty × 3, "happ
y"]创建数组时加逗号的示例代码如下。数组weather最后一个元素fine后面的逗号可以存在也可以省略。数组mood中含有3个空
存储位置。数组的基本操作3.33.3 数组的基本操作在开发中，经常需要对数组进行操作，接下来我们将学习数组的基本操作。获取和修改
数组长度访问数组遍历数组添加数组元素修改数组元素删除数组元素 先定一个小目标！掌握获取和修改数组长度，能够实现数组长度的获取和修改
3.3.1 获取和修改数组长度3.3.1 获取和修改数组长度var arr1 = [78, 88, 98];var arr2
= [''a'', , , , ''b'', ''c''];console.log(arr1.length); // 输出结果为：3cons
ole.log(arr2.length); // 输出结果为：6使用“数组名.length”可以获取数组长度，数组长度为数组元素
最大索引加1，示例代码如下。数组arr1中包含3个数组元素，因此使用arr1.length获取数组的长度为3。数组arr2中没有值
的数组元素会占用空存储位置，因此数组的索引依然会递增，使用arr2.length获取数组的长度为6。3.3.1 获取和修改数组长
度修改数组长度的情况修改的数组长度大于数组原长度修改的数组长度等于数组原长度修改的数组长度小于数组原长度使用“数组名.length
= 数字”的方法可以修改数组的长度。3.3.1 获取和修改数组长度修改数组长度后，若length的值大于数组中原来的元素个数，
则没有值的数组元素会占用空存储位置，示例代码如下。var arr1 = [];arr1.length = 5; // 修改数组长度
为5console.log(arr1); // 输出结果：(5) [empty × 5]var arr2 = [1, 2, 3];
arr2.length = 4; // 修改数组长度为4console.log(arr2); // 输出结果：(4) [1, 2,
3, empty]3.3.1 获取和修改数组长度修改数组长度后，若length的值等于数组中原来的元素个数，则数组长度不变，示
例代码如下。上述示例中，arr3数组创建时长度为2，修改长度为2后，等于数组原长度，因此数组的长度不变。var arr3 = [''
a'', ''b''];arr3.length = 2; // 修改数组长度为2console.log(arr3); // 输出结果：
(2) ["a", "b"]3.3.1 获取和修改数组长度修改数组长度后，若length的值小于数组中原来的元素个数，多余的数组
元素将会被舍弃，示例代码如下。上述示例中，arr4数组创建时长度为4，修改长度为3后，小于数组原长度，因此arr4数组的长度为3，
最后一个元素“Pear” 被舍弃。var arr4 = [''Apple'', ''Orange'', ''Melon'', ''Pear''];
arr4.length = 3; // 修改数组长度为3console.log(arr4); // 输出结果：(3) ["Appl
e", "Orange", "Melon"] 先定一个小目标！掌握数组的访问，能够访问数组中的元素3.3.2 访问数组3.3.2
访问数组如何访问数组元素数组创建完成后，若要查看数组中某个具体的元素，可以通过“数组名[索引]”的方式获取指定元素的值。3.3
.2 访问数组若要访问整个数组，可以使用“console.log(数组名)”。访问数组的示例代码如下。 先定一个小目标！掌握数组的遍历，能够利用for语句实现数组的遍历3.3.3
遍历数组3.3.3 遍历数组遍历数组是指将数组中的元素全部访问一遍。使用for循环可以实现数组的遍历，示例代码如下。上述代码
中，变量arr表示待遍历的数组，for语句用于遍历数组，变量i表示数组索引，通过arr[i]访问数组中的每一个元素。var arr
= [80, 99, 60, 57];for (var i = 0; i < arr.length; i++) { conso
le.log(arr[i]);} 先定一个小目标！掌握数组元素的添加，能够实现为数组添加元素3.3.4 添加数组元素3.3.4
添加数组元素添加数组元素，需要使用“数组名[索引] = 值”的方式添加，示例代码如下。上述示例代码中，在oldClass数组中新
添加了两名同学的信息，分别为“小亮”和“小东”，两名同学的索引分别为2和3。var oldClass = [''小明'', ''小强'']
;oldClass[2] = ''小亮'';oldClass[3] = ''小东'';console.log(oldClass); //
输出结果：(4) ["小明", "小强", "小亮", "小东"]3.3.4 添加数组元素添加数组元素的注意事项添加数组元素时
允许索引不按照数字顺序连续添加，其中未设置具体值的元素，会以空存储位置的形式存在。即使添加元素的索引的顺序不同，在输出数组时，仍然
会按照数组索引从小到大的顺序显示。3.3.4 添加数组元素下面演示不按照数字顺序添加数组元素的情况。第1行代码用于创建空数组ne
wClass。第2行代码用于为数组newClass添加数组元素，其索引为0，值为Ani。 第3行代码用于为数组newClass添加
数组元素，其索引为4，值为Calen。第4行代码用于为数组newClass添加数组元素，其索引为3，值为Mastin。var ne
wClass = [];newClass[0] = ''Ani'';newClass[4] = ''Calen'';newClass[3]
= ''Mastin'';console.log(newClass); // 输出结果：(5) ["Ani", empty × 2
, "Mastin", "Calen"]12345 先定一个小目标！掌握数组元素的修改，能够根据需要修改数组元素3.3.5 修改
数组元素3.3.5 修改数组元素修改数组元素与添加数组元素的方式相似，不同的是修改数组元素是为已含有值的元素重新赋值，示例代码如
下。上述示例代码中，创建arr数组时第3个和第4个元素的值分别为c和d，修改后的值分别为123和456。var arr = [''a
'', ''b'', ''c'', ''d''];arr[2] = 123;arr[3] = 456;console.log(arr); //
输出结果：(4) ["a", "b", 123, 456] 先定一个小目标！掌握数组元素的删除，能够根据需要删除数组元素3.3.6
删除数组元素3.3.6 删除数组元素在创建数组后，有时也需要根据实际情况，删除数组中的某个元素值。利用delete关键字可以
删除数组的元素值，示例代码如下。从上述代码可知，delete关键字只能删除数组中指定索引的元素值，删除后该元素依然会占用一个空存储
位置。var oldClass = [''小明'', ''小强'', ''小亮'', ''小东''];console.log(oldClass);
// 输出结果：(4) ["小明", "小强", "小亮", "小东"]delete oldClass[1]; // 删除数组中
第2个元素console.log(oldClass); // 输出结果：(4) ["小明", empty, "小亮", "小东"]
先定一个小目标！掌握查找班级最高分和最低分案例的开发，能够实现数组的查找3.3.7 【案例】查找班级最高分和最低分3.3.7
【案例】查找班级最高分和最低分案例需求在班级管理中，老师为了帮助到每一位学生，经常会在考试之后邀请分数较高的同学为大家分享学习经
验和学习方法，并且会为分数较低的学生分析原因。本案例将实现把所有学生的考试成绩保存到数组中，通过查找数组中最大值和最小值找到分数最
高和分数最低的学生。二维数组3.4 先定一个小目标！熟悉二维数组的概念，能够描述二维数组的结构3.4.1 什么是二维数组数组根据
维数可以划分为一维数组、二维数组、三维数组等。一维数组指的是数组元素的值是非数组类型的数据，二维数组指的是数组元素的值是一个一维数
组。3.4.1 什么是二维数组3.4.1 什么是二维数组通过二维数组保存学生成绩。 使用arr[0][0]可以访问80 使用a
rr[0][1]可以访问100 使用arr[0][2]可以访问75 先定一个小目标！掌握创建与遍历二维数组的方法，能够实现二维数组
的创建和遍历3.4.2 创建与遍历二维数组3.4.2 创建与遍历二维数组创建二维数组与创建一维数组类似，只需将数组元素设置为数
组即可。使用new Array()和“[]”创建二维数组的示例代码如下。// 使用new Array()创建二维数组var inf
o = new Array(new Array(''Tom'', 13, 155),new Array(''Lucy'', 11, 152
));// 使用“[]”创建二维数组var num = [[1, 3],[2, 4]];3.4.2 创建与遍历二维数组遍历二维数
组与遍历一维数组相似，只需要使用for循环遍历数组后，再次遍历数组元素即可，示例代码如下。var arr = [[12, 59,
66], [100, 888]]; // 创建二维数组for (var i = 0; i < arr.length; i++) {
// 遍历数组arr for (var j = 0; j < arr[i].length; j++) { // 遍历数组arr
的元素 console.log(arr[i][j]); // 输出二维数组中每个元素 }} 先定一个小目标！掌握二维数组
转置案例的开发，能够实现二维数组的转置3.4.3 【案例】二维数组转置二维数组转置指的是将二维数组横向元素转换为纵向元素。3.4.
3 【案例】二维数组转置横向元素纵向元素转置后的数组res中的每一行元素是转置前数组arr的每一列元素，转置的规律如下。3.4.3
【案例】二维数组转置res[0][0] = arr[0][0]res[0][1] = arr[1][0]res[0][2] =
arr[2][0]res[0][3] = arr[3][0]二维数组转置的公式为res[i][j] = arr[j][i]，且re
s数组的长度等于arr元素（如arr[0]）的长度，res元素（如res[0]）的长度等于arr数组的长度。数组排序3.53.5
数组排序数组排序是指将数组中的元素排列成一个有序的序列，那么排序有什么意义呢？试想开发一个销售管理系统，在页面中输出产品列表时，
如果没有按照销量顺序显示，很难看出哪些产品更畅销，此时就需要一种算法，能够比较销量数组中每个元素值的大小。常见的算法有冒泡排序和插
入排序。 先定一个小目标！掌握冒泡排序，能够利用冒泡排序将数组元素按照指定顺序排列3.5.1 冒泡排序3.5.1 冒泡排序冒泡
排序是通过不断比较数组中相邻两个元素的值，将较小或较大的元素前移实现将数组从小到大排序或从大到小排序。之所以称为冒泡排序，是因为排
序的过程类似于水杯中气泡上浮的过程。利用冒泡排序将一组数字“98、31、5、27、2、78” 按照从小到大的顺序排列。3.5.1
冒泡排序3.5.1 冒泡排序分析冒泡排序过程冒泡排序比较的轮数是数组长度减1。每轮比较的次数等于数组的长度减当前的轮数。 先定
一个小目标！掌握插入排序，能够利用插入排序将数组元素按照指定顺序排列3.5.2 插入排序3.5.2 插入排序插入排序是一种直观
的简单排序算法。插入排序的思想是将数据插入到一个有序的序列中的合适位置上，从而实现将数据从小到大或从大到小排列。利用插入排序将一组
数字“98，7，65，54，12，6” 按照从小到大的顺序排列。3.5.2 插入排序3.5.2 插入排序分析插入排序过程插入排
序比较的轮数与无序数组的长度相等，每次插入时，将无序数组元素与有序数组中的所有元素进行比较，比较后找到对应位置插入，最后即可得到一个有序数组。 先定一个小目标！掌握动手实践：统计每位学生的总成绩的实现方法，能够利用二维数组的遍历实现统计每名学生的总成绩动手实践：统计每位学生的总成绩动手实践：统计每位学生的总成绩案例实现思路：首先利用二维数组保存每位学生的各科成绩，然后通过对二维数组的遍历，将每位学生的各科成绩相加，从而计算出总成绩。案例需求：期末考试结束后，老师经常需要统计每位学生的总成绩，接下来将利用代码实现统计每位学生的总成绩。 本章小结本章首先讲解了初识数组，然后讲解了创建数组，其中主要包括创建数组的两种方式，最后讲解了数组的基本操作、二维数组的操作和数组排序。学习完本章后希望读者能够掌握创建数组的两种方式，并且能够获取和修改数组长度，访问、遍历、添加、修改和删除数组元素，能够实现二维数组的创建和遍历以及能够完成冒泡排序和插入排序。本章小结 |
|
