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

本文概述

  • 1.创建/公开一些数据进行排序
  • 2.创建自定义排序功能
  • 3.按键升序排序
  • 4.按键降序排序
如果你不知道执行此操作的正确逻辑, 则对JavaScript中的对象数组进行排序可能会成为噩梦。对数组进行排序的首选方法是使用它的sort方法, 该方法对数组中的元素进行适当排序。默认排序顺序是根据字符串Unicode代码点确定的。
在本文中, 我们将与你分享一种非常简单, 功能强大且经过优化的方法, 该方法使用纯JavaScript(无额外框架)按某个键将对象数组按升序或降序排序。
1.创建/公开一些数据进行排序第一步, 要通过某个键对对象数组进行排序, 你将需要一个有效的结构, 显然, 一个对象数组只能具有带有至少一个键(要排序的键)的对象。在此示例中, 我们将具有以下结构的MyData变量:
var MyData = http://www.srcmini.com/[{ 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 keyMyData.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"}]

【如何在JavaScript中按键对对象数组按字母顺序排序】或尝试使用新的钥匙, 例如城市:
// Sort the MyData array with the custom function// that sorts alphabetically by the name keyMyData.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 keyMyData.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"}]

编码愉快!

    推荐阅读