《移动应用设计与开发-前端开发》课件-3 数组

JavaScript脚本语言--数组目录3.2数组元素的访问与遍历3.1数组概念及创建3.4数组的检索3.3数组的常用属性及数组元素的添加删除3.6数组的排序3.5数组的其他操作3.7案例-大小图JavaScript脚本语言--数组概念及创建数组概念及创建思考：变量只能存储一个值。如果要存储班级中所有学生的姓名，

该如何存储呢？答案：可以使用数组(Array)。数组可以把一组组相关的数据一起存储，

并提供方便的访问（获取）方式。概念：数组是存储一系列值的变量集合。可以理解为一个容器装了一堆元素。数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。vararr=[‘张丰’

,

‘李永’,‘王丽’,‘赵那’,‘刘永’,‘陈明’]1、数组的概念数组概念及创建数组元素：每个数组元素由“索引下标”和“值”构成。vararr=[78,

‘hello’,null,true,0.65]索引下标：简称下标，以数字表示，默认从0开始依次递增，用于识别元素。值：元素的内容，可以是任意类型的数据，如数值型、字符型、数组、对象等。vararr=[78,

‘hello’,null,true,0.65]01234数组概念及创建2、数组的创建

使用Array对象创建数组

使用“[]”创建数组数组概念及创建使用Array对象创建数组实例化Array对象的方式创建数组，是通过new关键字实现的。//空数组vararr1=newArray();或vararr2=newArray;//元素值类型为字符串vararea=newArray('Beijing','Shanghai','Shenzhen');//元素值类型为数值型varscore=newArray(56,68,98,44);//元素值类型为混合型varmix=newArray(123,'abc',null,true,undefined);数组概念及创建使用“[]”创建数组varempty=[]; //相当于：newArrayvarweather=['wind','fine'];//相当于：newArray('wind','fine',)varmood=['sad',,,,'happy'];//控制台输出mood：(5)["sad",empty×3,"happy"]在创建数组时，最后一个元素后的逗号可以存在，也可以省略。直接法“[]”与Array()对象在创建数组时的区别在于，前者可以创建含有空存储位置的数组，而后者不可以。数组概念及创建谢谢JavaScript脚本语言--数组元素的访问与遍历索引（下标）：用来访问数组元素的序号（数组下标从0开始）。1、数组元素的访问数组元素的访问与遍历vararr=[78,

‘hello’,null,true,0.65]01234数组可以通过索引来访问、设置、修改对应的数组元素数组元素访问方式：“数组名[下标]”。数组元素的访问与遍历<script

>

vararr=

[

'hello',

'JavaScript',

22.48,

true]

;console.log(arr[0])

;//获取数组中第一个元素

console.log(arr[2])

;//获取数组中第三个元素

console.log

(arr)

;//打印整个数组

</script>

数组元素访问方式：“数组名[下标]”。2、数组元素的遍历数组元素的访问与遍历从数组中取出每一个元素时，代码是重复的，不一样的就是索引值在递增通过循环来实现.分析如何将数组中的每个元素在控制台中打印出来

如果数组中有100个元素，怎么办？问题vararr=[78,88,98];console.log(arr[0]);console.log(arr[1]);console.log(arr[2]);2、数组元素的遍历数组元素的访问与遍历概念：所谓遍历数组就是依次访问数组中所有元素的操作。方法：利用下标遍历数组可以使用：

for语句for…in语句for…of语句2、数组元素的遍历—for语句数组元素的访问与遍历例：在控制台输出数组中的每一个元素<script>vararr=['hello','JavaScript',22.48,true,78];for(vari=0;i<=arr.length;i++){console.log('arr['+i+']='+arr[i]);}</script>2、数组元素的遍历—for…in语句数组元素的访问与遍历

