JavaScript编程技术实验报告3

最新推荐文章于 2023-10-17 10:33:08 发布
最新推荐文章于 2023-10-17 10:33:08 发布
阅读量1.8k 收藏 7
点赞数
分类专栏： javaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44788220/article/details/125487306
版权

一、实验目的

熟悉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所示。

 

  1. 计算结果展示
  1. 具体实现步骤如下：
  1. 定义一个数组arr，存放5门成绩。
  2. 定义总分变量sum=0。
  3. 定义最高分变量max=0。
  4. 定义最低分变量min=100。
  5. for循环遍历数组arr。
  6. 输出结果。

（源代码）

<!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. 返回数组中指定元素的下标。

  1. 效果如图3-2所示。

  1. 具体实现步骤如下：
  1. 定义一个数组arr，存放数组元素['a','b','d','d','c','d','d']。
  2. 检索数组，在页面中输出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>

结果展示： 

 

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

  1.     效果如图3-3所示。

 

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

 

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

 

<!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. 已知一个字符串数组，求字符串数组中每一个元素的长度，存储到一个新的数组中。

  1. 效果如图3-4所示。

 

  1. 元素个数

  1. 具体实现步骤如下：
  1. 定义一个数组array，存放字符串元素。
  2. 定义个新数组newArray，用来存放字符串长度。
  3. for循环遍历array数组，并把每一项元素的长度赋值给newArray。
  4. 输出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>

 

 

