【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

最新推荐文章于 2025-12-07 15:02:32 发布
原创 最新推荐文章于 2025-12-07 15:02:32 发布 · 439 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #前端 #后端

本文详细介绍了JavaScript中数组的创建、元素与长度、遍历方法及常用的数组操作，包括修改数组长度、遍历技巧、合并数组、字符串拼接、删除与添加元素等。通过实例代码展示每个操作的用法，帮助读者深入理解并掌握JavaScript数组的使用。

在这里插入图片描述

?? 作者: 阿伟
?? 个人主页:

?? 希望大家多多支持??一起进步呀！

?? 文章对你有帮助??关注点赞??收藏??

JavaScript数组的使用

在这里插入图片描述

文章目录

一、数组的创建

第一种:
var 数组名 = new Array();创建一个空数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
	
			var arr=new Array();
			console.log(arr)//打印到浏览器控制台
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
第二种:
var arr2 = new Array(10);创建一个定长为10的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
	
			var arr2 = new Array(10);
			arr2[0]="h";
			arr2[9]="l"
			console.log(arr2)
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

第三种
var arr3 = new Array(a,b,c);创建时直接指定元素值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			var arr3 = new Array("hello","world","JavaScript",10,true)
			console.log(arr3)
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
第四种
var arr4 = ["hello","world",""];相当于第三种的简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			var arr4 = ["hello","world",""]
			console.log(arr4)
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

二、数组的元素和长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var arr = [1,2,3,4,5];
			console.log(arr);
			console.log(arr[0]);
			console.log(arr.length)
		</script>
	</head>
	<body>
	</body>
</html>

控制台
在这里插入图片描述

1.通过修改length属性来改变数组长度的。
在这里插入图片描述

在这里插入图片描述

2.通过索引改变数组长度。
在这里插入图片描述
在这里插入图片描述

三、数组的遍历

1.普通for循环遍历数组

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr = [0,1,2,3,4,5,6,7,8,9];
			
			for(var i=0;i<=arr.length;i++){
				console.log(i)
			}
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

2.for each遍历数组
js中的for each写法：for( var i in 数组)i不是元素，是索引
在这里插入图片描述在这里插入图片描述

四、数组的常用方法

1.查询元素索引
2.合并两个数组
3.合并多个数组
4.合并字符串
5.删除数组最后一个元素
6.在数组结尾添加元素
7.反转数组
8.删除数组第一个元素
9.向第一个位置添加元素
10.截取子数组
11.删除数组中的某些元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var arr = [0,1,2,3,4,5,6,7,8,9];
			var index = arr.indexOf(7);//查询元素索引的方法
			console.log(index);
			
			//合并两个数组
			var hege = ["Cecilie","Lone"];
			var stale = ["Email","Tobias","Linus"];
			var childer = hege.concat(stale);
			console.log(childer);
			
			//合并三个数组
			var family = hege.concat(stale,childer);
			console.log(family);
			
			//合并字符串
			var fruits = ["Banana","Orange","Apple"];
			var fs = fruits.join();
			console.log(fs);
			
			//删除数组的最后一个元素
			fruits.pop();
			console.log(fruits);
			
			//在数组结尾增加元素
			fruits.push("Grape");
			console.log(fruits);
			
			//翻转数组
			fruits.reverse();
			console.log(fruits);
			
			//删除数组第一个元素
			var ss = fruits.shift();
			console.log(fruits);
			console.log(ss);
			
			//向第一个位置添加元素
			fruits.unshift("Per");
			console.log(fruits);
			
			//截取子数组;
			//从三开始，到六结束
			fruits.slice(3,6);
			console.log(fruits);
			
			//删除数组中某些元素
			//从2开始，删除5个
			numbers = [1,2,3,4,5,6,7,8,9]
			numbers.splice(2,5);
			console.log(numbers);	

			//如果第二个元素是0，那么就变成在指定索引位置添加元素
			numbers.splice(2,0,100);
			console.log(numbers);
	</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
好啦，文章到这里就结束啦！
在这里插入图片描述

