JavaScript数组的创建、属性与常用方法详解

作者:闭包旅人

时间:2026-10-26

浏览:408

本文详细解析JavaScript中数组的多种创建方式,包括构造函数与字面量语法。介绍如何通过length属性和索引修改数组长度,对比for循环与for...in遍历的区别。最后汇总indexOf、concat、splice等常用数组操作方法,帮助开发者掌握JS数组的核心技巧。

文章目录

一、数组的创建

第一种方式:

使用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数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章