JavaScripts數(shù)組里的對(duì)象排序的24個(gè)方法(最新整理收藏)
更新時(shí)間：2025年01月15日 11:05:42 作者：BIBOR
文章介紹了24種在JavaScript中對(duì)數(shù)組進(jìn)行排序的方法,每種方法都有具體的示例和應(yīng)用場(chǎng)景,適合不同情況下的排序需求,感興趣的朋友跟隨小編一起看看吧
1. 使用 Array.prototype.sort()
這是最基本、也是最常用的方法。sort() 方法會(huì)原地修改數(shù)組，并返回排序后的數(shù)組。你需要傳入一個(gè)比較函數(shù)來(lái)定義排序邏輯。
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
// 按照年齡升序排序
array.sort((a, b) => a.age - b.age);
console.log(array);
// 按照名字字母順序排序
array.sort((a, b) => a.name.localeCompare(b.name));
console.log(array);2. 使用 Array.prototype.map() 和 Array.prototype.sort()
這種方法適用于當(dāng)你不想改變?cè)紨?shù)組時(shí)，可以先創(chuàng)建一個(gè)新的數(shù)組，然后進(jìn)行排序。
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
const sortedArray = array
.map(item => item) // 復(fù)制數(shù)組
.sort((a, b) => a.age - b.age);
console.log(sortedArray);
console.log(array); // 原數(shù)組未改變3. 使用 Array.prototype.slice() 和 Array.prototype.sort()
同樣是為了不改變?cè)瓟?shù)組，這種方法利用 slice() 創(chuàng)建一個(gè)數(shù)組的淺拷貝，然后進(jìn)行排序。
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
const sortedArray = array.slice().sort((a, b) => a.age - b.age);
console.log(sortedArray);
console.log(array); // 原數(shù)組未改變4. 使用 Array.prototype.reduce() 實(shí)現(xiàn)自定義排序
如果你需要對(duì)數(shù)組進(jìn)行復(fù)雜的排序操作，可以使用 reduce() 方法。
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
const sortedArray = array.reduce((accumulator, currentValue) => {
let i = 0;
while (i < accumulator.length && accumulator[i].age < currentValue.age) {
i++;
}
accumulator.splice(i, 0, currentValue);
return accumulator;
}, []);
console.log(sortedArray);5. 使用第三方庫(kù)（如 Lodash）
Lodash 提供了更強(qiáng)大的排序功能，如多屬性排序。你需要先安裝 Lodash：
npm install lodash
然后使用 Lodash 的 _.orderBy 方法：
const _ = require('lodash');
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
// 按照多個(gè)屬性排序
const sortedArray = _.orderBy(array, ['age', 'name'], ['asc', 'asc']);
console.log(sortedArray);6. 使用自定義比較函數(shù)進(jìn)行多字段排序
如果你希望根據(jù)多個(gè)字段進(jìn)行排序，可以編寫(xiě)自定義的比較函數(shù)。
const array = [
{ name: 'Alice', age: 25, height: 165 },
{ name: 'Bob', age: 22, height: 175 },
{ name: 'Charlie', age: 22, height: 170 }
];
// 按年齡升序，如果年齡相同按身高降序
array.sort((a, b) => {
if (a.age !== b.age) {
return a.age - b.age; // 年齡升序
} else {
return b.height - a.height; // 年齡相同，身高降序
}
});
console.log(array);7. 使用穩(wěn)定排序庫(kù)（如 array-stable）
在某些情況下，你可能需要一個(gè)穩(wěn)定的排序算法。JavaScript 的原生 sort() 方法在不同瀏覽器上可能不是穩(wěn)定的?？梢允褂?array-stable 庫(kù)來(lái)確保穩(wěn)定排序。
安裝該庫(kù)：
npm install array-stable
使用示例：
const stable = require('array-stable'); // 導(dǎo)入穩(wěn)定排序庫(kù)
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
stable.sort(array, (a, b) => a.age - b.age); // 按年齡升序穩(wěn)定排序
console.log(array);8. 使用 Intl.Collator 進(jìn)行本地化排序
對(duì)于字符串排序，特別是涉及到國(guó)際化時(shí)，可以使用 Intl.Collator 來(lái)處理。
const array = [
{ name: 'éclair', age: 25 },
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 30 }
];
const collator = new Intl.Collator('fr', { sensitivity: 'base' }); // 創(chuàng)建法語(yǔ)語(yǔ)言環(huán)境的排序器
array.sort((a, b) => collator.compare(a.name, b.name)); // 按名稱排序
console.log(array);9. 使用 Proxy 對(duì)象包裝數(shù)組
如果你希望在數(shù)組排序前后做一些額外操作，可以使用 Proxy 對(duì)象。
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
const handler = {
set(target, property, value) {
console.log(`Setting value ${value} on property ${property}`);
target[property] = value;
return true;
}
};
const proxyArray = new Proxy(array, handler); // 使用 Proxy 包裝數(shù)組
proxyArray.sort((a, b) => a.age - b.age); // 對(duì)代理數(shù)組進(jìn)行排序
console.log(proxyArray);10. 使用 TypedArray 進(jìn)行數(shù)值排序
如果數(shù)組中的對(duì)象包含大量數(shù)值，并且排序性能非常關(guān)鍵，可以考慮將數(shù)值提取到 TypedArray 中進(jìn)行排序，然后映射回原數(shù)組。
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
const ages = new Uint8Array(array.map(item => item.age)); // 提取年齡到 Uint8Array 中
const sortedIndices = Array.from(ages)
.map((age, index) => ({ age, index }))
.sort((a, b) => a.age - b.age)
.map(item => item.index);
const sortedArray = sortedIndices.map(index => array[index]); // 根據(jù)排序后的索引重構(gòu)數(shù)組
console.log(sortedArray);11. 按照對(duì)象屬性值的字符串長(zhǎng)度排序
const array = [
{ name: 'Alice', description: 'A short description' },
{ name: 'Bob', description: 'A very long and detailed description' },
{ name: 'Charlie', description: 'Medium description' }
];
// 按描述的長(zhǎng)度升序排列
array.sort((a, b) => a.description.length - b.description.length);
console.log(array);12. 按照日期字段進(jìn)行排序
const array = [
{ event: 'Event 1', date: new Date('2023-05-01') },
{ event: 'Event 2', date: new Date('2022-08-15') },
{ event: 'Event 3', date: new Date('2024-01-10') }
];
// 按日期升序排列
array.sort((a, b) => a.date - b.date);
console.log(array);13. 使用 reduce 和 Object.entries 對(duì)對(duì)象數(shù)組進(jìn)行排序
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
// 使用 reduce 和 Object.entries 對(duì)對(duì)象數(shù)組按年齡升序排序
const sortedArray = Object.values(array.reduce((acc, obj) => {
acc[obj.age] = obj;
return acc;
}, {}));
console.log(sortedArray);14. 按照多個(gè)條件進(jìn)行復(fù)雜排序
const array = [
{ name: 'Alice', age: 25, height: 165 },
{ name: 'Bob', age: 22, height: 175 },
{ name: 'Charlie', age: 22, height: 170 },
{ name: 'David', age: 22, height: 175 }
];
// 按年齡升序，如果年齡相同，再按身高降序，如果年齡和身高都相同，再按姓名字母升序
array.sort((a, b) => {
if (a.age !== b.age) {
return a.age - b.age; // 年齡升序
} else if (a.height !== b.height) {
return b.height - a.height; // 身高降序
} else {
return a.name.localeCompare(b.name); // 姓名字母升序
}
});
console.log(array);15. 基于對(duì)象某一屬性的數(shù)值范圍排序
const array = [
{ name: 'Alice', score: 85 },
{ name: 'Bob', score: 75 },
{ name: 'Charlie', score: 95 },
{ name: 'David', score: 80 }
];
// 按分?jǐn)?shù)區(qū)間排序：低于80分、80到90分之間、大于90分
array.sort((a, b) => {
if (a.score < 80 && b.score >= 80) {
return -1; // a 在 b 之前
} else if (a.score >= 80 && a.score <= 90 && (b.score < 80 || b.score > 90)) {
return -1; // a 在 b 之前
} else if (a.score > 90 && b.score <= 90) {
return 1; // a 在 b 之后
} else {
return 0;
}
});
console.log(array);16. 使用 Map 進(jìn)行自定義鍵排序
const array = [
{ name: 'Alice', priority: 'medium' },
{ name: 'Bob', priority: 'low' },
{ name: 'Charlie', priority: 'high' },
{ name: 'David', priority: 'medium' }
];
const priorityOrder = new Map([
['low', 1],
['medium', 2],
['high', 3]
]);
// 按優(yōu)先級(jí)排序
array.sort((a, b) => priorityOrder.get(a.priority) - priorityOrder.get(b.priority));
console.log(array);17. 按照嵌套對(duì)象屬性排序
const array = [
{ id: 1, details: { age: 25 } },
{ id: 2, details: { age: 30 } },
{ id: 3, details: { age: 20 } }
];
// 按嵌套對(duì)象的年齡屬性升序排序
array.sort((a, b) => a.details.age - b.details.age);
console.log(array);18. 按照字符串中的數(shù)字進(jìn)行排序
const array = ['item20', 'item5', 'item12', 'item1'];
// 按字符串中的數(shù)字部分進(jìn)行升序排序
array.sort((a, b) => {
const numA = parseInt(a.replace(/\D/g, ''));
const numB = parseInt(b.replace(/\D/g, ''));
return numA - numB;
});
console.log(array);19. 按照布爾值進(jìn)行排序
const array = [
{ name: 'Alice', isActive: true },
{ name: 'Bob', isActive: false },
{ name: 'Charlie', isActive: true },
{ name: 'David', isActive: false }
];
// 按布爾值排序，false 在前，true 在后
array.sort((a, b) => a.isActive - b.isActive);
console.log(array);20. 按照多個(gè)對(duì)象數(shù)組的屬性組合排序
const array = [
{ firstName: 'Alice', lastName: 'Smith' },
{ firstName: 'Bob', lastName: 'Brown' },
{ firstName: 'Charlie', lastName: 'Smith' },
{ firstName: 'David', lastName: 'Johnson' }
];
// 先按姓氏排序，如果姓氏相同，再按名字排序
array.sort((a, b) => {
if (a.lastName !== b.lastName) {
return a.lastName.localeCompare(b.lastName); // 按姓氏排序
} else {
return a.firstName.localeCompare(b.firstName); // 按名字排序
}
});
console.log(array);21. 基于自定義權(quán)重排序
const array = [
{ name: 'Alice', role: 'user' },
{ name: 'Bob', role: 'admin' },
{ name: 'Charlie', role: 'guest' },
{ name: 'David', role: 'user' }
];
const roleWeights = {
'guest': 1,
'user': 2,
'admin': 3
};
// 按角色權(quán)重排序
array.sort((a, b) => roleWeights[a.role] - roleWeights[b.role]);
console.log(array);22. 按照隨機(jī)順序排序
const array = [1, 2, 3, 4, 5]; // 使用 Math.random() 將數(shù)組隨機(jī)打亂 array.sort(() => Math.random() - 0.5); console.log(array);
23. 按照數(shù)組中對(duì)象的多個(gè)數(shù)值屬性排序
const array = [
{ name: 'Alice', score1: 90, score2: 85 },
{ name: 'Bob', score1: 85, score2: 95 },
{ name: 'Charlie', score1: 80, score2: 75 },
{ name: 'David', score1: 90, score2: 80 }
];
// 先按 score1 排序，如果 score1 相同，再按 score2 排序
array.sort((a, b) => {
if (a.score1 !== b.score1) {
return a.score1 - b.score1; // 按 score1 排序
} else {
return a.score2 - b.score2; // 按 score2 排序
}
});
console.log(array);24. 按照對(duì)象屬性的存在性排序
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob' },
{ name: 'Charlie', age: 30 },
{ name: 'David' }
];
// 有 age 屬性的對(duì)象在前，沒(méi)有的在后
array.sort((a, b) => ('age' in a ? -1 : 1) - ('age' in b ? -1 : 1));
console.log(array);到此這篇關(guān)于JavaScripts數(shù)組里的對(duì)象排序的24個(gè)方法的文章就介紹到這了,更多相關(guān)js數(shù)組對(duì)象排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS中typeof與instanceof之間的區(qū)別總結(jié)
本文是對(duì)JS中typeof與instanceof之間的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼
這篇文章主要介紹了js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼,涉及javascript操作頁(yè)面元素的布局及屬性的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫(xiě)簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
JS動(dòng)態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行解決
這篇文章主要給大家介紹了關(guān)于JS動(dòng)態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12
js實(shí)現(xiàn)帶進(jìn)度條提示的多視頻上傳功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶進(jìn)度條提示的多視頻上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
當(dāng)前流行的JavaScript代碼風(fēng)格指南
這篇文章主要介紹了當(dāng)前流行的JavaScript代碼風(fēng)格指南,同時(shí)推薦了一款風(fēng)格檢驗(yàn)工具jshint,可以配合大多數(shù)的編輯器統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格,需要的朋友可以參考下2014-09-09
本文給大家分享的是使用原生javascript實(shí)現(xiàn)的俄羅斯方塊的代碼，還沒(méi)有很完善，這里放出來(lái)，算是拋磚引玉吧，希望小伙伴們能夠喜歡。2015-03-03
Js中FileReader讀取文件內(nèi)容方法詳解(async/await)
這篇文章主要給大家介紹了關(guān)于Js中FileReader讀取文件內(nèi)容(async/await)的相關(guān)資料,FileReader是前端進(jìn)行文件處理的一個(gè)重要的Api,特別是在對(duì)圖片的處理上,如果你想知道圖片的處理原理,你就永遠(yuǎn)不可能繞過(guò)它,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)授權(quán)登錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05