JavaScript的Array对象

liyjioo

2142人浏览 · 2024-04-20 16:20:45

liyjioo · 2024-04-20 16:20:45 发布

1.概念:Array对象是JavaScript的内置对象,用于创建和操作一个数组,并支持多种构造函数。数组在JavaScript中是用[ ]包裹的而不是{ }。索引从0到size-1,并且可以通过[n]来访问。

2.数组创建方法:

创造的数组可以内容的数据类型可以不同

1.字面创建:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String对象</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){//当页面加载后运行匿名函数
			var arr=[1,2,3,4];//直接使用[]创建
			document.write(arr);//在网页上写下数组
		}
	</script>
</body>
</html>

结果如左

2.Array构造函数创建

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var arr=new Array(1,2,3,4);//使用Array的构造方法
			document.write(arr);
		}
	</script>
</body>
</html>

结果如左

注意:如果只输入一个参数用于构造,那么会默认用于创建大小为参数个的数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var arr=new Array(4);//创建大小为4的数组
			document.write(arr);
		}
	</script>
</body>
</html>

创建后产生的数组在网页中的表示如下

即为4个空值,使用三个逗号隔开

如果创造的数组大小小于指定的下标时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var arr=new Array(4);//将数组大小设置为4
			arr[4] = 4;//这里的下标为4已经超出了原来数组的大小
			arr[5] = 5;
			arr[7] = 7;
			document.write(arr);
		}
	</script>
</body>
</html>

这样创建后,数组会被扩大,同时没有输入的值为空值

如果输入的是负数是无效的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var arr=new Array(4);
			arr[-1] = -1;
            //在下标为-1处写入-1,但是与一般的-1表示最后一位不同,这样的操作是无效的
			document.write(arr);
		}
	</script>
</body>
</html>

结果如左

如果输入小数,就看小数的小数位是否为0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var arr=new Array(4);
			arr[1.0] = 1.0;//如果输入1.0是有效的,如果输入1.2/1.3等等后面不为0就是无效的
			document.write(arr);
		}
	</script>
</body>
</html>

结果如左,如果输入1.0会默认变为1,如果是其他小数会正常显示

3.静态方法(这些方法如果没有输入参数,那么列表就不会被创建)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 =array.of(); 
			var val = arr1.pop();
			document.write(arr1,'-----',val);
		}
	</script>
</body>
</html>

如上代码,浏览器中没有任何显示,Array.from()也是如此

1)使用Array.of(数组内的元素)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			const arr = Array.of(1, 2, 3);//创建了一个元素为1，2，3数组
			document.write(arr);
		}
	</script>
</body>
</html>

2)Array.from(数组对象/可迭代对象)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3]); // 使用列表对象创建
			arr2 = Array.from('123'); // 使用可迭代对象创建
			document.write(arr1,arr2);
		}
	</script>
</body>
</html>

3.数组Array的方法

1)concat方法用于连接两个或多个数组,注意该方法返回一个拼接后的数组,原数组不变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3]); 
			arr2 = Array.from('hello'); 
			arr3=Array.from('world');
			var arr4 = arr1.concat(arr2,arr3);//concat连接数组,多个数组就使用逗号隔开
			document.write(arr4);
		}
	</script>
</body>
</html>

结果如左

i.同样的,也可以使用数组自己与自己结合如var arr4 = arr1.concat(arr1);

ii.var arr4 = arr1.concat();如果像这样什么都没写,那么arr4就与arr1相同

iii.concat还可用于链式调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3]); 
			arr2 = Array.from('hello'); 
			arr3=Array.from('world');
			var arr4 = arr1.concat(arr2).concat(arr3);//链式调用
			document.write(arr4);
		}
	</script>
</body>
</html>

2)reverse对Array数组进行倒序排列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3]); 
			var arr2 = arr1.reverse();//对arr1倒序,赋值给arr2
			document.write(arr1,'-----',arr2);
		}
	</script>
</body>
</html>

结果如左,可见reverse是能对原数组进行修改的

3)pop删除最后一个元素,并且返回这个元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3,true,'hello','1.1']); 
			var val = arr1.pop();//删除了最后一个元素1.1并且修改了原数组,返回了1.1
			document.write(arr1,'-----',val);
		}
	</script>
</body>
</html>

结果如左

i.如果对空数组进行pop,会返回undefined

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = []; 
			var val = arr1.pop();//对空数组pop
			document.write(arr1,'-----',val);
		}
	</script>
</body>
</html>

结果如左

4)push(元素)添加某个或多个元素到数组后面,并且返回这些新数组的长度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3,true,'hello','1.1']); 
			var val = arr1.push("12345");//在尾部加上12345,这些元素没有被分开而是在一起
			document.write(arr1,'------',val);
		}
	</script>
</body>
</html>

结果如左

此处的12345与上方的Array.from()静态方法输入可迭代对象不同,这里面的12345被算作一个元素

5)shift删除第一个元素并返回其值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3,true,'hello','1.1']); 
			var val = arr1.shift();//删除第一个元素
			document.write(arr1,'------',val);
		}
	</script>
</body>
</html>

结果如左

与pop相同,如果删除时数组为空,返回undefined

6)unshift()添加元素到第一位,并返回新数组的长度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 6,4,5,3]); 
			var val = arr1.unshift(10);//unshift添加元素到数组最前面
			document.write(arr1,'----',val);
		}
	</script>
</body>
</html>

结果如左

7)slice(m,n)从下标m到n返回一个数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3,true,'hello','1.1']); 
			var val = arr1.slice(1,2);//取出下标为1的子数组
			document.write(arr1,'------',val);
		}
	</script>
</body>
</html>

结果如左,可见slice不会影响原数组

i.第二个参数如果超出数组长度就默认为输出到末尾

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3,true,'hello','1.1']); 
			var val = arr1.slice(1,100);//超出数组长度也能输出
			document.write(arr1,'------',val);
		}
	</script>
</body>
</html>

结果如左

ii.-1在这里面表示数组最后一个元素,与String的indexof和lastIndexOf不同,详见JavaScript的String对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 3,true,'hello','1.1']); 
			var val = arr1.slice(-1,100);
			document.write(arr1,'------',val);
		}
	</script>
</body>
</html>

结果如左

8)sort()排序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 6,4,5,3]); 
			arr1.sort();//sort默认升序排列
			document.write(arr1);
		}
	</script>
</body>
</html>

sort默认升序排列,所以结果为

但是如果想要降序排列,可以使用箭头函数

格式为(a,b)=>a/b-b/a

前面的(a,b)表示传入的两个相邻的参数

=>为箭头函数的符号

后面的减号就是主体部分,如果后面的是负数,那么就不换位置,但是相减为正数就互换位置

例如想要降序,就可以写(a,b)=>b-a,当b大于a时,相减为正数互换位置,其实就是大的b被换到了小的a的前面,这样就完成了降序

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			arr1 = Array.from([1, 2, 6,4,5,3]); 
			arr1.sort((a,b)=>b-a);//sort的降序排列
			document.write(arr1);
		}
	</script>
</body>
</html>

结果如左