JavaScript:对组织值进行排序

wufei123 2024-06-02 阅读:51 评论: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

分享:

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

发表评论
热门文章
  • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

    BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
    知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
  • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

    闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
    闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
  • python怎么调用其他文件函数

    python怎么调用其他文件函数
    在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...
  • 俄罗斯引擎yandex入口官网地址 yandex网址在线免费进入(俄罗斯.官网.在线免费.入口.地址......)

    俄罗斯引擎yandex入口官网地址 yandex网址在线免费进入(俄罗斯.官网.在线免费.入口.地址......)
    俄罗斯引擎yandex官网地址入口在哪里?这是不少网友都关注的问题,接下来由php小编为大家带来yandex网址在线免费进入,感兴趣的网友一起随小编来瞧瞧吧! 俄罗斯引擎yandex入口官网地址 1、俄罗斯引擎yandex入口官网地址☜☜☜☜☜点击进入 2、yandex网址在线免费进入☜☜☜☜☜点击进入 【俄罗斯引擎yandex】 1、Yandex的搜索引擎在俄罗斯拥有极高的市场份额,其算法针对俄语和斯拉夫语系进行了优化,能更好地理解用户意图,提供更精准的搜索结果。它不仅...
  • 斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)

    斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)
    斗魔骑士角色选择及战斗策略指南 斗魔骑士游戏中,众多角色各具特色,选择适合自己的角色才能在战斗中占据优势。本文将为您详细解读如何选择强力角色,并提供团队协作及角色培养策略。 如何选择强力角色? 斗魔骑士的角色大致分为近战和远程两种类型。近战角色通常拥有高攻击力和防御力,适合冲锋陷阵;远程角色则擅长后方输出,并依靠灵活走位躲避攻击。 选择角色时,需根据个人游戏风格和喜好决定。喜欢正面硬刚的玩家可以选择战士型角色,其高生命值和防御力能承受更多伤害;偏好策略性玩法的玩家则可以选择法...