JS對象數組排序方法測試代碼示例
更新時間：2024年06月20日 10:36:25 作者：從小白小菜開始
這篇文章主要給大家介紹了關于JS對象數組排序方法測試的相關資料,在 相信大家對數組排序都不陌生,在開發(fā)中我們通常會使用sort方法進行數組的排序,需要的朋友可以參考下
一.Array.prototype.sort()
1.默認排序 sort()
sort() 方法就地對數組的元素進行排序，并返回對相同數組的引用。默認排序是將元素轉換為字符串，然后按照它們的 UTF-16 碼元值升序排序。
由于它取決于具體實現(xiàn)，因此無法保證排序的時間和空間復雜度。
如果想要不改變原數組的排序方法，可以使用 toSorted()。
說明：兩個重點。1、會改變原數組。2、默認按將元素轉換為字符串排序。
const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // Expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // Expected output: Array [1, 100000, 21, 30, 4]
2.比較函數 sort(compareFn)
定義排序順序的函數。返回值應該是一個數字，其符號表示兩個元素的相對順序：如果 a 小于 b，返回值為負數，如果 a 大于 b，返回值為正數，如果兩個元素相等，返回值為 0。NaN 被視為 0。
說明：自定義比較函數返回一個數值。一般為1，-1，0.
function compareFn(a, b) {
if (根據排序標準，a 小于 b) {
return -1;
}
if (根據排序標準，a 大于 b) {
return 1;
}
// a 一定等于 b
return 0;
}
const stringArray = ["Blue", "Humpback", "Beluga"];
const numberArray = [40, 1, 5, 200];
const numericStringArray = ["80", "9", "700"];
const mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
function compareNumbers(a, b) {
return a - b;
}
stringArray.sort(); // ['Beluga', 'Blue', 'Humpback']
numberArray.sort(compareNumbers); // [1, 5, 40, 200]
numericStringArray.sort(); // ['700', '80', '9']
numericStringArray.sort(compareNumbers); // ['9', '80', '700']
mixedNumericArray.sort(compareNumbers); // [1, 5, '9', 40, '80', 200, '700']
二.對象數組
let arr = [
{ name: 'Zhang', age: 25, score: 85 },
{ name: 'Li', age: 20, score: 90 },
{ name: 'Wang', age: 22, score: 80 },
{ name: 'Zhao', age: 22, score: 92 }
];
// 按 age 升序排序，如果 age 相同則按 score 降序排序
arr.sort((a, b) => {
if (a.age !== b.age) {
return a.age - b.age; // 按 age 升序排序
} else {
return b.score - a.score; // 如果 age 相同，按 score 降序排序
}
});
console.log(arr);[
{ name: 'Li', age: 20, score: 90 },
{ name: 'Wang', age: 22, score: 80 },
{ name: 'Zhao', age: 22, score: 92 },
{ name: 'Zhang', age: 25, score: 85 }
]三.通用方法
1.指定單一對象元素屬性
function sortObjectsByProperty(array, property) {
return array.sort(function(a, b) {
if (a[property] < b[property]) {
return -1;
} else if (a[property] > b[property]) {
return 1;
} else {
return 0;
}
});
}
var objects = [
{ name: 'Apple', price: 15 },
{ name: 'Banana', price: 10 },
{ name: 'Cherry', price: 20 }
];
var sortedObjects = sortObjectsByProperty(objects, 'price');
console.log(sortedObjects);
輸出：
[
{ name: 'Banana', price: 10 },
{ name: 'Apple', price: 15 },
{ name: 'Cherry', price: 20 }
]2.指定對象元素多屬性
function sortObjectsByProperties(array, ...properties) {
return array.sort((a, b) => {
for (const property of properties) {
if (a[property] < b[property]) {
return -1;
} else if (a[property] > b[property]) {
return 1;
}
// 如果屬性相等，則繼續(xù)比較下一個屬性
}
// 所有屬性都相等
return 0;
});
}
// 示例對象數組
const employees = [
{ name: 'Alice', age: 30, salary: 50000 },
{ name: 'Bob', age: 25, salary: 60000 },
{ name: 'Charlie', age: 35, salary: 55000 },
];
// 使用剩余參數傳入多個屬性進行排序
const sortedEmployees = sortObjectsByProperties(employees, 'age', 'salary');
console.log(sortedEmployees);輸出：
[
{ name: 'Bob', age: 25, salary: 60000 }, // 年齡最小
{ name: 'Alice', age: 30, salary: 50000 }, // 年齡次小，但薪水低于Charlie
{ name: 'Charlie', age: 35, salary: 55000 } // 年齡最大，薪水也最高（在同齡人中）
]四. 對象數組漢字按拼音排序
1.使用stringObject.localeCompare(target)
const chinesePeople = [
{ name: '張三', age: 30 },
{ name: '李四', age: 25 },
{ name: '王五', age: 35 },
{ name: '趙六', age: 40 },
];
// 使用 localeCompare 對名字屬性進行排序
chinesePeople.sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'));
console.log(chinesePeople);輸出：
[
{ name: '李四', age: 25 },
{ name: '王五', age: 35 },
{ name: '張三', age: 30 },
{ name: '趙六', age: 40 }
]2.使用第三方庫
如果你想要根據漢字拼音對對象數組進行排序，你需要先將漢字轉換為拼音，然后根據拼音進行排序。這通常需要使用到第三方庫來實現(xiàn)漢字到拼音的轉換，比如 pinyin 庫。
npm install pinyin
const pinyin = require('pinyin');
function sortObjectsByChinesePinyin(array, propertyName) {
return array.sort((a, b) => {
const aPinyin = pinyin(a[propertyName], { style: pinyin.STYLE_NORMAL, heteronym: false }).join('');
const bPinyin = pinyin(b[propertyName], { style: pinyin.STYLE_NORMAL, heteronym: false }).join('');
return aPinyin.localeCompare(bPinyin);
});
}
// 示例對象數組
const chineseNames = [
{ name: '張三', age: 30 },
{ name: '李四', age: 25 },
{ name: '王五', age: 35 },
];
// 使用漢字拼音對名字進行排序
const sortedChineseNames = sortObjectsByChinesePinyin(chineseNames, 'name');
console.log(sortedChineseNames);輸出：
[
{ name: '李四', age: 25 }, // 'lǐ sì'
{ name: '王五', age: 35 }, // 'wáng wǔ'
{ name: '張三', age: 30 } // 'zhāng sān'
]強調：如果用VS調試，別忘記了在luanch.jsion文件中添加 "console": "integratedTerminal",這句話，不然會報錯。還看不到運行結果。
總結
到此這篇關于JS對象數組排序方法測試的文章就介紹到這了,更多相關JS對象數組排序方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JS實現(xiàn)點擊下拉列表文本框中出現(xiàn)對應的網址,點擊跳轉按鈕實現(xiàn)跳轉
這篇文章主要介紹了JS實現(xiàn)點擊下拉列表文本框中出現(xiàn)對應的網址,點擊跳轉按鈕實現(xiàn)跳轉,本文給大家分享實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了JS數組去重的常用4種方法,ES6的Set類數組去重,for循環(huán)嵌套for循環(huán),indexOf去重,利用filter需要的朋友可以參考下2022-04-04
js禁止頁面使用右鍵(簡單示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
本文通過實例代碼給大家介紹了bootstrap導航條效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-05-05
js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
JavaScript實現(xiàn)的encode64加密算法實例分析
這篇文章主要介紹了JavaScript實現(xiàn)的encode64加密算法,實例分析了javascript處理encode64編碼針對字符串加密的技巧,非常簡潔實用,需要的朋友可以參考下2015-04-04
大數，即超出語言所能表示的數字最大范圍的數字，那么如何實現(xiàn)兩個大數相乘呢？下面有個不錯的方法，大家可以參考下2014-04-04
這篇文章主要為大家詳細介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JavaScript中Dom操作,結合實例形式詳細分析了javascript針對dom元素節(jié)點增刪改查相關操作技巧與注意事項,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了函數window.open實現(xiàn)關閉所有的子窗口的相關資料，需要的朋友可以參考下。2015-08-08