《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期
教师姓名：年月日课题名称第3章数组计划学时5学时内容分析数组是JavaScript中最常用的数据类型之一，它属于对象类
型中的内置对象。相比前面学习过的基本数据类型，一个数组类型的变量可以保存一批数据，并且数据可以是任意类型，例如字符串、数字、数组或
对象等。因此，利用数组可以很方便地对数据进行分类和批量处理。本章将围绕数组的使用进行详细讲解。教学目标及基本要求掌握数组的创建掌握
数组的访问与遍历掌握数组的属性与方法教学重点创建数组、数组的访问与遍历、元素的添加与修改、二维数组的创建与遍历、数组检索方法教学难
点数组的访问与遍历、二维数组的创建与遍历、数组栈方法、数组检索方法教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象
具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计
思路和步骤，对具体操作进行上机演练。教学过程第一学时（初识数组、创建数组、数组的基本操作）一、提出需求，导入学习任务（1）回顾一下
数据类型在程序开发中起到的作用。针对需要保存的数据的特点，选择合适的数据类型。基本数据类型只能保存一个数据，复合数据类型则适合对数
据进行分类或批量处理，如一个班级的学生信息，包括每个学生的名字、性别、年龄、爱好等。（2）明确学习方向。数组的分类。数组的定义。数
组的访问。数组的遍历。数组的删除。二、知识讲解理解数组的用处在学习数组之前，若要操作一批数据，如一个班级的所有学生，为了保存他们的
相关信息，则每一条信息都需要一个变量去保存。缺点：麻烦，容易出错，又不合理。数组就是一个可以存储一组或一系列数值的变量。通俗的讲，
使用一个数组类型的变量可以保存一批数据，优点方便操作管理。数组的组成结构数组是由一个或多个数组元素组成的。每个数组元素由“索引下标
”和“值”构成。“索引下标”用于识别元素，用数字表示，从0开始递增。“值”为元素的内容，可以是任意类型的数据。“索引下标”和“
值”之间存在一种对应关系，称之为映射。数组的分类根据数组的维数可划分为一维数组、二维数组、三维数组等多维数组。二维数组是指数组元素
的“值”是一个一维数组当一个数组的值又是一个数组时，就可以形成多维数组数组的索引教师展示数组的内存分配图，或通过绘制的方式一一讲解
。主要适用于利用位置（0、1、2……）来标识数组元素的情况。数组的索引下标也可以自己指定。多维数组一维数组就是指数组的“值”是非数
组类型的数据。二维数组是指数组元素的“值”是一个一维数组。多维数组指的是一个数组元素的值又是一个数组（一维、二维、三维…）。Arr
ay对象创建数组通过newArray()创建数组。数组元素可以是字符串、数值、混合型等。可以创建一个空数组。通过console.
log()查看创建的数组的下标。使用“[]”语法创建数组对比newArray()和“[]”两种方式的区别。获取数组长度访问A
rray对象的length属性获取数组元素个数。对于保存了undefined的元素，也会占用元素的个数。设置数组元素通过数组的le
ngth属性还可以设置数组元素个数。对于空数组，设置length属性后，会占用存储位置。如果设置length属性小于数组原有长度，
则多余元素舍弃。如果length属性大于数组原有长度，则不足的存储位置会被占用。访问数组元素通过“数组名[下标]”的方式来获取指定
索引下标数组元素的值。使用console.log()将访问的数组元素打印到控制台，查看效果。遍历数组使用for的方式，利用自增的变
量“i”访问数组中的每一个元素。使用for…in的方式实现数组的遍历。使用for…of的方式实现数组的遍历。对比for…in和fo
r…of的区别。添加与修改通过“数组名[下标]”的方式对数组中的元素进行添加或修改。当下标不连续时，将会被空存储位置暂用。删除元素
值通过delete关键字删除数组元素解构赋值演示ES6新增的数组解构赋值的方式。利用解构赋值方式实现交换两个变量。三、知识巩固（
1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第二学时（常见二维数组操作、数组排序）一、回
顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。在上节课中认识了数组的概
念，以及一维数组的基本操作，包括创建、访问、遍历、删除、length属性操作等。接下来本节继续学习如何完成多维数组的操作以及数组的
排序算法，多维数组的操作以二维数组为例进行讲解，排序算法以冒泡排序和插入排序为例进行讲解。（3）明确学习方向。二维数组的创建。二维
数组的遍历。动手实现“二维数组转置”的案例。理解并能实现冒泡排序。理解并能实现插入排序。二、知识讲解二维数组的创建回顾一维数组创建
的两种方式。引出二维数组的创建，只需将数组元素设置为数组即可。给出示例演示如何利用Array和[]如何创建二维数组。引申出多
维数组的创建方式，即将数组元素设置为数组。二维数组的遍历回顾一维数组的遍历方式，for、for…in或for…of（ES6提供）。
引出二维数组的遍历，只需在遍历数组后，再次遍历数组的元素即可。通过案例二维数组求和演示二维数组的创建和遍历指出在开发中为多维空数组
添加元素时，要保证添加的元素已被定义为数组，防止程序报错。为便于阅读、调试和维护，推荐使用三维及以下的数组保存数据。【案例】二维数
组转置分析什么是二维数组转置。通过画图的方式，演示二维数组的行、列矩阵效果。演示如何进行行列位置交换。先利用两层for循环遍历二维
数组中所有的元素。准备一个空数组，用于保存转置后的数组结果。在内层for循环开始前，为保存结果的数组添加元素。将原数组的行的下标作
为新数组的列的下标。将原数组的列的下标作为新数组的行的下标。输出数组，查看二维数组转置后的结果。冒泡排序冒泡排序是计算机科学领域中
较简单的排序算法。实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，较小或较大的元
素前移。展示或绘制冒泡法的过程图。总结冒泡排序的规律：冒泡排序比较的轮数是数组长度减1，每轮比较的对数等于数组的长度减当前的轮数。
演示冒泡排序法的代码实现。插入排序插入排序是一种直观的简单排序算法。实现原理：通过构建有序数组元素的存储，对于未排序数组元素的，在
已排序的数组中从最后一个元素向第一个元素遍历，找到相应位置并插入。其中，待排序数组的第1个元素会被看作是一个有序的数组，从第2个至
最后一个元素会被看作是一个无序数组。展示或绘制快速法的过程图。总结插入排序的规律：插入排序比较的次数与无序数组的长度相等，每次无序
数组元素与有序数组中的所有元素进行比较，比较后找到对应位置插入，最后即可得到一个有序的数组。演示插入排序法的代码实现。三、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（栈方法、检索方法、数组转字符串
、其他方法）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。在上节
课中认识了二维数组的基本操作，包括创建、访问与遍历等、以及通过算法的方式对数组中的元素进行排序。接下来本节继续学习如何利用Arra
y对象提供的方法快速完成添加元素、删除元素、检索元素、将数组转字符串等操作。（3）明确学习方向。数组元素栈方法。数组元素检索方法。
数组与字符串转换方法。其他常用的数组操作方法。二、知识讲解数组元素栈方法的使用解释什么是栈操作，什么情况下需要进行这种操作。演示如
何利用push()方法将将一个或多个元素添加到数组的末尾，并返回数组的新长度。演示如何利用unshift()方法将一个或多个元素添
加到数组的开头，并返回数组的新长度。演示如何利用pop()方法从数组的末尾移出并返回一个元素，若是空数组则返回undefined。
演示如何利用shift()方法从数组的开头移出并返回一个元素，若是空数组则返回undefined。对比以上四种方法的区别。push
()和unshift()方法的返回值是新数组的长度，而pop()和shift()方法返回的是移出的数组元素。数组元素检索方法解释什
么是数组检索方法，什么情况下会用到数组检索方法。演示includes()方法，确定数组中是否含有某个元素，含有返回true，否则返
回false。在使用include()方法时，第1个参数表示待查找的值，第2个参数用于指定在数组中查找的索引下标，当其值大于数组的
长度时，数组不会被检索，直接返回false；若将索引设置为小于0的数时，则检索的索引位置等于数组长度加上指定的负数，若结果仍是小于
0的数，则检索整个数组。演示Array.isArray()方法，确定传递的值是否是一个数组Array，是返回true，不是返回f
alse。演示indexOf()方法，获取在数组中可以找到给定值的第一个索引，不存在时返回-1。indexOf()方法的第2个参数
用于指定开始查找的位置，其值大于或等于数组的长度时，程序不会在数组中查找，直接返回-1；其值为负数时，查找的索引位置等于数组长度加
上指定的负数，若结果仍是小于0的数，则检索整个数组。演示lastIndexOf()方法，获取指定元素在数组中的最后一个的索引，如果
不存在返回-1。与indexOf()检索方式不同的是，lastIndexOf()方法默认逆向检索，即从数组的末尾向数组的开头检索
。lastIndexOf()方法的第2个参数用于指定查找的位置，由于其采用逆向的方式检索，当其值大于或等于数组的长度时，整个数组都
会被查找。其值为负数时，索引位置等于数组长度加上指定的负数，若其值仍为负数，则直接返回-1。数组转字符串的方法分析什么情况下需要数
组与字符串之间进行转换。演示join()方法，实现将数组的所有元素连接到一个字符串中。演示toString()方法，实现获取一个表
示指定的数组及其元素的字符串。join()方法可以指定连接数组元素的符号。默认情况下使用逗号连接，与toString()方法相同。
当数组元素为undefined、null或空数组时，对应的元素会被转换为空字符串。其他常用的数组操作方法演示sort()方法，对数
组的元素进行排序，返回数组。演示fill()方法，用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。演示reverse(
)方法，将数组中元素的位置颠倒。演示splice()方法，对一个数组在指定下标范围内删除或添加元素。splice()方法的第1个参
数用于指定添加或删除的下标位置；第2个参数用于从指定下标位置开始，删除数组元素的个数，将其设置为0，则表示该方法只添加元素。剩余的
参数表示要添加的数组元素，若省略则表示删除元素。splice()方法的第1个参数的值等于或大于数组长度时，从数组末尾开始操作；当该
值为负数时，则下标位置等于数组长度加上指定的负数，若其值仍为负数，则从数组的开头开始操作。演示slice()方法，在start~e
nd（不包括end）范围内的数组浅拷贝到一个新数组中。演示concat()方法，返回一个合并两个或多个数组后的新数组。slice(
)和concat()方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会原数组产生影响。三、知识巩固（1）
回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第四学时（数组案例：猴子选大王、省份城市的三级联
动）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。在上节课中学习
了数组的栈操作、检索操作、数组如何转字符串操作以及数组的排序、合并等实现的方法。接下来本节将利用前面学过的知识，完成一些动手案例，
将知识学以致用，加深对数组操作的理解。（3）明确学习方向。动手实现“猴子选大王”的案例。动手实现“省份城市的三级联动”的案例。二、
【案例】猴子选大王案例分析介绍“猴子选大王”的游戏规则。代码实现将可控的量分为“猴子的总数”和“每次踢出第几只猴子”。利用for循
环，根据猴子的总数来创建猴子数组。遍历猴子数组，利用shift()方法从前往后依次取出猴子。判断当前未达到踢出猴子的数量时，通过p
ush()方法将前面取出的猴子放入数组尾部。如果达到了数量，则跳过不进行处理，从而实现踢出猴子。在循环结束直到数组的长度等于1时，
最后剩下的这个猴子就是我们要的结果了。三、【动手实践】省份城市的三级联动案例分析演示一个做好的省份城市三级联动的效果。分析思考，如
何将数据部分抽取出来，利用数组进行保存。通过数组provinceArr保存省份。通过数组cityArr保存城市。通过数组countryArr保存区域。分析如何利用数组的索引，去查询与之相关联的数据。代码实现编写HTML页面，在页面中准备三个下拉菜单，分别表示省份、城市、区域。编写函数createOption()根据传递的元素对象和选项值完成下列菜单的创建。实现省份下拉菜单的自动创建。选择省份后，自动生成对应的城市下拉菜单选择城市后，自动生成对应区域下拉菜单修改省份时，更新区域下拉菜单四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第五学时（上机练习）教师发放本章相关资料和素材，学生进行上机练习，以此检查学生对相关知识点的掌握情况。上机练习完成后将报告通过平台提交给老师。教学后记第3章面向对象（上）1 |
|
