JavaScript程序设计教程 第5章 JavaScript数组.pdf

第5幸JavaScript数组5.1数组及数组元素5.2添加和删除元素5.3 二维及多维数组5.4 数组常用方法5.5 实战5.6 小结5.1 数组及数组元素。假设有这样一个需求，统计全校高一6个班的学生的数学成绩，存储每个班学生的成绩并计算出每个班的最高和最低成!绩。按照最原始的方法可以这样来做，将每个班每个学生的成 绩分别存入一个变量，然后一一比较得出每个班的最高成绩和最低成绩，代码如下所示。var classl_stul=95;var classl_stu2=45;o var classl_stu3=60;o var classl_stun=9 9;var classl_max=classl_stul;var classl_min=classl_stul;if(classl_max (classl_stu2)classl_min=classl_stu2;if(classl_max (classl_stu3)classl_min=classl_stu3;Qif(classl_max (classl_stun)classl_min=classl_stun;)var classl_max_grade=classl_max;var classl_min_grade=classl_min;o数组是一种数据类型，它包含或者存储了编码的值。每 个编码的值称作该数组的一个元素，每个元素的编码被称作 t 下标。由于JavaScript是一种无类型语言，所以一个数组的 元素可以具有任意的数据类型，同一数组的不同元素可以具 有不同的类型。数组的元素甚至可以包含其他数组，这样就）可以创建一个复杂的数据结构，即元素为数组的数组。1.数组创建9 JavaScript数组的创建在前面引用数据类型章节已经介1 绍过常用的两种方法，第1种使用array构造函数。O(1)使用无参构造函数，创建一个空数组。Ovar array1=new Array();(2)一个数字参数构造函数，指定数组长度(由于数组长 j 度可以动态调整，作用并不大)，创建指定长度的数组。var array2=new Array(5);(3)带有初始化数据的构造函数，创建数组并初始化参数 数据。&var array3=new Array(4,hello,new DateO);第2种使用字面量法创建数组。0(1)使用方括号，创建空数组，等同于调用无参构造函数O var array4=;(2)使用中括号，并传入初始化数据，等同于调用带有初 始化数据的构造函数。var array5=5;2.数组元素的读写.目以使甫虚算符来存取数组元素。在方括号左边应该是对 数组的引用。方括号之中是具有非负整数值的任意表达式。既可?以使用这一语法来读一个数组元素，也可以用它来写一个数组元、素。下面列出的都是合法的JavaScript数组读写语句。value 二 array9;o array0=3.14;1 i=2;arrayi=3;o arrayi+1=hello,;I arrayarrayi=array0;在某些语言中，数组第一个元素的下标为1。但是在JavaScript中（和C、C+与Java一样）数组第一个元?素的下标是0。o数组的下标必须是大于等于0并且小于232-1的整数。如果 T使用的数字太大，或者使用了负数、浮点数（或布尔值、对象 1及其他值），JavaScript会将它转换为一个字符串，用生成的 字符串作为对象属性的名字，而不是作为数组下标。因此，下。面的代码创建了一个名为“-1.23”的属性，而不是定义了一个 i新的数组元素：array-1.23二 true;QOQo 5.2添加和删除元素?在C和Java及其他编程语言中，数组是具有固定的元素个数的，必须在创建数组时就指定数组元素个数。而在JavaScript中则不同，它的数组可以具有任意个数的元素，可以在任何时。刻通过添加和删除元素来改变数组元素的个数。定义一个数组如下：var numbers=0,1,2,3,4,5,6,7,8,9;?现在需要给这个数组末尾添加一个元素10,可以这样来实1现。Oo(1)直接把值赋给数组中最后一个空位上的元素即可。数oooo组下标从0开始，所以数组最后一个元素下标为数组长度减1oo即numbers.lengthT,那么在数组末尾再添加一个元素下标 为numbers,lengthonumbersnumbers,length=10;(2)使用数组push方法，把元素添加到数组末尾。通过 push方法，能添。口任意个元素。numbers,push(10);numbers,push(11,12);如果希望在数组首位插入一个元素，而不是像上面那样 在数组末尾添加元素。这个添加元素的需求会比较复杂一点 O按照常规操作，需要腾出数组中第一个元素的位置，把所 有的元素都向后移动一位。Oo5.3二维及多维数组在本章开始的例子统计全校高一6个班学生数学成绩，我 们定义了6个数组，分别存储6个班级的学生数学成绩。这是JavaScript的一维数组模式，那么JavaScript有没var classl_array=new Array(95,89,60,.,100);var class2_array 二 new Array(45,89,9 0,.，88);var class3_array=new Array(9 1,85,62,.，79);var class4_array=new Array(65,80,9 0,.,100);var class5_array 二 new Array(9 0,80,69,.,100);var class6_array=new Array(9 9,89,67,.,100);A有类似C或Java语言的二维数组及多维数组呢？答案是否定的Oo JavaScript只支持一维数组的定义，不能通过直接定义实 现多维数组。o5 4 数组常用方法T 在JavaScript中,3组是可以修改的对象，这意味着创建的每个数组都有一些可用的方法。数组很强大，相比其他开发语言中的数组，JavaScript。中有许多很好用的方法。Oo表5.1 JavaScrip数组核心方法方法名描述concat连接两个或更多数组，并返回结果every对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回 truefilter对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组forEach对数组中的每一项运行给定函数，这个方法没有返回值join将所有的数组元素连接成一个字符串indexOf返回第一个与给定参数相等的数组元素的索引，没有找到则返回lastlndexOf返回在数组中搜索到的与给定参数相等的元素的索引里最大的值map对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组reverse颠倒数组中元素的顺序，原先第一个元素现在变成最后一个，同样原先的最 后一个元素变成了现在的第一个slice传入索引值，将数组里对应索引范围内的元素作为新数组返回some对数组中的每一项运行给定函数，如果任一项返回true,则返回truesort按照字母顺序对数组排序，支持传入指定排序方法的函数作为参数toString将数组作为字符串返回valueOf和toString类似，将数组作为字符串返回O 1.数组合并和截取 考虑以下场景：有多个数组，需要合并起来成为一个数组o按常规方法，我们需要迭代各个数组，然后把每个元素加入最 终的数组。若将这个合并后的数组从中间某个位置截取一部分出 来，同样需要迭代这个数组。幸运的是，JavaScript已经为我们 提供了更简洁的方法concat()和slice(),可以毫不费力地处理 数组合并和截取问题。var colors二red,green,blue”;var color1=white,purple;o var color2=colors.concat(colorl);I var color3=colors.concat();var color4=colors.concat(yellow”,black,brown);alert(color2);alert(color3);alert(color4);oconcat()方法可以基于当前数组中的所有项创建一个新 数组。在没有给concatO方法传递参数的情况下，它只是复 制当前数组并返回副本。t 如果传递给concat()方法的是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中，如果传递?的值不是数组，这些值就会被简单地添加到结果数组的末尾 OQOor 2.数组迭代前面已经介绍过数组的迭代用for循环来处理。其实，JavaScript内置了许多数组可用的迭代方法，如 every、some、forEach以及filter等。我们先来定义一个函数，判断数组中的元素是否可以被2整除，返回true或false。然 6 后逐一使用这些内置的迭代函数。var isEven=function(x)9/如果是2的倍数，就返回true console,log(x);return(x%2=0)?true:false;/也可以写成return(x%2=0)9)var numbers=1,2,3,4,5,6,7,8,9,10,11,12,13,14,15;o?(1)every方法。every方法会迭代数组中的每个元素，直到返回false。numbers,every(isEven);在数组numbers中，第1个数组元素是1,它不是2的倍数,因此isEven函数返回false,every也随即执行结束。(2)some方法。some方法和every的行为类似，不同的是some方法会迭代I数组的每个元素，直到函数返回true。numbers,some(isEven);numbers数组中第一个偶数是2(第2个元素)。第一个被O迭代的元素是1,isEven令返回false。第2个被迭代的元素是2，i sEven返回true，some迭代结束。o(3)forEach方法。every和some都只迭代了数组部分元素就停止了。如果要迭代整个数组，可以使用forEach方法。它和for循环的结果相同。numbers.forEach(function(x)console.log(x%2=0)；(4)map方法。:map方法使用方法如下。var myMap=numbers.map(isEven);?数组myMap里的值是：false,true,false,true,false,6 true,false,true,false,true,false,true,false,true,false o它保存了传入map方法的isEven函数的运行结果。这样很 一容易知道一个元素是否是偶数。o(5)filter方法。它返回的新数组由使函数返回true的元素组成。var evenN umbers=numbers,filter(isEven);evenN umbers数组中元素全是偶数：2,4,6,8,10,12,14。(6)reduce方法。reduce方法接收一个函数作为参数，这个函数有4个参数：previousValue curr ent Value index 和array。这个函数会返 回一个将被叠加到累加器的值，reduce方法停止执行后会返回这 个累加器。OQ 3.数组搜索和排序JavaScript数组排序方法有两种reverse()和sort()。9 reverse 6方法会反转数组场的顺序，如下：A var values=1,2,3,4,5;values,reverse();o alert(values);/5,4,3,2,1这里数组的初始值及顺序是1、2、3、4、5o而调用数组 的reverse。方法后,其值的顺序变成了5、4、3、2、1。sort。方法按升序排列数组，即最小的值位于最前面，最 大的值排在最后面。为了实现排序，sort。方法会调用每个数 组项的toString。转型方法，然后比较得到的字符串，以确定 如何排序。即使数组中的每一项都是数组，sort。方法比较的 9也是字符串。o 5 5 实战【藁例5-；】一一计算产品销售额I 1.案例描述随机生成某产品一年中每天的销售额，并计算某一个月日 平均销售额以及某一周日平均销售额。:2.实现思路6(1)假设该产品日销售额区间为(0,10000),首先运用Math对象的random。方法随机生成区间内的随机数，代码片段如下Oo&var sales=parselnt(Math,random()*10000;o(2)创建三维数组month用于存放每个月每一周每一天的日销 售额数据。如monthi表示第i+1个月的销售额数据；monthi j表示第i+1个月中第j+1周的销售额数据；monthi j k表 示第i+1个月第j+1周第k+1天的销售额数据；并用随机生成的销 T售额填充这个三维数组，代码片段如下。2 var init=function(month)var i=0,j=0,k=0;o for(i=0;i month;i+)this,month i=;for(k=0;k 4;k+)this,month i k =口；q for(j=0：j 7;j+)this,month ikEj=parselnt(Math,random()*10000);Q）；(3)创建函数getAverageSomeMonth用来计算某个月的日平 均销售额，传入参数为整数月份。(4)创建函数getAverageSomeWeek用来计算某一周的日平均 销售额，传入参数为整数月份和整数周。(5)最后创建对象数组并调用函数传入参数即可。3.实现代码运行结果如图5.5所示。Developer Tools-file:/G:/ziliao/JavaScript%E7%A8%8B%E5%BA.OXQ(5U Elements Console Sources Network Performance Memory 0 top Filter Info *12月的日平均消售额是:5763.357142857143 本5-3.html:3212月第4周的日平均稍售额是:6249.571428571428 月魅5-3 :40Q图5.5案例51运行结果o 5.6小结本章介绍了JavaScript中最常用的数据结构：数组。学习 了如何声明和初始化数组，给数组赋值，以及添加和移除数组 A 元素，二维数组及多维数组的使用及数组常用的一些方法。这 对以后JavaScript编程以及算法运用有很大帮助。