JavaScripts数组里的对象排序的24个方法(最新整理收藏)
更新时间：2025年01月15日 11:05:42 作者：BIBOR
文章介绍了24种在JavaScript中对数组进行排序的方法,每种方法都有具体的示例和应用场景,适合不同情况下的排序需求,感兴趣的朋友跟随小编一起看看吧
1. 使用 Array.prototype.sort()
这是最基本、也是最常用的方法。sort() 方法会原地修改数组，并返回排序后的数组。你需要传入一个比较函数来定义排序逻辑。
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()
这种方法适用于当你不想改变原始数组时，可以先创建一个新的数组，然后进行排序。
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
const sortedArray = array
.map(item => item) // 复制数组
.sort((a, b) => a.age - b.age);
console.log(sortedArray);
console.log(array); // 原数组未改变3. 使用 Array.prototype.slice() 和 Array.prototype.sort()
同样是为了不改变原数组，这种方法利用 slice() 创建一个数组的浅拷贝，然后进行排序。
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); // 原数组未改变4. 使用 Array.prototype.reduce() 实现自定义排序
如果你需要对数组进行复杂的排序操作，可以使用 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. 使用第三方库（如 Lodash）
Lodash 提供了更强大的排序功能，如多属性排序。你需要先安装 Lodash：
npm install lodash
然后使用 Lodash 的 _.orderBy 方法：
const _ = require('lodash');
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
// 按照多个属性排序
const sortedArray = _.orderBy(array, ['age', 'name'], ['asc', 'asc']);
console.log(sortedArray);6. 使用自定义比较函数进行多字段排序
如果你希望根据多个字段进行排序，可以编写自定义的比较函数。
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. 使用稳定排序库（如 array-stable）
在某些情况下，你可能需要一个稳定的排序算法。JavaScript 的原生 sort() 方法在不同浏览器上可能不是稳定的。可以使用 array-stable 库来确保稳定排序。
安装该库：
npm install array-stable
使用示例：
const stable = require('array-stable'); // 导入稳定排序库
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
stable.sort(array, (a, b) => a.age - b.age); // 按年龄升序稳定排序
console.log(array);8. 使用 Intl.Collator 进行本地化排序
对于字符串排序，特别是涉及到国际化时，可以使用 Intl.Collator 来处理。
const array = [
{ name: 'Éclair', age: 25 },
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 30 }
];
const collator = new Intl.Collator('fr', { sensitivity: 'base' }); // 创建法语语言环境的排序器
array.sort((a, b) => collator.compare(a.name, b.name)); // 按名称排序
console.log(array);9. 使用 Proxy 对象包装数组
如果你希望在数组排序前后做一些额外操作，可以使用 Proxy 对象。
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 包装数组
proxyArray.sort((a, b) => a.age - b.age); // 对代理数组进行排序
console.log(proxyArray);10. 使用 TypedArray 进行数值排序
如果数组中的对象包含大量数值，并且排序性能非常关键，可以考虑将数值提取到 TypedArray 中进行排序，然后映射回原数组。
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]); // 根据排序后的索引重构数组
console.log(sortedArray);11. 按照对象属性值的字符串长度排序
const array = [
{ name: 'Alice', description: 'A short description' },
{ name: 'Bob', description: 'A very long and detailed description' },
{ name: 'Charlie', description: 'Medium description' }
];
// 按描述的长度升序排列
array.sort((a, b) => a.description.length - b.description.length);
console.log(array);12. 按照日期字段进行排序
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 对对象数组进行排序
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 30 }
];
// 使用 reduce 和 Object.entries 对对象数组按年龄升序排序
const sortedArray = Object.values(array.reduce((acc, obj) => {
acc[obj.age] = obj;
return acc;
}, {}));
console.log(sortedArray);14. 按照多个条件进行复杂排序
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. 基于对象某一属性的数值范围排序
const array = [
{ name: 'Alice', score: 85 },
{ name: 'Bob', score: 75 },
{ name: 'Charlie', score: 95 },
{ name: 'David', score: 80 }
];
// 按分数区间排序：低于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 进行自定义键排序
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]
]);
// 按优先级排序
array.sort((a, b) => priorityOrder.get(a.priority) - priorityOrder.get(b.priority));
console.log(array);17. 按照嵌套对象属性排序
const array = [
{ id: 1, details: { age: 25 } },
{ id: 2, details: { age: 30 } },
{ id: 3, details: { age: 20 } }
];
// 按嵌套对象的年龄属性升序排序
array.sort((a, b) => a.details.age - b.details.age);
console.log(array);18. 按照字符串中的数字进行排序
const array = ['item20', 'item5', 'item12', 'item1'];
// 按字符串中的数字部分进行升序排序
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. 按照布尔值进行排序
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. 按照多个对象数组的属性组合排序
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. 基于自定义权重排序
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
};
// 按角色权重排序
array.sort((a, b) => roleWeights[a.role] - roleWeights[b.role]);
console.log(array);22. 按照随机顺序排序
const array = [1, 2, 3, 4, 5]; // 使用 Math.random() 将数组随机打乱 array.sort(() => Math.random() - 0.5); console.log(array);
23. 按照数组中对象的多个数值属性排序
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. 按照对象属性的存在性排序
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob' },
{ name: 'Charlie', age: 30 },
{ name: 'David' }
];
// 有 age 属性的对象在前，没有的在后
array.sort((a, b) => ('age' in a ? -1 : 1) - ('age' in b ? -1 : 1));
console.log(array);到此这篇关于JavaScripts数组里的对象排序的24个方法的文章就介绍到这了,更多相关js数组对象排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文是对JS中typeof与instanceof之间的区别进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了js实现仿MSN带关闭功能的右下角弹窗代码,涉及javascript操作页面元素的布局及属性的动态变换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细介绍了小程序实现手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了JavaScript实现淘宝京东6位数字支付密码效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要给大家介绍了关于JS动态添加元素及绑定事件造成程序重复执行的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-12-12
这篇文章主要为大家详细介绍了js实现带进度条提示的多视频上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了当前流行的JavaScript代码风格指南,同时推荐了一款风格检验工具jshint,可以配合大多数的编辑器统一团队代码风格,需要的朋友可以参考下2014-09-09
本文给大家分享的是使用原生javascript实现的俄罗斯方块的代码，还没有很完善，这里放出来，算是抛砖引玉吧，希望小伙伴们能够喜欢。2015-03-03
Js中FileReader读取文件内容方法详解(async/await)
这篇文章主要给大家介绍了关于Js中FileReader读取文件内容(async/await)的相关资料,FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了微信小程序实现授权登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论