0

0

JavaScript:对组织值进行排序

王林

王林

发布时间:2023-08-30 20:17:02

|

721人浏览过

|

来源于php中文网

原创

javascript:对组织值进行排序

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

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

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

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

立即学习Java免费学习笔记(深入)”;

  • 数字数组
  • 字符串数组
  • 复杂对象数组
    • 按名称(字符串)
    • 按 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
}

该函数接受两个参数(ab),它们代表要排序的两个值。如果返回正数,则 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

百度AI搜
百度AI搜

百度全新AI搜索引擎

下载

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

console.log(names.sort(descString))

// ["Victor", "Sam", "Koe", "Eke", "Adam"]

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

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

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

这里我们有一个 people 数组,其中包含多个 person 对象。每个对象由 idnamedob 属性组成:

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 应用程序中的任何数据进行排序。

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

156

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

337

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

406

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

515

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

312

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

129

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

183

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

51

2026.01.13

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号