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

一、对数组进行排序: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


           

三、查找数组中的最值

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

所以的话: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;
			});
发布了32 篇原创文章 · 获赞 57 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/Syleapn/article/details/98775561