JavaScript数组的使用详解

更新时间：2022年07月20日 10:44:57 作者：Flyme awei

这篇文章主要介绍了JavaScript数组的使用方法，数组（Array）是有序的元素序列。若将有限个类型相同的变量的集合命名，那么这个名称为数组名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、数组的创建

第一种:

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","Flyme awei"];相当于第三种的简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr4 = ["hello","world","Flyme awei"]
			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>

到此这篇关于JavaScript数组的使用详解的文章就介绍到这了,更多相关JS数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript setTimeout和setInterval的用法与区别详解
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,下面这篇文章主要给大家介绍了关于JavaScript setTimeout和setInterval的用法与区别,需要的朋友可以参考下
2022-04-04
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下
2016-03-03
原生js实现选项卡功能
本文主要介绍了原生js实现选项卡功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
如何安装控制器JavaScript生成插件详解
这篇文章主要给大家介绍了关于如何安装控制器JavaScript生成插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-10-10
微信小程序图片上传组件实现图片拖拽排序
最近在写小程序过程中遇到一个拖拽排序需求,上网一顿搜索未果,遂自行实现,下面这篇文章主要给大家介绍了关于微信小程序图片上传组件实现图片拖拽排序的相关资料,需要的朋友可以参考下
2022-03-03
JS 两日期相减,获得天数的小例子(兼容IE,FF)
这篇文章介绍了两日期相减,获得天数的小例子，有需要的朋友可以参考一下
2013-07-07
JavaScript实现预览本地上传图片功能完整示例
这篇文章主要介绍了JavaScript实现预览本地上传图片功能,结合完整实例形式分析了javascript图片预览相关的格式正则验证、浏览器判断、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-03-03
hash特点、hashchange事件介绍及其常见应用场景
浅析hash特点、hashchange事件介绍及其常见应用场景（不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题）,hashchange和popstate事件触发条件
2023-11-11
javascript bind绑定函数代码
bind函数，顾名思义，用于为调用函数绑定一个作用域，因为this很容易跟丢它原来所在的作用域，直接指向顶层的window对象。
2010-01-01
Javascript 继承实现例子
在真正的Web站点和应用程序中，几乎不可能创建名为ClassA和ClassB的类，更可能的是创建表示特定事物（如形状）的类。考虑本章开头所述的形状的例子，Polygon、Triangle和Rectangle类就构成了一组很好的探讨数据。
2009-08-08