• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

使用 JavaScript 对值进行排序

如果您已经了解 javascript 数组的基础知识,那么是时候通过更高级的主题将您的技能提升到一个新的水平。在本系列教程中,您将探索在 JavaScript 中使用数组进行编程的中级主题。

使用 JavaScript 对值进行排序  第1张

对数组进行排序是您在使用 javaScript 编程时最常见的任务之一。因此,作为一名 JavaScript 程序员,学习如何正确地对数组进行排序是非常重要的,因为在实际项目中您会经常这样做。错误的排序技术真的会减慢你的应用程序

过去,Web 开发人员不得不使用第三方库(如 jquery)并编写大量代码来对列表集合中的值进行排序。幸运的是,从那时起,JavaScript 有了巨大的发展。如今,您只需一行代码即可对具有数千个值的 JavaScript 数组进行排序,而无需使用任何第三方库。

在本文中,我将向您展示如何在 JavaScript 中对简单和复杂的数组集合进行排序。我们将使用 JavaScriptsort()方法进行排序:

  • 一组数字

  • 字符串数组

  • 一组复杂的对象

    • 按名称(字符串)

    • 按 ID(编号)

    • 按出生日期(日期)

到本教程结束时,您应该对 JavaScript 的sort()方法如何工作以及如何使用它对数字、字符串和对象数组进行排序有透彻的了解。

JavaScriptsort()方法

JavaScriptsort()方法是 JavaScript 中最有用和最常用的数组方法之一。它允许您快速轻松地按升序或降序对数据元素数组进行排序。

您可以使用该方法对数字、字符串、日期甚至对象的数组进行排序。该sort()方法的工作原理是采用一组元素并根据某些标准对它们进行排序。条件可以是函数、比较运算符或值数组。

对数字数组进行排序

使用以下方法对数字数组进行排序非常简单sort:

let numbers = [12, 88, 57, 99, 03, 01, 83, 21]
console.log(numbers.sort())
// output [1, 12, 21, 3, 57, 83, 88, 99]

在上面的代码中,该sort()方法按numbers升序排序,这是默认模式。

您还可以将数字向后排序(即按降序排列)。为此,您需要创建以下自定义排序函数:

function desc(a, b) {
 return b - a
}

此函数采用两个参数(a和b),它们表示要排序的两个值。如果它返回一个正数,该sort()方法将理解b应该在 之前排序a。如果它返回一个负数,那么sort()就会明白a应该在 之前b。b如果> ,此函数将返回一个正数a,意思是如果小于 ,b将出现在之前。 aab

console.log(numbers.sort(desc))
// output [99, 88, 83, 57, 21, 12, 3, 1]

接下来是如何对字符串数组进行排序。

在 Java 脚本中对字符串数组进行排序

对字符串值进行排序同样简单:

let names = ["Sam", "Koe", "Eke", "Victor", "Adam"]
console.log(names.sort())
// output ["Adam", "Eke", "Koe", "Sam", "Victor"]

这是按降序对相同字符串进行排序的函数:

function descString(a, b) {
    return b.localeCompare(a);
}

如果第二个名字按字母顺序排在第一个之后,我们1从函数返回,这意味着第二个名字将在排序数组中排在第一位。否则,我们返回-1,或者0如果两者相等。

现在,如果您在数组上运行 sort 方法names,并将desc其作为参数,您会得到不同的输出:

console.log(names.sort(descString))
// ["Victor", "Sam", "Koe", "Eke", "Adam"]

在 JavaScript 中对复杂对象数组进行排序

到目前为止,我们只对字符串和数字等简单值进行了排序。您还可以使用该方法对对象数组进行排序sort()。让我们在以下部分中了解如何操作。

按名称排序对象(字符串属性)

这里我们有一个people包含多个人对象的数组。每个对象都包含id、name和dob属性:

const people = [
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 54, name: "Mark", dob: '1985-01-08'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 15, name: "Prince", dob: '2001-09-09'}
]

要按name属性对这个数组进行排序,我们必须创建一个自定义排序函数并将其传递给该sort方法:

students.sort(byName)

这个byName自定义排序函数将每次接收两个对象并比较它们的两个名称属性以查看哪个更大(即按字母顺序排在第一位):

function byName(a, b) {
    return a.name.localeCompare(b.name);
}

现在,如果您再次运行代码,您将得到:

[
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 54, name: "Mark", dob: '1985-01-08'},
  {id: 32, name: "Prince", dob: '2001-09-09'}
]

按 ID 排序(数字属性)

在前面的示例中,我们按名称排序,名称是字符串。在此示例中,我们将按每个对象(数字)的 ID 属性进行排序。

为此,我们可以使用以下函数:

function byID(a, b) {
  return parseInt(a.id) - parseInt(b.id)
}

在函数中,我们使用parseInt()来确保该值是一个数字,然后我们将两个数字相减以获得负值、正值或零值。使用此函数,您可以按公共数字属性对任何对象数组进行排序。 

console.log(students.sort(byID))
/* 
[ 
{id: 15, name: "Blessing", dob: '1999-04-09'}, 
{id: 17, name: "Aladdin", dob: '1989-06-21'}, 
{id: 29, name: "John", dob: '1992-11-09'}, 
{id: 32, name: "Prince", dob: '2001-09-09'} 
{id: 54, name: "Mark", dob: '1985-01-08'}, 
] 
*/

按日期排序

假设您要构建一个允许用户从数据库下载姓名列表的应用程序,但您希望姓名根据出生日期(从大到小)按时间顺序排列。

此函数按年、月、日的时间顺序对出生日期进行排序。

function byDate(a, b) {
   return new Date(a.dob).valueOf() - new Date(b.dob).valueOf()
}

该Date().valueOf()调用返回每个日期的时间戳。然后我们进行与前面示例相同的减法来确定顺序。

演示:

console.log(students.sort(byDate))
/* 
[ 
{id: 54, name: "Mark", dob: '1985-01-08'}, 
{id: 17, name: "Aladdin", dob: '1989-06-21'}, 
{id: 29, name: "John", dob: '1992-11-09'}, 
{id: 15, name: "Blessing", dob: '1999-04-09'}, 
{id: 32, name: "Prince", dob: '2001-09-09'} 
] 
*/

这种特殊方法在涉及日期顺序的情况下非常方便,例如确定谁有资格获得养老金或其他一些与年龄相关的福利的应用程序。

结论

总的来说,在使用各种内置方法时,在 JavaScript 中对元素进行排序非常简单。无论您需要对数字、字符串、对象或日期数组进行排序,都有一种方法可以轻松完成这项工作。借助这些方法,您可以快速轻松地对 JavaScript 应用程序中的任何数据进行排序。


文章目录
  • JavaScriptsort()方法
  • 对数字数组进行排序
  • 在 Java 脚本中对字符串数组进行排序
  • 在 JavaScript 中对复杂对象数组进行排序
    • 按名称排序对象(字符串属性)
    • 按 ID 排序(数字属性)
    • 按日期排序
  • 结论
  • 发表评论