JavaScripts数组里的对象排序的24个方法

最新推荐文章于 2024-07-22 08:37:45 发布
最新推荐文章于 2024-07-22 08:37:45 发布
阅读量2.1k 收藏 16
点赞数 4
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BIBOR/article/details/139904699
版权

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);
BIBOR
关注
JavaScript对象数组的排序处理方法
01-21
本文实例讲述了JavaScript对象数组的排序处理方法。分享给大家供大家参考，具体如下： javascript的数组排序函数 sort方法，默认是按照ASCII 字符顺序进行升序排列。 arrayobj.sort(sortfunction); 参数：sortFunction 可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略，那么元素将按照 ASCII 字符顺序进行升序排列。 sort 方法将 Array 对象进行适当的排序；在执行过程中并不会创建新的 Array 对象。 如果为 sortfunction 参数提供了一个函数，那么该函数必须返回下列值之一： 负值，如果所传递的第一个参
List对象排序通用方法
10-09
List对象排序通用方法List对象排序通用方法List对象排序通用方法List对象排序通用方法
【Java】Java数组排序详解：全面掌握Arrays.sort()的几种用法
最新发布
科技改变人类，技术成就未来
07-22 2329
在 Java 开发中，java.util.Arrays 类提供了许多实用工具，用于操作数组。其中，Arrays.sort() 方法是对数组进行排序的常用方法。本文将详细介绍 Arrays.sort() 的不同用法，包括基本类型数组、对象数组、多维数组和自定义比较器的排序。
数组对象排序
jsyxiaoba的博客
11-28 716
今天来写个简单的数组排序，先把比较冗余的代码写出来，然后再把简洁的代码写出来。 其实我们在排序时是根据字段里的某些数值来排序（可能我说的不准确，但先就这么理解），所以需要先把那些具有对比性的内容获取出来，然后再进行对比。 这里的例子我用一个表格来做说明，具体的思路可以分为几个步骤： 获取–赋值–排序–添加–调用 1. 获取表格里的tbody，方便往里面添加排好序的tr 2. 获取行trs，此时tr...
数组（数组对象）排序
weixin_49708498的博客
11-29 593
【代码】数组（数组对象）排序。
一、数组对象排序
盏茶作酒的博客
06-07 1万+
一、普通数组排序　　 　　js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如： var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "b"] 因为字母A、B的ASCII值分别为65、66，而a、b的值分别为97、98，所以上面输出的结果是["A", "B", "a", "b"]..
数组中的对象排序
weixin_34153893的博客
11-19 224
学习链接：http://www.cnblogs.com/xljzlw/p/3694861.html var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];var compare = function (prop) { return function (obj1, obj2) { var val1 = obj...
javascript 对象数组根据对象object key的值排序
10-24
这个方法适用于数组中的每个元素都是一个对象，且需要根据对象的某个键（key）的值进行升序或降序排序的情况。下面将详细解释这个过程。 首先，我们有一个JavaScript对象数组，例如： ```javascript var ary = [ {...
JavaScript对象数组如何按指定属性和排序方向进行排序
10-22
首先，了解JavaScript数组的`sort()`方法。`sort()`方法允许我们对数组元素进行原地排序，它接受一个可选的`compareFunction`参数，用于自定义排序规则。如果没有提供`compareFunction`，数组元素默认按照字符串的...
JavaScript对象数组排序函数及六个用法
11-23
本篇文章主要探讨了一个通用的JavaScript函数，用于对数组或对象进行排序，特别是在处理对象数组时非常实用。这个函数允许根据对象的某个属性值（甚至嵌套属性）进行升序或降序排序。 函数的核心在于`sort_object`...
JavaScript基于对象方法实现数组去重及排序操作示例
12-09
本文实例讲述了JavaScript基于对象方法实现数组去重及排序操作。分享给大家供大家参考，具体如下： [removed] //用对象方法实现数组去重 Array.prototype.unique = function() { var newArr = []; for (var i =...
数组(数组对象)排序
ltc_Yan的博客
08-03 394
排序
数组排序、数组对象排序
u010117950的博客
09-18 521
纯数字的数组排序推荐方法 var arr = [1,4,14,6,9]; function compare(val1,val2) { return val1-val2;//倒序为return val2-val1 } arr.sort(compare); console.log(arr);//[1, 4, 6, 9, 14] ``` ...
对象数组排序
webZRH的博客
01-23 344
function compare(property) { return function (a, b) { var value1 = a[property]; var value2 = b[property]; return value1 - value2; } } console.log(list.sort(compare('count'))) console.log(lis
对象数组的排序
qq_39040192的博客
05-23 2897
对象数组的排序 对此类对象数组进行排序 var jzdata = [ {element_flag:"凯里",flow:0.222}, {element_flag:"凯里",flow:0.111}, {element_flag:"凯里",flow:0.333}, ] 排序方法（上面数据是模拟数据，不影响排序结果） var jzdata = JSON.parse(JSON.stringify(...
数组排序，对象数组排序
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
09-13 383
数组排序，根据数组中对象的某一个属性进行排序 数组排序  sortlen =[1,9,11,55,3,4] sortlen = sortlen.sort(function(x,y){ return y-x; //从大到小 }) console.log(sortlen); //[55,11,9,4,3,1] 根据数组中对象的某一个属性进行排序 //根据age从小到大排列 va...
javascript 对象数组排序
热门推荐
我只是坚持我的兴趣。
01-04 1万+
javascript 对象数组排序 作者: admin 日期: 二月 13, 2011发表评论 (3)查看评论 javascript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。 其基本的用法就不说了，先看个简单的排序例子： 帮助 1 2 3 //Sort
根据JavaScript中的另一个数组对对象数组进行排序
05-27
如果你要根据另一个数组对对象数组进行排序，你可以使用`Array.prototype.sort()`方法和`Array.prototype.findIndex()`方法来实现。以下是一个示例代码： ```javascript const arr1 = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]; const arr2 = [3, 2, 1]; arr1.sort((a, b) => { return arr2.findIndex(id => id === a.id) - arr2.findIndex(id => id === b.id); }); console.log(arr1); // Output: // [ // { id: 3, name: 'Charlie' }, // { id: 2, name: 'Bob' }, // { id: 1, name: 'Alice' } // ] ``` 在这个示例中，我们首先定义了一个对象数组`arr1`和一个数字数组`arr2`。然后，我们使用`sort()`方法对`arr1`进行排序，其中回调函数返回`arr2.findIndex(id => id === a.id) - arr2.findIndex(id => id === b.id)`的结果，这意味着我们将根据`arr2`中元素的索引来比较`arr1`中的元素。我们使用`findIndex()`方法查找`a.id`和`b.id`在`arr2`中的索引。最后，我们将排序后的`arr1`输出到控制台上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值