JavaScripts数组里的对象排序的24个方法(最新整理收藏)-牛翰网

1. 使用 Array.prototype.sort()
2. 使用 Array.prototype.map() 和 Array.prototype.sort()
3. 使用 Array.prototype.slice() 和 Array.prototype.sort()
4. 使用 Array.prototype.reduce() 实现自定义排序
5. 使用第三方库（如 Lodash）
6. 使用自定义比较函数进行多字段排序
7. 使用稳定排序库（如 array-stable）
8. 使用 Intl.Collator 进行本地化排序
9. 使用 Proxy 对象包装数组
10. 使用 TypedArray 进行数值排序
11. 按照对象属性值的字符串长度排序
12. 按照日期字段进行排序
13. 使用 reduce 和 Object.entries 对对象数组进行排序
14. 按照多个条件进行复杂排序
15. 基于对象某一属性的数值范围排序
16. 使用 Map 进行自定义键排序
17. 按照嵌套对象属性排序
18. 按照字符串中的数字进行排序
19. 按照布尔值进行排序
20. 按照多个对象数组的属性组合排序
21. 基于自定义权重排序
22. 按照随机顺序排序
23. 按照数组中对象的多个数值属性排序
24. 按照对象属性的存在性排序

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数组对象排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/334268o3f.htm

展开阅读全文

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END