上一篇
JS对象按属性排序怎么写？js数组对象按指定属性排序
在 JavaScript 中，根据对象的某一属性进行排序是一项非常基础且高频的操作，这通常通过数组的 sort() 方法来实现，为了让你能够灵活应对各种场景，下面将详细解析其原理、常见用法以及注意事项。
核心原理：sort() 方法
JavaScript 的 Array.prototype.sort() 方法默认会将数组元素转换为字符串，然后按照 UTF-16 码元值的顺序进行排序，这意味着如果你直接对数字数组排序，10 会排在 2 前面，因为字符串 “10” 小于 “2”。
为了根据对象属性排序,我们需要向 sort() 方法传递一个比较函数，这个函数接收两个参数（通常命名为 a 和 b），返回值决定排序顺序：
- 如果返回值 < 0，a 会被排在 b 前面。
- 如果返回值 > 0，b 会被排在 a 前面。
- 如果返回值 === 0，a 和 b 的相对位置保持不变。
常见场景与代码示例
按数字属性升序排序
这是最常见的场景,例如按年龄、价格或分数排序。
const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }, { name: 'Charlie', age: 30 } ]; // 按 age 升序排序 users.sort((a, b) => a.age b.age); console.log(users); // 输出: [ { name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 } ]
按字符串属性升序排序
字符串排序时,直接使用减号 无效，需要使用 localeCompare() 方法或简单的比较运算符。
const products = [ { name: 'Banana', price: 1.2 }, { name: 'Apple', price: 0.9 }, { name: 'Cherry', price: 2.5 } ]; // 按 name 字符串升序排序 products.sort((a, b) => a.name.localeCompare(b.name)); console.log(products); // 输出: [ { name: 'Apple', ... }, { name: 'Banana', ... }, { name: 'Cherry', ... } ]
按数字属性降序排序
只需交换 a 和 b 的位置，或者将结果取反。
// 按 age 降序排序 users.sort((a, b) => b.age a.age); // 或者 users.sort((a, b) => -(a.age b.age));
复杂排序：多级排序
有时我们需要先按一个属性排序,如果该属性相同，再按另一个属性排序。
const employees = [ { name: 'Alice', dept: 'HR', salary: 5000 }, { name: 'Bob', dept: 'IT', salary: 6000 }, { name: 'Charlie', dept: 'HR', salary: 5500 }, { name: 'David', dept: 'IT', salary: 6000 } ]; // 先按部门 (dept) 升序，再按薪资 (salary) 降序 employees.sort((a, b) => { if (a.dept !== b.dept) { return a.dept.localeCompare(b.dept); // 部门不同，按部门排序 } return b.salary a.salary; // 部门相同，按薪资降序 });
注意事项与最佳实践
| 注意点 | 说明 | 建议 |
|---|---|---|
| 原地修改 | sort() 会修改原数组，而不是返回一个新数组。 | 如果不想改变原数据，先使用 slice() 或展开运算符 [...arr] 创建副本。 |
| 空值处理 | 如果属性可能为 null 或 undefined，直接相减会得到 NaN，导致排序异常。 | 在比较前添加默认值处理，a.age || 0。 |
| 性能考虑 | sort() 的时间复杂度通常为 O(n log n)，对于超大数据集，性能可能成为瓶颈。 | 对于极大数据量，考虑使用 Web Workers 或后端排序。 |
| 稳定性 | ES2019 规定 sort() 必须是稳定的（即相等元素的相对顺序保持不变）。 | 确保你的运行环境支持 ES2019 或更高版本。 |
相关问题与解答
问题 1：如果对象属性不存在或为 undefined，排序会出错吗？如何处理？
解答：
是的，如果直接对
undefined 或 null 进行数学运算（如 a.age b.age），结果会是 NaN，在大多数浏览器中，NaN 会被视为大于任何数字，导致排序结果不可预测或元素被移到数组末尾。
处理方法：
可以在比较函数中提供默认值，假设缺失的年龄默认为 0：
users.sort((a, b) => (a.age || 0) (b.age || 0));
或者,如果你想将缺失值的项排在最后：
users.sort((a, b) => { const ageA = a.age !== undefined ? a.age : Infinity; const ageB = b.age !== undefined ? b.age : Infinity; return ageA ageB; });
问题 2：如何在不修改原数组的情况下进行排序？
解答：
sort() 方法是原地排序，会改变原始数组，如果你需要保留原始数组不变，可以使用 slice() 方法或 ES6 的展开运算符创建一个浅拷贝，然后在副本上调用 sort()。
示例代码：
const originalArray = [ { name: 'C', val: 3 }, { name: 'A', val: 1 }, { name: 'B', val: 2 } ]; // 方法一：使用 slice() const sortedArray1 = originalArray.slice().sort((a, b) => a.val b.val); // 方法二：使用展开运算符（推荐，更简洁） const sortedArray2 = [...originalArray].sort((a, b) => a.val b.val); console.log(originalArray); // 原数组未改变 console.log(sortedArray1); // 排序后的新数组
