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
方法对numbers
进行升序排序,这是默认的模式。
您还可以向后排序数字(即按降序排列)。为此,您需要创建以下自定义排序函数:
function desc(a, b) { return b - a }
该函数接受两个参数(a
和 b
),它们代表要排序的两个值。如果返回正数,则 a
和 b
),它们代表要排序的两个值。如果返回正数,则 sort()
方法将理解 b
应在 a
之前排序。如果它返回负数,则 sort()
将理解 a
应该位于 b
之前。如果 b
> a
,则该函数将返回正数,这意味着如果 a
小于 b
,则 b
将位于 a
方法将理解 b
应在 a
之前排序。如果它返回负数,则
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 中对复杂对象数组进行排序console.log(names.sort(descString)) // ["Victor", "Sam", "Koe", "Eke", "Adam"]
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
要通过 name
属性对此数组进行排序,我们必须创建一个自定义排序函数并将其传递给 方法:
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:对组织值进行排序的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

WordPress对初学者来说容易上手。1.登录后台后,用户界面直观,简洁的仪表板提供所有必要功能链接。2.基本操作包括创建和编辑内容,所见即所得的编辑器简化了内容创建。3.初学者可以通过插件和主题扩展网站功能,学习曲线存在但可以通过实践掌握。

博客是人们在网上表达观点、意见和见解的理想平台。许多新手渴望建立自己的网站,却因担心技术障碍或成本问题而犹豫不决。然而,随着平台不断发展以满足初学者的能力和需求,现在开始变得比以往任何时候都更容易。 本文将逐步指导您如何建立一个WordPress博客,从主题选择到使用插件提升安全性和性能,助您轻松创建自己的网站。 选择博客主题和方向 在购买域名或注册主机之前,最好先确定您计划涵盖的主题。个人网站可以围绕旅行、烹饪、产品评论、音乐或任何激发您兴趣的爱好展开。专注于您真正感兴趣的领域可以鼓励持续写作

wordpressgood forvortalyanewebprojectDuetoItsAsatilityAsacms.itexcelsin:1)用户友好性,允许Aeserywebsitesetup; 2)sexibility andcustomized andcustomization and numerthemesandplugins; 3)seoop timigimization; and4)and4)

能在三天内学会WordPress。1.掌握基础知识,如主题、插件等。2.理解核心功能,包括安装和工作原理。3.通过示例学习基本和高级用法。4.了解调试技巧和性能优化建议。

Wix适合没有编程经验的用户,WordPress适合希望有更多控制和扩展能力的用户。1)Wix提供拖放式编辑器和丰富模板,易于快速搭建网站。2)WordPress作为开源CMS,拥有庞大社区和插件生态,支持深度自定义和扩展。

最近,我们向您展示了如何通过允许用户将自己喜欢的帖子保存在个性化库中来为用户创建个性化体验。您可以通过在某些地方(即欢迎屏幕)使用他们的名字,将个性化结果提升到另一个水平。幸运的是,WordPress使获取登录用户的信息变得非常容易。在本文中,我们将向您展示如何检索与当前登录用户相关的信息。我们将利用get_currentuserinfo(); 功能。这可以在主题中的任何地方使用(页眉、页脚、侧边栏、页面模板等)。为了使其工作,用户必须登录。因此我们需要使用

您想了解如何在父分类存档页面上显示子分类吗?在自定义分类存档页面时,您可能需要执行此操作,以使其对访问者更有用。在本文中,我们将向您展示如何在父分类存档页面上轻松显示子分类。为什么在父分类存档页面上显示子分类?通过在父分类存档页面上显示所有子分类,您可以使其不那么通用,对访问者更有用。例如,如果您运行一个关于书籍的WordPress博客,并且有一个名为“主题”的分类法,那么您可以添加“小说”、“非小说”等子分类法,以便您的读者可以

WordPress本身免费,但使用需额外费用:1.WordPress.com提供从免费到付费的套餐,价格从每月几美元到几十美元不等;2.WordPress.org需购买域名(每年10-20美元)和托管服务(每月5-50美元);3.插件和主题多数免费,付费的价格在几十到几百美元之间;通过选择合适的托管服务、合理使用插件和主题、定期维护和优化,可以有效控制和优化WordPress的成本。
