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;
			});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章