js中数组的另外一些方法

r囧r小猫 2022-10-29 09:23 308阅读 0赞

## 方法一：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>

运行结果：  
![在这里插入图片描述][20210211140914834.png]

## 方法二：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>

运行结果：  
![在这里插入图片描述][20210211141204510.png]  
**这里可能看不出数组和字符串的区别，因为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>

运行结果：  
![在这里插入图片描述][20210211141357317.png]

## 方法三：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>

运行结果：  
![在这里插入图片描述][20210211141843807.png]

## 方法四：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>

运行结果：  
![在这里插入图片描述][20210211143441333.png]

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

**我们可以在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>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]

要降序，就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>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]

[20210211140914834.png]: /images/20221024/9315d18bd48d43a29b7036990e4ac3fe.png
[20210211141204510.png]: /images/20221024/78e4936a0de34082a7fbd1ff08fee357.png
[20210211141357317.png]: /images/20221024/f47b0b8310c7412d94d5f256a4a2e1a7.png
[20210211141843807.png]: /images/20221024/b24fcb94e85f4fdf83d84aadbdb549a8.png
[20210211143441333.png]: /images/20221024/a33753433ad74175b5d084efb1cbd274.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/f0ee5ea5f0c343deb24d669349a65163.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/bf142b925fdd4669a7d7c0220c534601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/bbd94a523f864ba885d65ab3cee338c5.png