javascript实验报告 js的实验报告

转载

mob64ca1415f0ab 2023-10-07 12:26:18

文章标签 javascript实验报告 javascript 数组 html 数组元素 文章分类 JavaScript 前端开发

一、实验目的

熟悉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]+"   ");
        }
        //数组的遍历for(...in...)
        document.write("</br>"+"for(...in...)循环"+"</br>");
        for(var i in arr){
            document.write(arr[i]+"   ");
        }
        //数组的遍历for(...of...)
        document.write("</br>"+"for(...of...)循环"+"</br>");
        for(var i of  arr){
            document.write(i+"   ");
        }
        //数组元素的增加；
        arr3[3]="草莓";
        arr3[4]="荔枝";
        document.write("</br>"+"数组元素的增加:"+"</br>");
        for(var i of arr3){
            document.write(i+"   ");
        }
        //数组元素的修改；
        arr3[0]="草莓";
        arr3[2]="荔枝";
        document.write("</br>"+"数组元素的修改:"+"</br>");
        for(var i of arr3){
            document.write(i+"   ");
        }
        //数组元素的删除；
        document.write("</br>"+"数组元素的删除:"+"</br>");
        delete arr3[0];
        for(var i of arr3){
            document.write(i+"   ");
        }
        //多维数组的创建与遍历(双重或多重循环)
        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]+"   ");
        }
        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]+"   ");
        }
        //(常见的数组方法：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>

结果展示：

javascript实验报告 js的实验报告_数组元素

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

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

效果如图3-1所示。

javascript实验报告 js的实验报告_javascript实验报告_02

计算结果展示
具体实现步骤如下：
定义一个数组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>

结果展示：

javascript实验报告 js的实验报告_html_03

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=0
    var  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>

结果展示：

javascript实验报告 js的实验报告_数组元素_04

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

效果如图3-3所示。

具体实现步骤如下：
定义数组arr，里边存放8个元素。
排序并输出。

javascript实验报告 js的实验报告_javascript_05

具体实现步骤如下：
定义数组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>

结果展示:

javascript实验报告 js的实验报告_javascript_06

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

效果如图3-4所示。

javascript实验报告 js的实验报告_数组元素_07

元素个数
具体实现步骤如下：
定义一个数组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>

结果展示：

javascript实验报告 js的实验报告_数组元素_08

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实验报告 js的实验报告_javascript实验报告_09