Su魏
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript程序设计——DOM访问实验报告.docx
11-11
1．实现文档对象的属性； 2．实现文档对象的属性方法； 3．实现文档对象的使用方式。 问：如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表： 答： Var tables = document.getElementsByTagName("table"); alert("This document contains contains"+tables.length+"tables");
JavaScript实验2
weixin_44788220的博客
06-27 4137
JavaScript实验2： 1.根据平均分来划分等级 2.加油优惠价格计算 3.输出100以内的所有质数 4：求圆的周长和面积 5：验证用户名和密码 6：打印九九乘法表 7：打印菱形，三角形 8：求红白黑球的个数
JavaScript实验报告.docx
03-10
JavaScript实验报告全文共5页，当前为第1页。JavaScript实验报告全文共5页，当前为第1页。第一次JavaScript实验 JavaScript实验报告全文共5页，当前为第1页。 JavaScript实验报告全文共5页，当前为第1页。 实验主题：内置对象（1） 实验内容： 1. 熟悉JavaScript常见内置对象及其关系； 2. 熟练应用String对象和Array对象； 3. 动手操作： 数组的升序与降序排列练习 1 升序排列代码 <html> <head> <title>数组数字大小排序</title> </head> <body> <p>让数组按照升序降序排列</p> <p>这里写个数组 var array=[89,28,49,654,6758,5768];</p> <p>升序输出：</p> <script type="text/javascript"> var array=[89,28,49,654,6758,5768]; array.sort(function (x,y) { return x-y; }); document.writeln(array); </script> </body> </html> JavaScript实验报告全文共5页，当前为第2页。JavaScript实验报告全文共5页，当前为第2页。 JavaScript实验报告全文共5页，当前为第2页。 JavaScript实验报告全文共5页，当前为第2页。 2降序排列 <html> <head> <title>数组数字大小排序</title> </head> <body> <p>降序排列：</p> <p>这里写个数组 var array=[59,689,62,92,68,10];</p> <p>降序输出</p> <script type="text/javascript"> var array=[59,689,62,92,68,10]; array.sort(function (x,y) { return y-x; }); document.writeln(array); </script> </body> </html> JavaScript实验报告全文共5页，当前为第3页。JavaScript实验报告全文共5页，当前为第3页。 字符串的交叉合并练习 JavaScript实验报告全文共5页，当前为第3页。 JavaScript实验报告全文共5页，当前为第3页。 <html> <head> <title>交叉合并字符串</title> <style> #form{ margin: 0 auto; width:500px; top:100px; height:300px; } </style> <script type="text/javascript"> var reg = "^[A-Za-z0-9]+$"; function check(){ var str1 =document.all.str1.value; var str2 =document.all.str2.value; if(str1==""){ alert("字符串一不允许为空!"); document.all.str1.focus(); return; }else if(!/^[A-Za-z0-9]+$/.test(str1)){ alert("字符串一只能是数字和字母的组合"); document.all.str1.focus(); return; }else if(str2==""){ alert("字符串二不允许为空!"); document.all.str2.focus(); return; }else if(!/^[A-Za-z0-9]+$/.test(str2)){ alert("字符串二只能是数字和字母的组合"); document.all.str2.focus(); return; } var string=""; var font1 = "<font style='color:red;'>"; var font2 = "<font style='color:blue;'>"; var fontend = "</font>"; if(str1.length>=str2.length){ for(var i =0;i<str1.length;i++){ if(i< str2.length){ string += font1+str1[i]+fontend+ font2+ str2[i]+fontend; JavaScript实验报告全文共5页，当前为第4页。JavaScript实验报告全文共5页，当前为第4页。 }else{ JavaScript实验
JavaScript基础练习集1
最新发布
Sakurapaid的博客
10-17 980
JavaScript基础练习集，适合基础回顾练习使用
JavaScript技术实验报告4
weixin_44788220的博客
06-27 3545
JavaScript技术实验报告4 2:函数求阶乘。 3. 判断是否是闰年 4.编写函数，计算圆的面积和周长 5. 编写函数，比较最大值：求出求两个数中的最大值；求出三个数中的最大值 6. 编写函数，计算并输出k以内的最大的10个能被13或17整除的自然数之和 7. 编写一个简单的计算器。...
[web程序设计基础R]实验报告（JavaScript事件、JavaScript内置函数与内置对象、HTML基础、CSS+DIV页面布局）
weixin_51538341的博客
12-31 3873
web实验报告
JavaScript中数组的学习总结
qwguo
01-22 1082
js中数组的重新学习
重二师JavaScript前端设计实验报告及2022期末作业
07-20
2. **函数与作用域**：理解如何定义和调用函数，以及作用域规则（全局作用域和局部作用域）是JavaScript编程的关键。此外，箭头函数的使用也是现代JavaScript的一个重要特征。 3. **DOM操作**：在前端设计中，...
网页编程技术 实验报告
06-23
网页编程技术是构建和维护互联网页面的关键技能，它涉及到HTML、CSS、JavaScript等核心语言以及相关的框架和库。本实验报告将深入探讨JPS（可能是Java Programming for the Web的缩写）在网页编程中的应用，旨在提升...
Servlet实验报告.pdf
10-14
Servlet 实验报告.pdf 本实验报告的主要目的是掌握 Servlet 应用，熟悉 web 开发的 MVC 模式，了解 servlet 的工作流程和作用，并掌握 servlet 的方法 init()、destory()、doGet()、doPost()。 一、实验目的 1. ...
web前端框架技术 实验报告
11-25
实验报告详细记录了学生的体验和学习成果，同时也展示了他们在网页设计、编程技能上的提升。 首先，Vue.js的核心概念包括组件化开发。组件是Vue应用的基本构建块，它们可以被视为独立、可重用的UI部分。每个组件由...
WEB前端-JS长数组性能测试报告
06-13 493
先上结论，上图以15000的数据为例，改用sortBy方法替换原for循环后，45.9秒减少到0.098秒，效率提升约 500 倍，迭代次数从2.2亿减少到72万
数据结构实验七 多维数组和矩阵
愿时光能缓故人不散
04-12 484
实验七 多维数组和矩阵 1、实验目的： （1）理解数组的特特性和二维数组的存储方式。 （2）了解各种特殊矩阵的压缩存储方法。 2、实验环境与设备： 已安装Visual Studio 2010（或其以上版本）集成开发环境的计算机。 3、实验原理： （1）三角矩阵的压缩存储。 （2）矩阵的求和运算。 4、实验内容： 矩阵运算：根据两个4阶三角矩阵的压缩存储，计算两个矩阵相加之和，并将结果存入一个新的...
javaScript编程技术实验报告6
weixin_44788220的博客
06-27 1026
理解window对象 控制窗口、框架和弹出窗口 掌握window对象的使用方法
js数组使用小结
weixin_36430673的博客
07-27 179
在日常的开发中，涉及到很多跟数组相关的操作，总结一下 1、数组的基本概念 数组是一组数据的集合，其表现形式就是内存中的一段连续的内存地址，数组名称就是连续内存地址的首地址。 2.创建一个数组 // 字面量方式:这个方法也是我们最常用的， let a = [1，2，3] // [1，2，3]; // 构造器: // 实际上 new Array === Array,加不加new 一点影响都没有。 let a = Array(); // [] let a
JavaScript-数组（Array）
StupidlyGrass的博客
01-16 4749
JavaScript数组（Array）
JS数组及其方法（slice,contact...）
weixin_34336292的博客
04-17 1132
JS数组的创建： 　　　　1，使用Array数组的方式： 　　var arrayObj = new Array();　//创建一个数组 　　var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 　　var arrayObj = new Array([element0[, element1[, ...[, elementN]]]...
Js 数组方法
goodfornothi的博客
09-07 72
在日常开发中经常要处理数组类型的数据，常见的几种数组处理方法 1，增加和删除数组元素 ①push()方法是想数组中添加新元素，他只能在原数组末尾处添加，push()方法返回的是添加后新数组的长度。 ②unshift()方法（在开头）向数组添加新元素，unshift()方法返回新数组的长度。 ③pop()方法从数组中删除最后一个元素： ...
数组的一些基本方法
m0_63763590的博客
03-06 454
一.创建数组 <script> const arr = new Array(5) //创建一个长度为5的数组，但数组中的元素都为empty console.log(arr.length); console.log(arr); const arr1 = new Array('1','2','3','4') //利用new来创建数组 console.log(arr1); const arr2 = ['apple','peach','ba
jsp webchat 实验报告
02-06
webchat 实验报告可能指的是一种使用 jsp 技术开发的 Web 聊天应用的实验报告。这种实验报告可能会描述 Web 聊天应用的功能，使用的技术以及在实验过程中遇到的问题和解决方案。 在使用 jsp 开发 Web 聊天应用时，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Su魏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值