JavaScript了解unshift,push在头部尾部添加元素的代码

news2024/11/25 10:55:35

     以下为JavaScript了解unshift,push在头部尾部添加元素的程序代码和运行截图

目录

前言

一、unshift在头部添加元素

1.1 运行流程及思想

1.2 代码段

1.3 JavaScript语句代码

1.4 运行截图

二、push在尾部添加元素

2.1 运行流程及思想

2.2 代码段

2.3 JavaScript语句代码

2.4 运行截图


前言

1.若有选择,您可以在目录里进行快速查找;

2.本博文代码可以根据题目要求实现相关使用功能。同时可以实现自定义的设置;

3.本文介绍的是JavaScript代码习题,本博文使用的软件是HBuilder X3.7.9编写的代码,原则上其他软件如DW、VSCode或DW较低或较高版本的软件都是兼容的,若您有需要且编写软件不是HBX等软件原则上都是可以能正常运行的;

7e9d2dc6d8324836a1de02f0375525f4.png

图1   编写软件举例(部分)

4.这里要特别说明,因为我使用的是HBX,所以是网页格式,我也单独把<script>语句粘贴了出来,有需要可直接复制<script></script>语句;

5.本博文代码是我在上学时写的,有一些地方没能完美实现,请包涵也请多赐教,若您发现了问题也请麻烦您将问题反馈给我,我好更正错误、总结完善、持续改善! 

6.博文通常需要在浏览器运行,通常会弹出表单,输入数值并得出结果。本文使用的是谷歌浏览器,推荐使用谷歌浏览器;

7.若涉及侵权,请联系删除;


提示:以下是本篇文章正文内容,下面案例可供参考

一、unshift在头部添加元素

1.1 运行流程及思想

这是在unshift头部添加元素的代码。具体思想流程如下:

1.2 代码段

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr=new Array(5,20,10,8,32,28);
			document.write("unshift 前 arr 数组长度为"+arr.length+"<br>");
			document.write("unshift 前 arr 数组元素有:");
			for(var i=0;i<arr.length;i++)
			{
				document.write(arr[i]+" ");
			}
			 arr.unshift("hello","world");
			 document.write("<br>unshif后arr数组长度为"+arr.length+"<br>");
			 document.write("unshift 后 arr 数组元素有;");
			 for(var i=0;i<arr.length;i++)
			 {
			 	document.write(arr[i]+" ");
			 }
		</script>
	</head>
	<body>
	</body>
</html>

1.3 JavaScript语句代码

代码如下(示例):

<script>
			var arr=new Array(5,20,10,8,32,28);
			document.write("unshift 前 arr 数组长度为"+arr.length+"<br>");
			document.write("unshift 前 arr 数组元素有:");
			for(var i=0;i<arr.length;i++)
			{
				document.write(arr[i]+" ");
			}
			 arr.unshift("hello","world");
			 document.write("<br>unshif后arr数组长度为"+arr.length+"<br>");
			 document.write("unshift 后 arr 数组元素有;");
			 for(var i=0;i<arr.length;i++)
			 {
			 	document.write(arr[i]+" ");
			 }
		</script>

1.4 运行截图

运行结果如下(示例):

1.4.1 浏览器弹出表单显示结果

 

2bdb6a59af43409d95fda560d24a78bf.png

二、push在尾部添加元素

2.1 运行流程及思想

这是在在push尾部添加元素的代码。具体思想流程如下:

2.2 代码段

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr=new Array(5,20,10,8,32,28);
			document.write("push 前 arr 数组长度为"+arr.length+"<br>");
			document.write("push 前 arr 数组元素有:");
			for(var i=0;i<arr.length;i++)
			{
				document.write(arr[i]+" ");
			}
			 arr.push("hello","world");
			 document.write("<br>push后arr数组长度为"+arr.length+"<br>");
			 document.write("push 后 arr 数组元素有;");
			 for(var i=0;i<arr.length;i++)
			 {
			 	document.write(arr[i]+" ");
			 }
		</script>
	</head>
	<body>
	</body>
</html>

2.3 JavaScript语句代码

代码如下(示例):

<script>
			var arr=new Array(5,20,10,8,32,28);
			document.write("push 前 arr 数组长度为"+arr.length+"<br>");
			document.write("push 前 arr 数组元素有:");
			for(var i=0;i<arr.length;i++)
			{
				document.write(arr[i]+" ");
			}
			 arr.push("hello","world");
			 document.write("<br>push后arr数组长度为"+arr.length+"<br>");
			 document.write("push 后 arr 数组元素有;");
			 for(var i=0;i<arr.length;i++)
			 {
			 	document.write(arr[i]+" ");
			 }
		</script>

