JavaScript编程技术实验报告3

一、实验目的

熟悉JavaScript中数组的概念

掌握数组的创建，赋值，遍历等数组操作

掌握数组中常用的属性和方法

二、预习内容及要求（要求写出预习内容）

数组的创建：

使用Array对象创建数组，使用[]创建数组；

数组的基本操作：

数组长度属性length；

数组的遍历：for()循环，for(...in...)，for(...of...)；

数组元素的增加，修改，删除；

多维数组的创建与遍历：

双重或多重循环；

数组排序

常见的数组方法：push(),unshift(),pop(),shift()......

（预习内容源码）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"/><title>使用Array对象创建数组，使用[]创建数组</title></head><body><script>//使用Array对象创建数组  var arr=new Array('Beijing','Shanghai','Shenzhen');//字符型var score=new Array(88,77,33);//数字型var mix=new Array("aaa",123,null,true,undefined);//混合型var arr1=new Array();//空型//使用[]创建数组；var arr3=["wind","apple","orange"];var arr4=[];var arr5=['A','B','C', , ,'D'];//数组长度属性length；document.write("arr3数组长度:"+arr3.length+"</br>");//数组的遍历：for()循环，for(...in...)，for(...of...)document.write("for()循环"+"</br>");for(var i=0;i<arr3.length;i++){document.write(arr3[i]+"&nbsp&nbsp&nbsp");}//数组的遍历for(...in...)document.write("</br>"+"for(...in...)循环"+"</br>");for(var i in arr){document.write(arr[i]+"&nbsp&nbsp&nbsp");}//数组的遍历for(...of...)document.write("</br>"+"for(...of...)循环"+"</br>");for(var i of  arr){document.write(i+"&nbsp&nbsp&nbsp");}//数组元素的增加；arr3[3]="草莓";arr3[4]="荔枝";document.write("</br>"+"数组元素的增加:"+"</br>");for(var i of arr3){document.write(i+"&nbsp&nbsp&nbsp");}//数组元素的修改；arr3[0]="草莓";arr3[2]="荔枝";document.write("</br>"+"数组元素的修改:"+"</br>");for(var i of arr3){document.write(i+"&nbsp&nbsp&nbsp");}//数组元素的删除；document.write("</br>"+"数组元素的删除:"+"</br>");delete arr3[0];for(var i of arr3){document.write(i+"&nbsp&nbsp&nbsp");}//多维数组的创建与遍历(双重或多重循环)document.write("</br>"+"多维数组的创建与遍历(双重循环):"+"</br>");var info = new Array(new Array("Tom",13,155),new Array("Lucy",11,152));for(var i=0;i<=info.length;i++){document.write(info[i]+"&nbsp&nbsp&nbsp");}document.write("</br>");var info1 = new Array(new Array("Tom",13,155),new Array("Lucy",11,152),new Array("Lili",15,160));for(var i=0;i<=info1.length;i++){document.write(info1[i]+"&nbsp&nbsp&nbsp");}//(常见的数组方法：push(),unshift(),pop(),shift())document.write("</br>"+"(常见的数组方法：push(),unshift(),pop(),shift()):"+"</br>");var len=arr3.push("桃子","西瓜");document.write("在末尾添加长度后变为："+len+"添加后数组为："+arr3+"</br>");var first1=arr3.unshift();document.write("在开头添加元素："+first1+"添加后数组为："+arr3+"</br>");var first=arr3.pop();document.write("在末尾移除元素："+first+"移除后数组为："+arr3+"</br>");var first=arr3.shift();document.write("在开头移除元素："+first+"移除后数组为："+arr3+"</br>");</script></body>

结果展示：

三、实验内容、操作过程及实验结果记录

1. 统计成绩最大值和最小值。

效果如图3-1所示。

计算结果展示

具体实现步骤如下：

定义一个数组arr，存放5门成绩。
定义总分变量sum=0。
定义最高分变量max=0。
定义最低分变量min=100。
for循环遍历数组arr。
输出结果。

（源代码）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>统计成绩最大值和最小值</title>
</head>
<script>var sorce=[83,75,65,59.5,92];document.write("5门成绩分别是："+sorce+"</br>");var sum =0.0;for(var i=0;i<sorce.length;i++){sum +=sorce[i];}var max=min=sorce[0];for(var i=0;i<sorce.length;i++){if(max<sorce[i]){max=sorce[i];}if(sorce[i]<min){min=sorce[i];}}document.write("总分是："+sum+"</br>");document.write("平均分："+(sum/sorce.length)+"</br>");document.write("最高分："+max+"</br>");document.write("最低分："+min+"</br>");
</script>
<body></body>
</html>

结果展示：

2. 返回数组中指定元素的下标。

效果如图3-2所示。

具体实现步骤如下：

