您现在的位置是:首页 > 正文

JS数组对象——英文按照首字母进行排序sort()、localeCompare()

2024-01-30 21:29:01阅读 0

JS数组对象——英文按照首字母进行排序(sort、localeCompare)

上期回顾

文章内容 文章链接
JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序 https://blog.csdn.net/XSL_HR/article/details/128579840?spm=1001.2014.3001.5501

场景复现

排序在项目中非常实用,出现频率极高,尤其是后台管理系统,需要我们对大量的数据进行展示、处理、操作。一般都是从后台获取到数组对象,然后根据其中的一个属性对数据进行升序或者降序的处理。

下面将举例详细介绍——英语根据首字母进行排序

sort()方法与localeCompare

方法sort()localeCompare()

  • sort用于排序
    在这里插入图片描述
  • localeCompare用于比较
    在这里插入图片描述
    localeCompare不要写成localCompare

实例应用

一、升序排列

1、数组内容

var arr1 = [
    {name: 'DaLin'},
	{name: 'HaLin'},
	{name: 'VaLin'},
	{name: 'SaLin'},
	{name: 'WaLin'},
	{name: 'EaLin'},
	{name: 'TaLin'},
	{name: 'YaLin'},
	{name: 'JaLin'}
]

2、关键代码:(根据英文首字母升序排列

// 根据英文首字母进行排序
arr1.sort(function(a, b) {
	return (a.name + '').localeCompare(b.name + '')
})
console.log(arr1)

控制台排序结果
在这里插入图片描述
降序排列也是一样的道理,只需把a和b的位置交换即可

// 根据英文首字母进行排序
arr1.sort(function(a, b) {
	return (b.name + '').localeCompare(a.name + '')
})
console.log(arr1)

控制台排序结果
在这里插入图片描述
英文的排序还是很简单的,弄清楚localeCompare()和sort()的用法即可。
在这里插入图片描述


下期文章将继续介绍根据中文首字母排序,分别提供localCompare和外部pinyin函数的引入两种方法,从两种情况入手——直接按照顺序排列、根据首字母排序分组。
感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

网站文章

  • a-descriptions-item描述列表点击按钮显示相应内容

    a-descriptions-item描述列表点击按钮显示相应内容

    实现功能:点击查询按钮,显示相应数据,部分数据只读,部分数据可修改。 实现思路:首先通过点击按钮事件从接口获取内容,然后通过{{}}显示在界面上。 查询按钮触发事件代码 searchQuery(){ ...

    2024-01-30 21:28:30
  • exe4j使用方法

    exe4j使用方法

    1.选jar in exe。2.选择jar包,选择主类。

    2024-01-30 21:28:24
  • Android ADIL和BInder

    Android ADIL和BInder

    AIDL(Android接口定义语言),可以使用它定义客户端与服务端进程间通信(IPC)的编程接口。在Android系统中,每个进程都运行在一块独立的内存中,在其中完成自己的各项活动,与其他进都分隔开...

    2024-01-30 21:28:16
  • 版本管理-SVN冲突爆红后如何通过颜色和快捷键准确无误地合并代码(一)

    版本管理-SVN冲突爆红后如何通过颜色和快捷键准确无误地合并代码(一)

    SVN冲突出现场景如今是一个团结协作的时代,开发一个系统,往往会多人协作共同完成。版本管理是必不可少的,常用的软件有Git,SVN等。今天说一下,SVN管理版本时,如果出现冲突后,如何快速解决冲突。首...

    2024-01-30 21:27:47
  • pom.xml配置文件讲解

    Maven 构件工程的属性文件 pom.xml文件(实践用):    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    2024-01-30 21:27:39
  • 分享112个PHP源码,总有一款适合您

    分享112个PHP源码,总有一款适合您

    php

    2024-01-30 21:27:33
  • vue watch监听对象及对应值的变化

    vue watch监听对象及对应值的变化

    var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{

    2024-01-30 21:27:26
  • 各位大侠门,遇到这种抉择,你会怎么选择!

    如果有一个公司给你2w一个月,但是去维护一个用webform做的项目,并且就只有你一个人维护,项目规模比较大,项目是针对中国和国外市场交易的平台,但是旧项目大概一年以后不会再使用,会换成java版本,...

    2024-01-30 21:26:47
  • 免费分享嵌入式stm32基础项目开发:心率检测仪的设计与实现

    本教程主要给大家谅解了嵌入式stm32开发 心率检测仪的设计与实现,需要的朋友们可以下载来看看,作为参考!项目描述:通过心律传感器采集我们的心律数据,然后通过串口传送到上位机中,上位机用Qt实现,当Qt接收数据之后,把数据绘制曲线,并计算显示心率心律波形。适合人群:零基础学员;在校大学生、应届毕业生、IT爱好者、跳槽换工作者、其他行业人员。课程内容:1:心律传感器简介及adc的原理

    2024-01-30 21:26:40
  • CentOS7安装docker

    1、yum更新sudo yum update2、安装需要的软件包,yum-util提供yum-config-manager功能,另外两个是devicemapper驱动依赖的sudo yum install -y yum-utils device-mapper-persistent-data lvm23、设置yum源为阿里云sudo yum-config-manager --add-r...

    2024-01-30 21:26:33