for(variableinobject){...

}语法结构variable指的是数组索引下标。object表示数组的变量名称。除此之外，若object是一个对象，for…in还可以用于对象的遍历。说明2、数组元素的遍历—for…in语句数组元素的访问与遍历例：在控制台输出数组中的每一个元素<script>vararr=['hello','JavaScript',22.48,true,78];for(variinarr){console.log('arr['+i+']='+arr[i]);}</script>2、数组元素的遍历—for…of语句数组元素的访问与遍历在ES6中，新增了一种for…of语法，可以更方便地对数组进行遍历。vararr=[1,2,3];for(varvalueofarr){console.log(value);}变量value：表示每次遍历时对应的数组元素的值。变量arr：表示待遍历的数组。结果：在控制台中依次输出1、2和3。说明谢谢JavaScript脚本语言--数组的常用属性及数组元素的添加删除在数组元素较多的情况下，计算数组元素的个数不太方便，此时利用“数组名.length”来快速地获取数组长度。1、数组常用属性vararr=[2,6,1,77,52,25,7,99];console.log(‘数组的长度为：’+arr.length);//数组的长度为8数组的常用属性数组的length属性不仅可以用于获取数组长度，还可以修改数组长度。在利用length属性指定数组长度时，有以下是三种情况：1、数组常用属性设置的length>原数组长度设置的length=原数组长度设置的length<原数组长度数组的常用属性1、数组常用属性数组的常用属性若length的值大于数组中原来的元素个数，则没有值的数组元素会占用空存储位置。vararr1=[];arr1.length=5;console.log(arr1);//输出结果：(5)[empty×5]vararr2=[1,2,3];arr2.length=4;console.log(arr2);//输出结果：(4)[1,2,3,empty]1、数组常用属性数组的常用属性若length的值等于数组中原来的元素个数，数组长度不变。vararr3=['a','b'];arr3.length=2;console.log(arr3);//输出结果：(2)["a","b"]1、数组常用属性数组的常用属性若length的值小于数组中原来的元素个数，多余的数组元素将会被舍弃。vararr4=['hehe','xixi','gugu','jiujiu'];arr4.length=3;console.log(arr4);//输出结果：(3)["hehe","xixi","gugu"]数组元素添加与删除方法名功能描述返回值push(参数1…)数组末尾添加一个或多个元素，会修改原数组 返回数组的新长度unshift(参数1…)数组开头添加一个或多个元素，会修改原数组返回数组的新长度pop()删除数组的最后一个元素，若是空数组则返回undefined，会修改原数组返回删除的元素的值shift()删除数组的第一个元素，若是空数组则返回undefined，会修改原数组返回第一个元素的值splice()对一个数组在指定下标范围内删除或添加元素----2、添加或删除数组元素数组元素添加与删除splice方法splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。删除用于删除元素，两个参数，第一个参数（要删除第一项的位置），第二个参数（要删除的项数）插入向数组指定位置插入任意项元素。三个参数，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）替换向数组指定位置插入任意项元素，同时删除任意数量的项，三个参数。第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）谢谢JavaScript脚本语言--数组的检索1、数组的检索数组的检索在开发中，若要检测给定的值是否是数组，或是查找指定的元素在数组中的位置。方法名称功能描述includes()用于确定数组中是否含有某个元素，含有返回true，否则返回false。Array.isArray()用于确定传递的值是否是一个Array，是返回true，不是返回false。indexOf()返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1lastIndexOf()返回指定元素在数组中的最后一个的索引，如果不存在则返回-1数组的检索1.1检索方法——includes()方法includes()方法的第1个参数表示待查找的值。includes()方法的第2个参数用于指定在数组中查找的下标。设置为大于数组长度时，数组不会被检索，直接返回false。设置为小于0的数时，则检索的索引位置等于数组长度加上指定的负数，若结果仍是小于0的数，则检索整个数组。数组的检索1.2检索方法——Array.isArray()方法isArray()方法用于判断一个对象是否为数组。如果对象是数组返回true，否则返回false。数组的检索1.3检索方法——indexOf()方法indexOf()用于在数组中从指定下标位置，检索到的第一个给定值，存在则返回对应的元素下标，否则返回-1。注意indexOf()方法的第2个参数用于指定开始查找的下标：当其值大于或等于数组长度时，直接返回-1。当其值为负数时，则查找的下标位置等于数组长度加上指定的负数，若结果仍是小于0的数，则检索整个数组。数组的检索1.4检索方法——lastIndexOf()方法Array对象提供的IndexOf()方法，用于在数组中从指定下标位置检索到的最后一个给定值的下标。与indexOf()检索方式不同的是，lastIndexOf()方法默认逆向检索，即从数组的末尾向数组的开头检索。注意lastIndexOf()方法的第2个参数用于指定查找的下标，且由于其采用逆向的方式检索：当其值大于或等于数组长度时，则整个数组都会被查找。当其值为负数时，则索引位置等于数组长度加上给定的负数，若其值仍为负数，则直接返回-1。谢谢JavaScript脚本语言--数组的其他操作1.数组转换为字符串

在开发中，可以利用数组对象的join()和toString()方法，将数组转换为字符串。方法如下：方法功能描述toString()把数组转换为字符串，逗号分隔每一项join('分隔符')将数组的所有元素连接到一个字符串中数组的其他操作1.数组转换为字符串数组的其他操作注意join()和toString()方法的相同点：可将多维数组转为字符串，默认情况下使用逗号连接。当数组元素为undefined、null或空数组时，对应的元素会被转换为空字符串join()和toString()方法的不同点：join()方法可以指定连接数组元素的符号。2、其他方法数组的其他操作除了前面讲解的几种常用方法外，JavaScript还提供了很多其他常用的数组方法。例如，合并数组、数组浅拷贝、颠倒数组元素的顺序等。方法名称功能描述sort()对数组的元素进行排序，并返回数组。fill()用一个固定值填充数组中指定下标范围内的全部元素reverse()颠倒数组中元素的位置slice()从一个数组的指定下标范围内拷贝数组元素到一个新数组中concat()返回一个合并两个或多个数组后的新数组谢谢JavaScript脚本语言--数组的排序数组的排序冒泡排序冒泡排序：是计算机科学领域中较简单的排序算法。实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，较小或较大的元素前移。数组的排序冒泡排序冒泡排序比较的轮数是数组长度减1，每轮比较的对数等于数组的长度减当前的轮数。数组的排序数组的排序2.插入排序插入排序：也是冒泡排序的优化，是一种直观的简单排序算法。实现原理：通过构建有序数组元素的存储，对于未排序的数组元素，在已排序的数组中从最后一个元素向第一个元素遍历，找到相应位置并插入。其中，待排序数组的第1个元素会被看作是一个有序的数组，从第2个至最后一个元素会