如何在JavaScript中按键对对象数组按字母顺序排序

本文概述

• 1.创建/公开一些数据进行排序
• 2.创建自定义排序功能
• 3.按键升序排序
• 4.按键降序排序

如果你不知道执行此操作的正确逻辑, 则对JavaScript中的对象数组进行排序可能会成为噩梦。对数组进行排序的首选方法是使用它的sort方法, 该方法对数组中的元素进行适当排序。默认排序顺序是根据字符串Unicode代码点确定的。

在本文中, 我们将与你分享一种非常简单, 功能强大且经过优化的方法, 该方法使用纯JavaScript(无额外框架)按某个键将对象数组按升序或降序排序。

1.创建/公开一些数据进行排序

第一步, 要通过某个键对对象数组进行排序, 你将需要一个有效的结构, 显然, 一个对象数组只能具有带有至少一个键(要排序的键)的对象。在此示例中, 我们将具有以下结构的MyData变量：

var MyData = [
    { id : 1, name: "Angel Miguel", city: "Nex Mexico" }, { id : 2, name: "Michael Rogers", city: "Bogotá"     }, { id : 3, name: "Steve Rogers", city: "New York"   }, { id : 4, name: "Ángel José", city: "Bucaramanga"}, { id : 5, name: "Carlos Delgado", city: "Nex Mexico" }, { id : 6, name: "Jhonny Zapata", city: "Zacatecas"  }, { id : 7, name: "Bruce Wayne", city: "Gotham"     }, { id : 8, name: "Speedy Gonzales", city: "Nex Mexico" }
];

每个项目都有3个键, 可以按数字和字母顺序进行排序。

2.创建自定义排序功能

JavaScript提供了一个本机方法, 该方法希望函数作为第一个参数根据你的需要进行排序, 因此由你来编写该函数。本文的重点是向你展示如何通过某个键对对象数组进行排序, 因此我们将为你提供此函数, 你可以简单地使用它：

/**
 * Function to sort alphabetically an array of objects by some specific key.
 * 
 * @param {String} property Key of the object to sort.
 */
function dynamicSort(property) {
    var sortOrder = 1;

    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }

    return function (a, b) {
        if(sortOrder == -1){
            return b[property].localeCompare(a[property]);
        }else{
            return a[property].localeCompare(b[property]);
        }        
    }
}

如前所述, 此函数需要作为第一个参数注入JavaScript数组的原型排序函数中, 因此你将不会直接使用它, 因为它只会返回0或1。该函数排序的要点是localeCompare, 字符串原型中包含的JavaScript函数, 返回一个数字, 该数字指示string1在排序顺序(值)上是在string2之前, 之后还是与之相同。

3.按键升序排序

最后, 要对对象数组进行排序, 只需调用数组的sort方法, 并将第一个参数以及另一个字符串(即你要排序的对象的键)作为第一个参数传递给dynamicSort函数。在这种情况下, 我们可以使用以下代码行按照name属性进行排序：

重要

请注意, sort方法对同一变量中的数组项进行重新排序/排序(通过引用), 因此该方法不会返回具有新顺序的新变量, 但是会就地修改相同的变量。

// Sort the MyData array with the custom function
// that sorts alphabetically by the name key
MyData.sort(dynamicSort("name"));

// Display data with new order !
console.log(MyData);

使用前面的代码, console.log将以新的顺序输出对象：

[  
    { "id":4, "name": "Ángel José", "city":"Bucaramanga" }, { "id":1, "name": "Angel Miguel", "city":"Nex Mexico"  }, { "id":7, "name": "Bruce Wayne", "city":"Gotham"      }, { "id":5, "name": "Carlos Delgado", "city":"Nex Mexico"  }, { "id":6, "name": "Jhonny Zapata", "city":"Zacatecas"   }, { "id":2, "name": "Michael Rogers", "city":"Bogotá"      }, { "id":8, "name": "Speedy Gonzales", "city":"Nex Mexico"  }, { "id":3, "name": "Steve Rogers", "city":"New York"    }
]

或尝试使用新的钥匙, 例如城市：

// Sort the MyData array with the custom function
// that sorts alphabetically by the name key
MyData.sort(dynamicSort("city"));

// Display data with new order !
console.log(MyData);

它将输出：

[
    { "id":2, "name": "Michael Rogers", "city": "Bogotá"     }, { "id":4, "name": "Ángel José", "city": "Bucaramanga"}, { "id":7, "name": "Bruce Wayne", "city": "Gotham"     }, { "id":3, "name": "Steve Rogers", "city": "New York"   }, { "id":1, "name": "Angel Miguel", "city": "Nex Mexico" }, { "id":5, "name": "Carlos Delgado", "city": "Nex Mexico" }, { "id":8, "name": "Speedy Gonzales", "city": "Nex Mexico" }, { "id":6, "name": "Jhonny Zapata", "city": "Zacatecas"  }
]

4.按键降序排序

要按某个键按字母降序对对象数组进行排序, 只需在键串的开头添加前缀-(减号)作为前缀, 因此sort函数将按降序排序：

// Sort the MyData array with the custom function
// that sorts alphabetically in descending order by the name key
MyData.sort(dynamicSort("-name"));

// Display data with new order !
console.log(MyData);

这将输出：

[
    { "id" :3, "name" : "Steve Rogers", "city":"New York"   }, { "id" :8, "name" : "Speedy Gonzales", "city":"Nex Mexico" }, { "id" :2, "name" : "Michael Rogers", "city":"Bogotá"     }, { "id" :6, "name" : "Jhonny Zapata", "city":"Zacatecas"  }, { "id" :5, "name" : "Carlos Delgado", "city":"Nex Mexico" }, { "id" :7, "name" : "Bruce Wayne", "city":"Gotham"     }, { "id" :1, "name" : "Angel Miguel", "city":"Nex Mexico" }, { "id" :4, "name" : "Ángel José", "city":"Bucaramanga"}
]

编码愉快！