2.4 运行截图

运行结果如下(示例):

2.4.1 浏览器弹出表单显示结果

c340cb9e22b54b9d8ed1fdf2ff62ddd3.png

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/596364.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Javascript 俄罗斯方块 游戏代码

本俄罗斯方块代码采用 JavaScript 脚本代码写成&#xff0c;简单易懂&#xff1b; 全代码采用静态类及静态变量成员组成&#xff1b; 全脚本通过实现代码全局配置 OLSFK.Options {...} 定义方块起始坐标及定义各自的旋转点&#xff1b; 从初始化俄罗斯方块界面开始&#x…

【C++】指针 - 定义和使用,所占内存空间,空指针,野指针,const 修饰指针,指针和数组,指针和函数

文章目录 1. 定义和使用2. 所占内存空间3. 空指针4. 野指针5. const 修饰指针6. 指针和数组7. 指针和函数 1. 定义和使用 数据类型 * 变量名; 指针的作用是&#xff0c;可以通过指针间接访问内存。 内存编号是从 0 开始记录的&#xff0c;一般用十六进制数字表示。可以利用指…

关于如何用好线程池的一些建议

文章目录 1. 线程的使用场景2. 线程池创建3. 参数的配置建议常见的拒绝策略其他的拒绝策略 4. 线程池的任务处理流程5. 线程的状态6. 线程池的监控 1. 线程的使用场景 异步任务 简单来说就是某些不需要同步返回业务处理结果的场景&#xff0c;比如&#xff1a;短信、邮件等通…

一款IP渗透小工具

MoreFind 一款用于快速导出URL、Domain和IP的小工具 快速安装 方式一: 通过Go包管理安装 go install github.com/mstxq17/MoreFindlatest 方式二: 直接安装二进制文件 wget --no-check-certificate https://ghproxy.com/https://github.com/mstxq17/MoreFind/releases/…

软件测评师2012年下半年考试真题

基础知识&#xff1a; 解析&#xff1a;死锁就是运行不下去了&#xff0c;但是这里它说资源是同类型的&#xff0c;也就是说&#xff0c;我多出来的一个资源&#xff08;11个资源5个进程&#xff0c;每个进程分配2个&#xff09;给其中一个进程之后&#xff0c;运行完了资源释放…

【源码篇】基于SpringBoot+thymeleaf实现的图书管理系统

系统介绍 基于SpringBootthymeleaf实现的图书管理系统分为管理员、读者两个登录角色&#xff0c;一共是8个功能模块 管理员权限 图书管理&#xff1a; 添加图书&#xff1a;书名、作者、出版社、ISBM、简介、价格、出版日期、分类、数量查询图书&#xff1a;根据书名或分类…

Tomcat发布成服务

一、配置服务 1.配置bin目录下的service.bat&#xff08;用于生成新服务&#xff09; 配置内容&#xff1a; rem Tomcat解压根目录 set CATALINA_HOMED:\apache-tomcat-7.0.55-8080 rem 服务显示名称&#xff08;服务中对外显示的名称&#xff09; set PR_DISPLAYNAMEapache…

ChunJun FTP Connector 功能扩展解读

本文将从 FTP Connector 的功能详解&#xff0c;自定义文件切割及自定义 FileFormat 三个方面为大家带来 ChunJun FTP Connector 的功能扩展分享。 FTP Connector 详解 FTP 是用于在网络上进行文件传输的一套标准协议&#xff0c;它工作在 OSI 模型的第七层&#xff0c; TCP …

从0到1搭建自己的脚手架(java后端) | 京东云技术团队

一、脚手架是什么 脚手架是一种基础设施工具&#xff0c;用于快速生成项目的框架代码和文件结构。它是一种标准化的开发工具&#xff0c;使开发人员能够在项目的早期阶段快速搭建出一个具备基本功能和结构的系统。 二、脚手架的意义 主流的微服务架构体系下很多公司会将原有…

HarmonyOS/OpenHarmony应用开发-ArkTS语言基本语法说明

以一个具体的示例来说明ArkTS的基本组成。如下图所示&#xff0c;当开发者点击按钮时&#xff0c;文本内容从“Hello World”变为“Hello ArkUI”。 图1 示例效果图 本示例中&#xff0c;ArkTS的基本组成如下所示。 图2 ArkTS的基本组成 装饰器&#xff1a; 用于装饰类、结构…

