Sorting an array of objects by property values

技术背景

在前端开发中，经常会遇到需要对数组中的对象按照某个属性值进行排序的需求。例如，对房屋列表按价格排序、对商品列表按销量排序等。JavaScript 提供了 sort() 方法来实现数组排序，我们可以通过自定义比较函数来根据对象的特定属性进行排序。

实现步骤

基本排序

• 升序排序：可以使用 sort() 方法结合比较函数来实现按对象属性的升序排序。
• 降序排序：修改比较函数的返回值，即可实现降序排序。

多属性排序

• 可以通过递归或嵌套比较函数的方式，实现按多个属性排序。

忽略大小写排序

• 对于字符串属性，可以在比较函数中使用 toUpperCase() 或 toLowerCase() 方法忽略大小写。

自定义排序函数

• 创建通用的排序函数，支持按任意属性、升降序、数据类型转换等进行排序。

核心代码

按价格升序排序

// ES5 语法
homes.sort(function(a, b) {
    return parseFloat(a.price) - parseFloat(b.price);
});

// ES6 语法
homes.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));

按价格降序排序

homes.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));

通用排序函数

const sort_by = (field, reverse, primer) => {
    const key = primer ?
        function(x) {
            return primer(x[field])
        } :
        function(x) {
            return x[field]
        };

    reverse = !reverse ? 1 : -1;

    return function(a, b) {
        return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
    }
}

// 使用示例
const homes = [
    { h_id: "3", city: "Dallas", state: "TX", zip: "75201", price: "162500" },
    { h_id: "4", city: "Bevery Hills", state: "CA", zip: "90210", price: "319250" },
    { h_id: "5", city: "New York", state: "NY", zip: "00010", price: "962500" }
];

// 按价格从高到低排序
console.log(homes.sort(sort_by('price', true, parseInt)));

// 按城市排序，忽略大小写，A - Z
console.log(homes.sort(sort_by('city', false, (a) => a.toUpperCase())));

按多个属性排序

function SortArrayobject(arrprop, arrsource) {
    arrprop.forEach(function(i) {
        arrsource.sort(function(a, b) {
            return ((a[i] < b[i]) ? -1 : ((a[i] > b[i]) ? 1 : 0));
        });
    });
    return arrsource;
}

// 使用示例
const data = [
    { name: { first: 'Josh', last: 'Jones' }, age: 30 },
    { name: { first: 'Carlos', last: 'Jacques' }, age: 19 },
    { name: { first: 'Carlos', last: 'Dante' }, age: 23 },
    { name: { first: 'Tim', last: 'Marley' }, age: 9 },
    { name: { first: 'Courtney', last: 'Smith' }, age: 27 },
    { name: { first: 'Bob', last: 'Smith' }, age: 30 }
];

SortArrayobject(['name.first', 'age'], data);

忽略大小写排序

this.myArray.sort((a, b) => { 
    return a.stringProp.toUpperCase().localeCompare(b.stringProp.toUpperCase());
});

最佳实践

• 使用箭头函数简化比较函数的编写。
• 封装通用的排序函数，提高代码的复用性。
• 在比较函数中使用 parseFloat() 或 Number() 处理数值类型的属性，避免字符串比较的问题。

常见问题

排序不稳定

JavaScript 的 sort() 方法在不同浏览器中的实现可能不同，排序结果可能不稳定。可以使用更复杂的排序算法或库来解决。

性能问题

对于大规模数据的排序，sort() 方法可能会导致性能问题。可以考虑使用更高效的排序算法或分块排序。

大小写敏感问题

在比较字符串属性时，默认是大小写敏感的。如果需要忽略大小写，可以在比较函数中进行处理。