js中数组的另外一些方法

最新推荐文章于 2023-10-22 11:18:03 发布

I am the sun?

最新推荐文章于 2023-10-22 11:18:03 发布

阅读量6.9k

点赞数 1

分类专栏： js 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/fighting_dream/article/details/113790077

版权

js 专栏收录该内容

27 篇文章

订阅专栏

方法一：contact()方法

contact()可以连接两个或者多个数组,并将新的数组作为函数返回值返回,不会改变原数组
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
//	contact()可以连接两个或者多个数组,并将新的数组作为函数返回值返回,不会改变原数组
	arr = [1,2,3,4,5];
	arr2 = [6,7,8,9];
	result = arr.concat(arr2);
//	原数组不会变化
	console.log("原数组1：" + arr + "，原数组2：" + arr2);
	console.log("连接后的数组：" + result);
	</script>
</head>
<body>
	
</body>
</html>

运行结果：
在这里插入图片描述

方法二：join()方法

join()可以将一个数组转为字符串,并将新的数组作为函数返回值返回,不会改变原数组
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
//	join()可以将一个数组转为字符串,并将新的数组作为函数返回值返回,不会改变原数组
	arr = [1,2,3,4,5];
//	没改变前数组的类型
	console.log(typeof arr);
	result = arr.join();
//	改变后数组的类型
	console.log(typeof result);
//	原数组不会变化
	console.log("原数组：" + arr);
	console.log("转为字符串后的数组：" + result);
	</script>
</head>
<body>
	
</body>
</html>

运行结果：
在这里插入图片描述
这里可能看不出数组和字符串的区别，因为join（）不加参数时，就默认是逗号进行连接，现在我改一下。
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
//	join()可以将一个数组转为字符串,并将新的数组作为函数返回值返回,不会改变原数组
	arr = [1,2,3,4,5];
//	没改变前数组的类型
	console.log(typeof arr);
//	用空格连接
	result = arr.join("  ");
//	改变后数组的类型
	console.log(typeof result);
//	原数组不会变化
	console.log("原数组：" + arr);
	console.log("转为字符串后的数组：" + result);
	</script>
</head>
<body>
	
</body>
</html>

运行结果：
在这里插入图片描述

方法三：reverse()方法

reverse()可以将一个数组前后顺序调转,会改变原数组
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
//	reverse()可以将一个数组前后顺序调转,会改变原数组
	arr = [1,2,3,4,5];
//	没改变前的数组
	console.log("没倒转前的数组：" + arr);
//	进行倒转
	arr.reverse();
//	原数组会变化
	console.log("新数组：" + arr);
	</script>
</head>
<body>
	
</body>
</html>

运行结果：
在这里插入图片描述

方法四：sort()方法

sort()可以将一个数组按照unicode编码方式进行排序,会改变原数组
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
//	sort()可以将一个数组按照unicode编码方式进行排序,会改变原数组
	arr = ['a','b','d','c','g'];
//	没改变前的数组
	console.log("原数组：" + arr);
//	进行排序
	arr.sort();
//	原数组会变化
	console.log("新数组：" + arr);
	</script>
</head>
<body>
</body>
</html>

运行结果：
在这里插入图片描述

但是，这里疏忽了一个bug，假如是数字呢？
如下图：
在这里插入图片描述

我们可以在sort（）方法中添加一个回调函数【因为浏览器会分别使用数组中的元素作为实参去调用回调函数】。
自己来制定排序规则要升序，就a-b【a-b>0,则a>b,则ab要调换位置】

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
//	sort()可以将一个数组按照unicode编码方式进行排序,会改变原数组
	arr = [1,2,3,4,3,2,3,8,11,111,222,33];
//	没改变前的数组
	console.log("原数组：" + arr);
//	进行排序
	arr.sort(function(a,b){
		return a-b;
	});
//	原数组会变化
	console.log("新数组：" + arr);
	</script>
</head>
<body>
</body>
</html>

运行结果：
在这里插入图片描述

要降序，就b-a;【b-a<0,则b<a,则ab不用调换位置】

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
//	sort()可以将一个数组按照unicode编码方式进行排序,会改变原数组
	arr = [1,2,3,4,3,2,3,8,11,111,222,33];
//	没改变前的数组
	console.log("原数组：" + arr);
//	进行排序
	arr.sort(function(a,b){
		return b-a;
	});
//	原数组会变化
	console.log("新数组：" + arr);
	</script>
</head>
<body>
</body>
</html>

运行结果：
在这里插入图片描述