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ù)來定義排序邏輯。
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)行排序，可以編寫自定義的比較函數(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ù)來確保穩(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 來處理。
const array = [
{ name: 'éclair', age: 25 },
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 30 }
];
const collator = new Intl.Collator('fr', { sensitivity: 'base' }); // 創(chuàng)建法語語言環(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ì)象在前，沒有的在后
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)文章
今天通過一個(gè)案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2020-08-08
Javascript 構(gòu)造函數(shù),公有,私有特權(quán)和靜態(tài)成員定義方法
其中公有方法聲明的部分采用的兩種方式，在實(shí)際應(yīng)用中一般采取一種方式就可以了，如果兩種方式都要采用的話，應(yīng)注意順序，防止前面寫的方法被清空或覆蓋。2009-11-11
behaviors是小程序中，用于實(shí)現(xiàn)組件間代碼共享的特性，類似于 Vue.js 中的 “mixins”，這篇文章主要介紹了微信小程序組件通信和behavior使用,需要的朋友可以參考下2022-08-08
微信小程序官方組件也提供了畫布功能，下面分享一下如何創(chuàng)建微信小程序畫布時(shí)鐘2016-12-12
bootstrap多層模態(tài)框滾動(dòng)條消失的問題
本篇文章主要介紹了bootstrap多層模態(tài)框滾動(dòng)條消失的問題，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
前端使用JavaScript結(jié)合CSS實(shí)現(xiàn)3D旋轉(zhuǎn)跟隨鼠標(biāo)變化
這篇文章主要介紹了前端使用JavaScript結(jié)合CSS實(shí)現(xiàn)3D旋轉(zhuǎn)跟隨鼠標(biāo)變化，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航切換
這篇文章主要為大家詳細(xì)介紹了swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Javascript驗(yàn)證Visa和MasterCard信用卡號(hào)的方法
這篇文章主要介紹了Javascript驗(yàn)證Visa和MasterCard信用卡號(hào)的方法,涉及javascript正則驗(yàn)證的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式
下面小編就為大家?guī)硪黄狫S 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了小程序支持SVG，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04