JavaScript中对数组与对象数组进行排序

￡神魔★判官ぃ 2021-11-04 22:52 564阅读 0赞

**一、对数组进行排序：sort()**

我们知道，在js中，我们可以采用sort()方法对数组进行排序，但是它并不是万能的，下面就具体剖析下：

**1、sort()方法说明**

该方法以字母顺序对数组进行排序，如下：

let fruits = ["Banana", "Orange", "Bpple", "Mango"];
    fruits.sort();
    fruits // ["Apple", "Banana", "Mango", "Orange"]

**2、说明：**

sort()是从小到大排序，果我们想要从大到小的顺序排列该如何解决呢？利用reverse()来解决！具体实现步骤如下：

1>、先采用sort()进行排序；

2>、然后采用reverse()方法将排好序的数组进行反转。

reverse()：反转数组

具体代码实现如下：

fruits.sort(); // 对 fruits 中的元素进行排序
    fruits.reverse();
    fruits // ["Orange", "Mango", "Banana", "Apple"]

上面是对字符串进行排序，那么如果数组数据成员的类型是Number（即数值型）会出现怎样的结果呢？看下面的

一个示例：

let arr3 = [240, 25, 10, 300, 310];
    // 排序
    arr3.sort();
    arr3 // [10, 240, 25, 300, 310]

从结果得知，并不是我们想象中的结果。**为什么会这样呢？**

因为sort()是对字符串进行排序。但是如果数组元素为数字Number类型，会出错，因为它与字符串比较大小的规则不一样。字符

串排序(比较大小)的规则：

字符串按字符在unicode中的码位(ascall码值)来比较大小。从第一个依次对应往后比,直到找到不相同的字符，然后拿出

其 ascall码值比较以此来决胜~

下面以具体的示例（arr3）来说明具体演示下：

如果数字按照字符串来排序，则 "25" 大于 "240"， 因为 "5" 大于 "4"。所以，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：

arr3.sort(function(a, b) {
    	return a - b
    });
    // 此时  
    arr3 // [10, 25, 240, 300, 310]
    
    // 想要降序排序,可以这样改:
    arr3.sort(function(a, b) {
    		return b - a
    });
    arr3 // [310, 300, 240, 25, 10]

**比值函数原理分析:**

**比较函数的目的是定义另一种排序顺序。**

比较函数应该返回一个负， 零或正值， 这取决于参数a与b的大小。

function(a, b) {
    	return a - b
    }

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。举例说明：

arr3数组中的，240与25

当比较 240 和 25 时，sort() 方法会调用比较函数 function(240,25)。该函数计算 240-25，然后返回 215（正值）排序函数将把

240 排序为比 25 更高的值。

**二、以随机顺序排序数组**

在实际项目中,假设有一个列表展示，每次进页面需要展示不同的数据-->即进行数据刷新（达到更新的目的）,利用随机数组排序

能达到需求.不过这个实时刷新一般由后端实现，无须前端去关心。

arr3.sort(function(a, b) {
    	return 0.5 - Math.random()
    		});
    arr3

![20190814184135858.gif][]

**三、查找数组中的最值**

JavaScript 不提供查找数组中最大或最小数组值的内建函数。不过， 在对数组进行排序之后，能够使用索引来获得最高或最低

值。 如果仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法。

改进的方法：Math.max() / Math.min()求最值

可以使用 Math.max.apply 来查找数组中的最高值：

// 可以使用 Math.max.apply 来查找数组中的最高值：
    function myArrayMax(arr) {
    		return Math.max.apply(null, arr);
    }
    
    // 可以使用 Math.min.apply 来查找数组中的最低值：
    function myArrayMax(arr) {
    		return Math.min.apply(null, arr);
    }

Math.max 参数里面不支持Math.max(\[param1,param2,...\]) 也就是数组。但是它支持Math.max(param1,param2,…)。所以的话，

利用apply()方法与es6中的数组扩展符（...）来解决Math.max/Math.min参数的问题。

apply():除了改变this的指向，它还有个巧妙的用处，可以将一个数组默认的转换为一个参数列表：(\[param1,param2,param3\] 转

换为 param1,param2,param3) 。

es6扩展具体看这里：[https://blog.csdn.net/Syleapn/article/details/98510550][https_blog.csdn.net_Syleapn_article_details_98510550]

所以的话：Math.max(1,2,3) <=> Math.max.apply(null,\[1,2,3\])

<=> Math.max(...\[1,2,3\])

这块在调用的时候第一个参数给了一个null，这个是因为没有对象去调用这个方法，我只需要用这个方法帮我运算,得到返回的结

果就行,.所以直接传递了一个null过去。

**四、对象数组进行排序**

//JavaScript 数组经常会包含对象：
    let object_array = [{
    		name: "kali",
    		age: 28
    	},
    	{
    		name: "Sida",
    		age: 12
    	},
    	{
    		name: "weilian",
    		age: 100
    	}
    ]

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对对象数组进行排序。

解决方法是通过比较函数来对比属性值：

// 比较数值属性
    			object_array.sort(function(a, b) {
    				return a.age - b.age
    			});
    			object_array
    			console.log(object_array)
    
    			// 比较字符串属性
    			object_array.sort(function(a, b) {
    				// 先要全部转换为大写或小写字母,由于用到了字符的ASCII
    				// 不转换就会有问题导致~
    				// 转化为小写字母
    				var x = a.name.toLowerCase();
    				var y = b.name.toLowerCase();
    				// 或转化为大写字母
    				// var x = a.name.toUpperCase();
    				// var y = b.name.toUpperCase();
    				// 
    				if (x < y) {
    					return -1;
    				}
    				if (x > y) {
    					return 1;
    				}
    				return 0;
    			});

[20190814184135858.gif]: /images/20211104/36d5ce21041448d28d90511d1ecdf0c9.png
[https_blog.csdn.net_Syleapn_article_details_98510550]: https://blog.csdn.net/Syleapn/article/details/98510550