JavaScript:对组织值进行排序

wufei123 2024-06-02 阅读:5 评论:0
如果您已经了解 JavaScript 数组的基础知识,那么是时候通过更高级的主题将您的技能提升到新的水平了。在本系列教程中,您将探索在 JavaScript 中使用数组进行编程的中级主题。 对数组进行排序是使用 JavaScript 编程...

javascript:对组织值进行排序

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

对数组进行排序是使用 JavaScript 编程时最常见的任务之一。因此,作为一名 JavaScript 程序员,学习如何正确对数组进行排序至关重要,因为您将在现实项目中经常这样做。错误的排序技术确实会降低您的应用程序的速度!

过去,Web 开发人员必须使用 jQuery 等第三方库并编写大量代码才能对列表集合中的值进行排序。幸运的是,从那时起,JavaScript 已经发生了巨大的发展。如今,您只需一行代码即可对包含数千个值的 JavaScript 数组进行排序,而无需使用任何第三方库。

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

  • 数字数组
  • 字符串数组
  • 复杂对象数组
    • 按名称(字符串)
    • 按 ID(号码)
    • 按出生日期(日期)

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

JavaScript sort() 方法

JavaScript sort() 方法是 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,则该函数将返回正数,这意味着如果 a 小于 b,则 b 将位于 a 之前。

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。

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

console.log(names.sort(descString)) // ["Victor", "Sam", "Koe", "Eke", "Adam"] 在 JavaScript 中对复杂对象数组进行排序

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

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

这里我们有一个 people 数组,其中包含多个 person 对象。每个对象由 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 应用程序中的任何数据进行排序。

以上就是JavaScript:对组织值进行排序的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • 华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀

    华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀
    华为 mate 70 或将首发麒麟新款处理器,并将此前有博主爆料其性能跑分将突破110万,这意味着 mate 70 性能将重新夺回第一梯队。也因此,苹果 iphone 16 唯一能有一战之力的性能,也要被 mate 70 拉近不少了。 据悉,华为 Mate 70 性能会大幅提升,并且销量相比 Mate 60 预计增长40% - 50%,且备货充足。如果 iPhone 16 发售日期与 Mate 70 重合,销量很可能被瞬间抢购。 不过,iPhone 16 还有一个阵地暂时难...
  • 惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起

    惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起
    本站 5 月 14 日消息,继上线官网后,新款惠普战 99 商用笔记本现已上架,搭载酷睿 ultra / 锐龙 8040处理器,最高可选英伟达rtx 3000 ada 独立显卡,售价 4999 元起。 战 99 锐龙版 R7-8845HS / 16GB / 1TB:4999 元 R7-8845HS / 32GB / 1TB:5299 元 R7-8845HS / RTX 4050 / 32GB / 1TB:7299 元 R7 Pro-8845HS / RTX 2000 Ada...
  • 酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元

    酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元
    本站 5 月 16 日消息,酷凛 id-cooling 近日推出霜界 240/360 一体式水冷散热器,采用黑色无光低调设计,分别定价 239/279 元。 本站整理霜界 240/360 散热器规格如下: 酷凛宣称这两款水冷散热器搭载“自研新 V7 水泵”,采用三相六极马达和改进的铜底方案,缩短了水流路径,相较上代水泵进一步提升解热能力。 霜界 240/360 散热器的水泵为定速 2800 RPM 设计,噪声 28db (A)。 两款一体式水冷散热器采用 27mm 厚冷排,...
  • Nginx服务器的HTTP/2协议支持和性能提升技巧介绍

    Nginx服务器的HTTP/2协议支持和性能提升技巧介绍
    Nginx服务器的HTTP/2协议支持和性能提升技巧介绍 引言:随着互联网的快速发展,人们对网站速度的要求越来越高。为了提供更快的网站响应速度和更好的用户体验,Nginx服务器的HTTP/2协议支持和性能提升技巧变得至关重要。本文将介绍如何配置Nginx服务器以支持HTTP/2协议,并提供一些性能提升的技巧。 一、HTTP/2协议简介:HTTP/2协议是HTTP协议的下一代标准,它在传输层使用二进制格式进行数据传输,相比之前的HTTP1.x协议,HTTP/2协议具有更低的延...
  • 两个表格切换的快捷键是什么

    两个表格切换的快捷键是什么
    两个表格切换的快捷键是“ctrl+pageup”和“ctrl+pagedown”,按键盘上的“ctrl+pageup”键是向右切换表格,按“ctrl+pagedown”键是向左切换表格。 本教程操作环境:windows7系统、Microsoft Office Excel2010版、Dell G3电脑。 两个工作表之间切换是Ctrl+Tab,两个工作簿之间切换是Ctrl+PageUP和Ctrl+PageDown。 打开Excel表格,打开几个工作簿。 按键盘上的Ctrl+P...