JS数组方法（最详细）
热门推荐
老电影故事的博客
11-14 2万+
数组是js中最常用到的数据集合，其内置的方法也很多，熟练掌握这些方法，可以有效的提高我们的工作效率，也对我们的代码质量有很大影响。 如果还有漏网之鱼，欢迎留言补充哈。 一、创建数组 1、使用数组字面量方法 var arr1 = []; // 创建一个数组 var arr2 = [20]; // 创建一个包含1项数据为20的数组 var arr3 = ['lily','lucy','Tom']; // 创建一个包含3个字符串的数组 2、使用Array构造函数 无参构造 var arr1 = n
JavaScript-数组（Array）
StupidlyGrass的博客
01-16 6735
JavaScript数组（Array）
javascript002：数组，js脚本对象
weixin_44699728的博客
06-04 265
一，定义数组： 为什么要使用数组: 在程序中需要定义大量的变量时，使用数组，可以简化代码，比如定义10个变量。 var a,b,c,d,e,f,g,h,i,j; 那如果定义100个呢？ 利用数组可以很方便的定义多个变量: 1，只给长度，不给值 var a=new Array(10); //定义一个长度为10的数组 2，只给值，长度自加 var a=new Array(10,20,...
js脚本数组，对象，字符对比是否相同
07-13
js脚本数组，对象，字符对比是否相同
前端面试大全（JavaScript篇——面试利器值得拥有！）
cai niaoyihao_的博客
05-31 3338
前端面试大全（JavaScript篇——面试利器值得拥有！）
JavaScript——JavaScript基础：数组 | JavaScript函数：使用、作用域、函数表达式、预解析
li13437542099的博客
06-18 1132
在JavaScript中，内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。①全局变量：不在任何函数内声明的变量（显式定义）或在函数内省略var声明的变量（隐式定义）都称为全局变量，它在同一个页面文件中的所有脚本内都可以使用。函数表达式与函数声明的定义方式几乎相同，不同的是函数表达式的定义必须在调用前，而函数声明的方式则不限制声明与调用的顺序。③块级变量：ES 6提供的let关键字声明的变量称为块级变量，仅在“{}”中间有效，如if、for或while语句等。
【JavaScript】—— 数组篇（方法总结+详解）
JPengp的博客
04-17 2894
全网最细！学习JavaScript数组知识一篇就够了！！！
JavaScript教程：从入门到精通——理解对象数组
"这篇教程主要介绍了JavaScript中的定义对象数组的方法，并概述了JavaScript语言的基本特性、与Java的区别以及基于对象和面向对象的概念。" 在JavaScript中，定义对象的数组可以通过创建一个函数来实现，如示例所示...
JavaScript中使用map方法处理数组数据
在JavaScript开发中，`let newArrayData = arrayData.map(it => ...)` 是一种非常典型且广泛使用的数组处理模式，它体现了现代前端开发中函数式编程思想的核心应用。该代码片段虽然简短，但蕴含了丰富的编程理念和...
javascript基础——String
10-21
JavaScript是一门广泛使用的前端脚本语言，其字符串（String）对象是该语言中使用频率极高的数据类型之一。字符串在JavaScript中可视为字符数组，提供了许多用于处理字符串的方法，这些方法使得操作字符串变得简单和...
JavaScript入门指南：轻松掌握前端脚本语言
该文档不仅介绍了 JavaScript 的基本定义——一种解释型、基于对象的脚本语言，还深入阐述了其在提升网页互动性方面的关键作用。 JavaScript 最初由 Netscape 公司于 1995 年推出，原名为 LiveScript，后更名为 ...
js脚本语言（数组）
weixin_30511039的博客
09-19 106
定义：给数据Array(1,3.14,"aa")给长度（Array（5））使用方括号定义[1,3.14,"aa"] 属性：lenght（数据的长度） 方法：push（往数组里面追加元素） 遍历：for循环（i=0；i<attr.lenght;i++） 　　:foreach(var a in attr) 例子： 1.输入10个数求最高分最低分 attr=[11,12,1...
js脚本数组Array长度可动态增长
葉無聞
05-27 4509
var array=new Array(); array[5]='aaa'; document.write(array.length+'&lt;br&gt;'+array+'&lt;br&gt;') array[10]='bbb'; document.write(array.length+'&lt;br&gt;'+array)output:6 ,,,,,aaa 11 ,,,,,aaa,,,,,b...
JS中数组的常用操作方法
Du_三木的博客
05-23 859
JS中数组的常用操作方法 push / pop / unshift / shift 1. push push( )方法：可以将一个或者更多的参数添加在数组的尾部；返回添加后的数组的长度，原数组发生改变。 代码示例如下： var arr=[1,2,3,4]; var a=arr.push(9,8,7); console.log(a,arr);//1,2,3,4,9,8,7； 2. unshif...
《零基础学PHP：从入门到实战》教程-模块七：MySQL 数据库基础-4
zwh821的博客
12-03 609
PHP连接MySQL数据库操作指南 本章介绍了使用PHP的mysqli扩展连接和操作MySQL数据库的核心方法。主要内容包括： 两种编程风格：面向对象和面向过程方式，推荐使用面向对象风格 数据库连接：建立连接的标准流程和必要的错误处理 SQL操作： SELECT查询及结果处理 INSERT/UPDATE/DELETE操作 安全防护： 重点讲解SQL注入攻击原理 演示不安全的字符串拼接方式的风险 推荐使用预处理语句（prepare/bind_param/execute）作为唯一正确的防护手段 通过代码示例展示
【Unity实战】如何使用VS Code在真实Android设备上调试 Unity应用
最新发布
Tealc
12-07 548
本文介绍两种通过 VS Code 调试运行在真实 Android 设备上 Unity C# 脚本的方法
数据库锁死解决途径
zjw541806的博客
12-05 41
本文详细介绍了多种数据库系统的锁检测方法，包括MySQL、PostgreSQL、SQL Server和Oracle。主要内容涵盖：1）通用检测思路，如识别锁类型和分析阻塞链；2）各数据库系统的特定查询命令，包括查看当前锁状态、阻塞关系和事务信息；3）关键监控指标与告警建议；4）诊断工具和自动化脚本；5）锁死问题的解决步骤和预防措施。文章强调应定期监控并分析根本原因，而非仅临时处理，同时提供了注意事项和检查清单，帮助DBA全面掌握数据库锁情况。
Android 初学者入门：Fragment 与 ListView 基础概念与使用方法
am_g123的博客
12-03 404
类别关键点Fragment是 Activity 的子组件，用于构建可复用 UI 部分，适用于大屏适配。生命周期Fragment 生命周期依赖于 Activity，不可独立存在。托管机制必须由 Activity 或其他 Fragment 托管。动态管理使用 FragmentManager 进行 add/remove/replace 操作。通信方式通过 Activity 作为中介进行 Fragment 之间的通信。ListView使用 Adapter 绑定数据，自动适配列表长度，常见于商品、菜单等场景。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值