impala中group_concat()函数无法对内容进行order by

描述&#xff1a; 使用的是impala数据库&#xff0c;假设有四笔数据&#xff0c;是无序的&#xff0c;业务上要求将其行转列成一行数据&#xff0c;并且里面的数据要按从小到大排序。 过程&#xff1a; 猜测&#xff1a; 数据库Oracle、Mysql、MSsql等支持group_concat中使…

依赖倒置原则:高层代码和底层代码,到底谁该依赖谁?

前言 上一篇&#xff0c;我们讲了 ISP 原则&#xff0c;知道了在设计接口的时候&#xff0c;我们应该设计小接口&#xff0c;不应该让使用者依赖于用不到的方法。 依赖这个词&#xff0c;程序员们都好理解&#xff0c;意思就是&#xff0c;我这段代码用到了谁&#xff0c;我就…

签名支持全球管控AI 三巨头侧漏“求生欲”

又一封“群星云集”警示AI风险的公开信来了&#xff0c;这封信的内容简短但措辞炸裂&#xff1a;减轻 AI 带来的灭绝风险&#xff0c;应该与管控流行病和核战争等其他社会级规模的风险一样&#xff0c;成为一项全球优先事项。 5月30日&#xff0c;这纸原文只有22个单词的声明&…

核心交换机的四种关键技术:链路聚合、冗余、堆叠和热备份,真简单!

你好&#xff0c;这里是网络技术联盟站。 当涉及到核心交换机的关键技术&#xff0c;如链路聚合、冗余、堆叠和热备份时&#xff0c;下面更详细地介绍每个技术的工作原理和优势。 1. 链路聚合 链路聚合是一种技术&#xff0c;用于将多个物理链路组合成一个逻辑链路&#xff0…

详解Java枚举

一、知识点 二、概念 enum 的全称为 enumeration&#xff0c; 是 JDK 1.5 中引入的新特性。 在Java中&#xff0c;被 enum 关键字修饰的类型就是枚举类型。形式如下&#xff1a; enum Color { RED, GREEN, BLUE }如果枚举不添加任何方法&#xff0c;枚举值默认为从0开始的有…

CSS 选择器的常见用法

前言 CSS在编写代码的时候有很多种样式&#xff0c;和和HTML&#xff0c;JS相似&#xff0c;他们都是运行在浏览器中的&#xff0c;下面就介绍一下CSS选择器的常见用法。 标签选择器使用标签名把页面中所有同名标签都选中类选择器使用.类名的方式对应一组CSS属性id选择器使用 …

小米再度登上《焦点访谈》!中关村论坛展科技风采

5月30日下午&#xff0c;以“开放合作共享未来”为主题的2023中关村论坛展览&#xff08;科博会&#xff09;在京圆满落幕。小米作为科技领军企业参展&#xff0c;设立“科技创新、绿色低碳”主题展区。 小米携智能手机、可穿戴设备、智能家居以及全尺寸人形仿生机器人CyberOne…

【ROS】ROS2编程示例:话题订阅-发布-C++版

1、准备 1&#xff09;安装ROS2 【ROS】Ubuntu22.04安装ROS2&#xff08;Humble Hawksbill&#xff09; 2&#xff09;ROS2命令 【ROS】ROS2命令行工具详解 3&#xff09;配置工作空间 【ROS】ROS2中的概念和名词解释中第一节&#xff1a;工作空间 workspace 4&#xff09;…

MySQL-12-SQL优化

一、MySQL体系结构 1.1、体系结构 # 1.2、查询执行流程 参考&#xff1a;https://www.cnblogs.com/xfeiyun/p/15899990.html 1.3、组件说明 管理工具&#xff1a;MySQL服务软件安装后提供的命令连接池&#xff1a;检查本机是否有空闲资源&#xff08;线程&#xff0c;内存&…

Geoffrey Hinton、姚期智、张钹、Sam Altman等专家共话AI安全与对齐丨2023智源大会议程公开...

6月9日&#xff0c;2023北京智源大会&#xff0c;将邀请AI领域的探索者、实践者、以及关心智能科学的每个人&#xff0c;共同拉开未来舞台的帷幕&#xff0c;你准备好了吗&#xff1f;与会知名嘉宾包括&#xff0c;图灵奖得主Yann LeCun、OpenAI创始人Sam Altman、图灵奖得主Ge…