定义一个数组arr，存放数组元素['a','b','d','d','c','d','d']。
检索数组，在页面中输出d元素出现的索引下标和出现次数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>返回数组中指定元素的下标</title>
</head>
<script>var res=[];var arr=['a','b','d','d','c','d','d'];var search="d";var count=0var  i =arr.lastIndexOf(search);while(i!=-1){res.push(i);i=(i>0?arr.lastIndexOf(search,i-1):-1);count++;}document.write(search+"出现的下标为："+res+"</br>");document.write(search+"一共出现了："+count+"次</br>");
</script>
<body></body>
</html>

结果展示：

3.将一组数据排序并输出。

效果如图3-3所示。

具体实现步骤如下：

定义数组arr，里边存放8个元素。
排序并输出。

具体实现步骤如下：

定义数组arr，里边存放8个元素。
排序并输出。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>从大到小排序</title><script>var temp=0;var arr=[70,35,98,67,100,20,59,49];for(var i=0;i<arr.length;i++){for(var j=0;j<arr.length-i;j++){if(arr[j]<arr[j+1]){temp=arr[j];arr[j]=arr[j+1];arr[j+1]=temp;}}}document.write(arr);</script>
</head>
<body></body>
</html>

结果展示:

4. 已知一个字符串数组，求字符串数组中每一个元素的长度，存储到一个新的数组中。

效果如图3-4所示。

元素个数

具体实现步骤如下：

定义一个数组array，存放字符串元素。
定义个新数组newArray，用来存放字符串长度。
for循环遍历array数组，并把每一项元素的长度赋值给newArray。
输出newArray新数组。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>求字符串数组中每一个元素的长度，存储到一个新的数组中</title><script>var arry=["Beijing","Shanghai","Shenzhen","Henan"];var newArry=[];for(var i=0;i<arry.length;i++){newArry.push(arry[i].length);}document.write(newArry);</script></head><body>    </body>
</html>

结果展示：

5. 定义一个数组，实现如下操作：将数组中的0项去掉，将不为0的值存入一个新的数组。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>将数组中的0项去掉，将不为0的值存入一个新的数组</title><script>var arr=['A', ,null,'B','C'];var newArr=[];for(var i=0;i<arr.length;i++){if(arr[i]!=null){newArr.push(arr[i]);}}document.write(newArr);</script>
</head>
<body></body>
</html>

JavaScript编程技术实验报告3相关推荐

单片机c语言数码显示实验报告,单片机动态显示技术实验报告.doc
桂林电子科技大学实验报告开课单位适用年级.专业机械课程序号课程代码实验名称 <动态显示技术> 动态显示技术实验报告一.实验目的 1.掌握动态显示技术 ...
java web编程技术解题与实验指导_javaweb编程技术实验指导书
javaweb编程技术实验指导书 <Java Web编程技术> 实验指导书沈泽刚编写2010 年 3 月目录实验一简单的 Servlet 与 JSP .1 实验二 HTT ...
现代密码学上机程序c语言,现代密码学与加解密技术实验报告
现代密码学与加解密技术实验报告现代密码学与加解密技术实验一. 实验教学目标与基本要求现代密码学与加解密技术实验是本课程重要的实践教学环节.实验的目的不仅仅是验证理论知识,更重要的是通过实验加强 ...
网络对抗技术-实验报告一
中国人民公安大学 Chinese people' public security university 网络对抗技术实验报告实验一网络侦查与网络扫描学生姓名蒋建辉年级 2015 ...
网络对抗技术实验报告三
中国人民公安大学 Chinese people' public security university 网络对抗技术实验报告实验三密码破解技术学生姓名吴宜杰年级 2014 区队 ...
java实验指导答案华软_Java核心编程技术实验指导教程
软件工程类 Java核心编程技术实验指导教程作者:张屹, 蔡木生所属类别:新世纪应用型高等教育软件专业系列规划教材出版时间:2010年10月 ISBN:978-7-5611-5839-5前言本 ...
html表单实验结论,web前端开发技术实验报告-实验五
1.长春大学 20 15 2016学年第二学期Web前端开发技术课程实验报告学院: 计算机科学技术专业: 软件工程班级: 软件14402 学号: 姓名: 王悦任课教师 ...
网络对抗技术—实验报告一
中国人民公安大学 Chinese people' public security university 网络对抗技术实验报告实验一网络侦查与网络扫描学生姓名李家伟年级 2014 ...
微型计算机标致寄存器实验报告,微型计算机原理与接口技术实验报告册.doc
微型计算机原理与接口技术实验报告册河南省高等教育自学考试实验报告册汽车检测与维修专业(本科) <微型计算机原理与接口技术> 市地:_______________ 考生姓名: ...

JavaScript编程技术实验报告3

JavaScript编程技术实验报告3相关推荐

最新文章

热门文章