快捷導(dǎo)航

JavaScript數(shù)組的使用詳解

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

這篇文章主要介紹了JavaScript數(shù)組的使用方法，數(shù)組（Array）是有序的元素序列。若將有限個類型相同的變量的集合命名，那么這個名稱為數(shù)組名，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、數(shù)組的創(chuàng)建

第一種:

var 數(shù)組名 = new Array();創(chuàng)建一個空數(shù)組

<!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);創(chuàng)建一個定長為10的數(shù)組

<!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);創(chuàng)建時直接指定元素值

<!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"];相當(dāng)于第三種的簡寫

<!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>

二、數(shù)組的元素和長度

<!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屬性來改變數(shù)組長度的。

2.通過索引改變數(shù)組長度。

三、數(shù)組的遍歷

1.普通for循環(huán)遍歷數(shù)組

!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遍歷數(shù)組

js中的for each寫法：for( var i in 數(shù)組)i不是元素，是索引

四、數(shù)組的常用方法

1.查詢元素索引

2.合并兩個數(shù)組

3.合并多個數(shù)組

4.合并字符串

5.刪除數(shù)組最后一個元素

6.在數(shù)組結(jié)尾添加元素

7.反轉(zhuǎn)數(shù)組

8.刪除數(shù)組第一個元素

9.向第一個位置添加元素

10.截取子數(shù)組

11.刪除數(shù)組中的某些元素

<!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);
			//合并兩個數(shù)組
			var hege = ["Cecilie","Lone"];
			var stale = ["Email","Tobias","Linus"];
			var childer = hege.concat(stale);
			console.log(childer);
			//合并三個數(shù)組
			var family = hege.concat(stale,childer);
			console.log(family);
			//合并字符串
			var fruits = ["Banana","Orange","Apple"];
			var fs = fruits.join();
			console.log(fs);
			//刪除數(shù)組的最后一個元素
			fruits.pop();
			console.log(fruits);
			//在數(shù)組結(jié)尾增加元素
			fruits.push("Grape");
			console.log(fruits);
			//翻轉(zhuǎn)數(shù)組
			fruits.reverse();
			console.log(fruits);
			//刪除數(shù)組第一個元素
			var ss = fruits.shift();
			console.log(fruits);
			console.log(ss);
			//向第一個位置添加元素
			fruits.unshift("Per");
			console.log(fruits);
			//截取子數(shù)組;
			//從三開始，到六結(jié)束
			fruits.slice(3,6);
			console.log(fruits);
			//刪除數(shù)組中某些元素
			//從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>