用Javascript对二维数组DIY按汉语拼音的排序方法

news2025/10/31 12:16:21

继续编写“圳品”信息系统，将“圳品”信息读取到JavaScript定义的一个二维数组中进行处理和显示：

var p = [
  [100, "都安县丙公司", "产品ab", 5, 25, 10],
  [50, "南丹县a公司", "产品a", 5, 25, 10],
  [30, "罗城县c公司", "产品a", 5, 25, 10],
  [100, "都安县乙公司", "产品ac", 5, 25, 10],
  [50, "南丹县b公司", "产品a", 5, 25, 11],
  [50, "南丹县a公司", "产品b", 5, 25, 10],
  [30, "罗城县c公司", "产品b", 5, 25, 10],
  [50, "南丹县a公司", "产品c", 5, 25, 10],
  [100, "都安县甲公司", "产品ab", 5, 25, 10]];

在显示前要做的处理主要就是排序，首先要按圳品所属县（区）依金城江区、宜州区、罗城仫佬族自治县、环江毛南族自治县、南丹县、天峨县、东兰县、巴马瑶族自治县、凤山县、都安瑶族自治县、大化瑶族自治县的顺序进行排序；

接下来，对属于同个一县（区）的圳品，要按其生产企业来依公司a、公司b……的顺序来排序。

这就涉及到对二维数组的排序了。

JavaScript为数组对象内置了sort() 方法，sort() 方法默认是以字母顺序对数组进行排序。

使用默认的 sort() 方法排序的结果是：

[100,都安县丙公司,产品ab,5,25,10],
[100,都安县乙公司,产品ac,5,25,10],
[100,都安县甲公司,产品ab,5,25,10],
[30,罗城县c公司,产品a,5,25,10],
[30,罗城县c公司,产品b,5,25,10],
[50,南丹县a公司,产品a,5,25,10],
[50,南丹县a公司,产品b,5,25,10],
[50,南丹县a公司,产品c,5,25,10],
[50,南丹县b公司,产品a,5,25,11],

这不符合我们上面说罗城>南丹 >都安县的排列顺序要求，由于“圳品”信息中有一部份是数值，我们需要按数值来排序，这样我们就要 DIY一个自己排序方法来实现。

排序的思路是，对数组从左到右逐列进行比较，不相同则对调；相同则比较下一列。

实现的代码如下：

function diySort1(a, b)
{
    document.getElementById("debug").innerHTML += "<br>a=[" + a+"]             "+"b=["+b+"]";
    var i;
    for    (i=0;i < a.length; i++)
    {
        if(a[i] == b[i])
        {
            continue;
        }
        else
        {
            return  a[i] - b[i];
        }
    }
    return 0; 
}

排序的结果如下：

[30,罗城县c公司,产品a,5,25,10],
[30,罗城县c公司,产品b,5,25,10],
[50,南丹县a公司,产品a,5,25,10],
[50,南丹县b公司,产品a,5,25,11],
[50,南丹县a公司,产品b,5,25,10],
[50,南丹县a公司,产品c,5,25,10],
[100,都安县丙公司,产品ab,5,25,10],
[100,都安县乙公司,产品ac,5,25,10],
[100,都安县甲公司,产品ab,5,25,10],

基本达到我们的要求了，

但最后三行中的“都安县丙公司”、“都安县乙公司” 和 “都安县甲公司”不符合我们中国的习惯，因为我们汉字一般是按拼音来排序的。

要按汉语拼音来排序的话，可以使用localeCompare方法。该方法对纯英文会按字母顺序来，大写排在小写的后面，对于汉字，会根据我们的中文系统，把汉字先转换成了拼音，再进行了比较；对于同拼音的汉字，js再根据声调进行比较。汉英混排时默认是将英文放在前面。

其语法为：

stringObject.localCompare(target, locals)

要在数组中实现按首字符升序排列可以这样写：

p.sort(function(x, y){  return x[0].localeCompare(y[0],'zh');});

如果x和y相等，或根据本地排序规则没有区别，返回 0，不作调整；

如果 x[0] 小于 y[0]，则 返回小于 0 的数，将x放到y的前面；

如果 x[0] 大于 y[0]，返回大于 0 的数，把数组中x放到y的后面。

要降序排列的话，可以改成

p.sort(function(x, y){ return y[0].localeCompare(x[0],'zh');} );

把localeCompare方法用到我们自己的排序函数中，代码如下：

function diySort2(a, b)
{
    var i, r, d;
    d = document.getElementById("debug");
    d.innerHTML += "<br>a=[" + a+"]             "+"b=["+b+"] "; 
    for (i=0; i < a.length; i++)
    {
        d.innerHTML += "<br>typeof(a[i])="  + typeof(a[i]); 
        if (typeof(a[i])=="string")
        {
            r = a[i].localeCompare(b[i]);
            d.innerHTML += "<br>r=" + r;
            return r;
        }
        else 
        { 
            if(a[i] == b[i])
            {
                continue;
            }
            else
            {
                return  a[i] - b[i];
            }
        }
        return 0;
    }      
}

先作数据类型判断，如果是字符串类型（string），就用localeCompare方法，否则按数值来排序。排序结果为：

[30,罗城县c公司,产品a,5,25,10],
[30,罗城县c公司,产品b,5,25,10],
[50,南丹县a公司,产品a,5,25,10],
[50,南丹县a公司,产品b,5,25,10],
[50,南丹县a公司,产品c,5,25,10],
[50,南丹县b公司,产品a,5,25,11],
[100,都安县丙公司,产品ab,5,25,10],
[100,都安县甲公司,产品ab,5,25,10],
[100,都安县乙公司,产品ac,5,25,10],

为了方便对比，我把三种排序方法的结果并列显示出来。

为了了解具体排序过程，我在DIY的排序方法中将系统每次用来比较的数组元素及其类型作为调试信息都输出来，这样就比较直观了。

完整的代码如下：

<!DOCTYPE html>
<html>
  <style>
    table    {border-collapse:collapse;}
    th,td        { border: 1px solid black;}
  </style>
<body>
<h1>JavaScript二维数组排序</h1>
<p>单击按钮以升序对数组进行排序。</p>
<p>
    <button onclick="defSort()">默认排序</button>
    <button onclick="mySort1()">自定义排序1</button>
    <button onclick="mySort2()">自定义本地化排序2</button>
 </p>
 <table>
 <tr>
    <td>原始二维数组</td>
    <td>默认排序后的二维数组</td>
    <td>自定义排序1的二维数组</td>
     <td>自定义本地化排序2的二维数组</td>
 </tr>
 <tr>
    <td>
        <p id="demo" ></p>
    </td>
    <td>
        <p id="defSort"></p>  
    </td>
    <td>
        <p id="mySort1"></p>    
    </td>
    <td>
        <p id="mySort2"></p>    
    </td>
 </tr>
 <tr>
    <td colspan="4">调试信息：</td>
 </tr>
 <tr>
    <td colspan="4"><p id="debug" ></p></td>
 </tr>
 </table>
<script>
var p = [
[100, "都安县丙公司", "产品ab", 5, 25, 10],
  [50, "南丹县a公司", "产品a", 5, 25, 10],
  [30, "罗城县c公司", "产品a", 5, 25, 10],
  [100, "都安县乙公司", "产品ac", 5, 25, 10],
  [50, "南丹县b公司", "产品a", 5, 25, 11],
  [50, "南丹县a公司", "产品b", 5, 25, 10],
  [30, "罗城县c公司", "产品b", 5, 25, 10],
  [50, "南丹县a公司", "产品c", 5, 25, 10],
  [100, "都安县甲公司", "产品ab", 5, 25, 10]];  

function w1()  
{
    var i;
    document.getElementById("demo").innerHTML = "";
    for (i=0; i <p.length;i++)
    {
        document.getElementById("demo").innerHTML += '['+ p[i]+ '],<br>';
    }
}  
w1();

function w3()  
{
    document.getElementById("defSort").innerHTML ='';
    var i;
    for (i=0; i <p.length; i++)
    {
        document.getElementById("defSort").innerHTML += '['+ p[i]+ '],<br>';
    }
}  

function defSort()
{
    p.sort();
    w3();
}

function diySort1(a, b)
{
    document.getElementById("debug").innerHTML += "<br>a=[" + a+"]             "+"b=["+b+"]";
    var i;
    for (i=0;i < a.length; i++)
    {
        if(a[i] == b[i])
        {
            continue;
        }
        else
        {
            return  a[i] - b[i];
        }
    }
    return 0; 
}  


function diySort2(a, b)
{
    var i, r, d;
    d = document.getElementById("debug");
    d.innerHTML += "<br>a=[" + a+"]             "+"b=["+b+"] "; 
    for (i=0; i < a.length; i++)
    {
        d.innerHTML += "<br>typeof(a[i])="  + typeof(a[i]); 
        if (typeof(a[i])=="string")
        {
            r = a[i].localeCompare(b[i]);
            d.innerHTML += "<br>r=" + r;
            return r;
        }
        else 
        { 
            if(a[i] == b[i])
            {
                continue;
            }
            else
            {
                return  a[i] - b[i];
            }
        }
        return 0;
    }      
}  



function w2(i)  
{
    var d = document.getElementById("mySort"+i );
    d.innerHTML ='';
    var i;
    for (i=0; i <p.length;i++)
    {
        d.innerHTML +=  '['+ p[i]+ '],<br>';
    }
} 

function mySort1() 
{
    p.sort(diySort1);
    w2('1');
}


function mySort2() 
{
    p.sort(diySort2);
    w2('2');
}
</script>

</body>
</html>

截图如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/338975.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

力扣sql简单篇练习(十五)

力扣sql简单篇练习(十五)

力扣sql简单篇练习(十五) 1 直线上的最近距离 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 SELECT min(abs(p1.x-p2.x)) shortest FROM point p1 INNER JOIN point p2 ON p1.x <>p2.x1.3 运行截图 2 只出现一次的最大数字 2.1 题目内容 2…
阅读更多...
教你如何用Python分析出选注双色球号码

教你如何用Python分析出选注双色球号码

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ 数据集介绍 找从19年到现在的开奖历史数据&#xff0c;我们首先要把这个历史数据拿到&#xff0c; 拿到我们再进行做分析&#xff0c;分析每个号码出现的频率是多少&#xff0c; 哪个多&#x…
阅读更多...
Java零基础教程——控制语句

Java零基础教程——控制语句

目录程序流程控制顺序结构分支结构if分支语句案例&#xff1a;switch分支案例&#xff1a;循环结构for循环while循环do-while循环跳转控制语句程序流程控制 顺序结构 没什么好说的就是&#xff1a;程序默认执行流程(如下) public class Test {public static void main(String…
阅读更多...
spring中bean的生命周期（简单5步）

spring中bean的生命周期（简单5步）

目录 一、概念 1.生命是bean的生命周期&#xff1f; 2.知道bean生命周期的意义&#xff1f; 3.bean的生命周期按照粗略的五步 二、例子讲解 一、概念 1.生命是bean的生命周期&#xff1f; 答&#xff1a;spring其实就是管理bean对象的工厂&#xff0c;它负责对象的创建&…
阅读更多...
[K8S]Kubernetes环境检测与API简介

[K8S]Kubernetes环境检测与API简介

文章目录环境判断docker环境检测K8S环境检测获取POD的NamespaceAPI Server概述API访问命令行方式编程方式REST API是Kubernetes系统的重要部分&#xff0c;组件之间的所有操作和通信均由API Server处理的REST API调用。环境判断 在使用API时&#xff0c;需要先判断是否是K8S环…
阅读更多...
实施ITIL项目的十个参考步骤

实施ITIL项目的十个参考步骤

ITIL是我们做好IT服务管理流程建设与治理的一个重要知识库&#xff0c;这个知识体系的内容非常丰富&#xff0c;做到全面领会并运用自如是比较困难的。因此&#xff0c;我们提供了这样的一份实施ITIL项目的参考步骤&#xff0c;在新建或治理企业IT管理流程时可以适当借鉴&#…
阅读更多...
elasticsearch索引与搜索初步

elasticsearch索引与搜索初步

ES支持cURL交互&#xff0c;使用http请求完成索引和搜索操作&#xff0c;最基本的格式如下&#xff1a;创建索引我们可以使用PUT方法创建索引&#xff0c;通过指定“索引”、“类型”、“文档ID”锁定文档&#xff0c;通过参数指定文档的数据。红色部分的路由分别指定了“索引”…
阅读更多...
Homekit智能家居DIY一智能插座

Homekit智能家居DIY一智能插座

WiFi智能插座对于新手接触智能家居产品更加友好&#xff0c;不需要额外购买网关设备 很多智能小配件也给我们得生活带来极大的便捷&#xff0c;智能插座就是其中之一&#xff0c;比如外出忘记关空调&#xff0c;可以拿起手机远程关闭。 简单说就是&#xff1a;插座可以连接wi…
阅读更多...
【博客618】docker容器重启后读写层数据并不丢失的原理

【博客618】docker容器重启后读写层数据并不丢失的原理

docker容器重启后读写层数据并不丢失的原理 1、场景 当我们对docker容器执行restart后&#xff0c;其实容器中原本读写层里对临时数据还在。只有我们删除了这个容器&#xff0c;重新创建的容器是基于镜像的只读层然后挂载上新的空的读写层&#xff0c;此时临时数据是不在的 2、…
阅读更多...
详解指针（2）（初阶版）

详解指针（2）（初阶版）

前言&#xff1a;内容包括&#xff1a;指针运算&#xff0c;指针和数组&#xff0c;二级指针&#xff0c;指针数组 详解指针&#xff08;1&#xff09;&#xff08;点击即跳转&#xff09; part 1&#xff1a;指针运算 1 指针-整数 以如下代码为例&#xff1a;初始化数组内容…
阅读更多...
实验名称：经典同步问题：生成者与消费者问题

实验名称：经典同步问题：生成者与消费者问题

实验名称&#xff1a;经典同步问题&#xff1a;生成者与消费者问题 相关知识 信号量 信号量是用来协调不同进程间的数据对象&#xff0c;可用来保护共享资源&#xff0c;也能用来实现进程间及同一进程不同线程间的进程同步。分为二值信号灯和计算信号灯两种类型。 进程与线…
阅读更多...
VOC数据增强与调整大小

VOC数据增强与调整大小

数据增强是针对数据集图像数量太少所采取的一种方法。 博主在实验过程中&#xff0c;使用自己的数据集时发现其数据量过少&#xff0c;只有280张&#xff0c;因此便想到使用数据增强的方式来获取更多的图像信息。对于图像数据&#xff0c;我们可以采用旋转等操作来获取更多的图…
阅读更多...
Android Dalvik虚拟机 堆初始化流程

Android Dalvik虚拟机 堆初始化流程

前言 上篇文章介绍了dalvik虚拟机启动流程&#xff0c;在dalvik虚拟机启动时调用了dvmGcStartup来启动堆。 本文介绍我们在日常开发使用Java时的堆创建流程。 Dalvik堆介绍 Dalvik虚拟机中&#xff0c;堆是由heap[0] Active堆和heap[1] Zygote堆两部分组成的。其中&#xff…
阅读更多...
13 Day：实现内核线程

13 Day：实现内核线程

前言&#xff1a;我们昨天完成了内核的内存池以及内存管理程序&#xff0c;今天我们要揭开操作系统多任务执行的神秘面纱&#xff0c;来了解并实现一个多任务的操作系统。 一&#xff0c;实现内核线程 在聊线程之间我们先聊聊处理器吧&#xff0c;众所周之现在我们的CPU动不动…
阅读更多...
心跳太快对身体带来影响？4种方法来减速！

心跳太快对身体带来影响？4种方法来减速！

心脏每时每刻都在跳动&#xff0c;跳动时遵循一定的节律。正常情况下成年人每分钟心跳达到60~120下&#xff0c;若心跳每分钟大于120下&#xff0c;被判断为心动过速&#xff1b;若心跳每分钟不足50下&#xff0c;被判断为心动过缓&#xff0c;无论是哪种因素均会影响身体健康。…
阅读更多...
详解Redisson分布式限流的实现原理

详解Redisson分布式限流的实现原理

我们目前在工作中遇到一个性能问题&#xff0c;我们有个定时任务需要处理大量的数据&#xff0c;为了提升吞吐量&#xff0c;所以部署了很多台机器&#xff0c;但这个任务在运行前需要从别的服务那拉取大量的数据&#xff0c;随着数据量的增大&#xff0c;如果同时多台机器并发…
阅读更多...
如何用Python打包好exe文件，并替换图标

如何用Python打包好exe文件，并替换图标

前言 Python打包&#xff1f;打包exe文件&#xff1f;怎么操作&#xff1f; ok&#xff0c;今天我来分享分享&#xff0c;教你们如何打包号文件&#xff0c;顺便还来展示一下&#xff0c;如何替换好图标 首先把你的代码准备好&#xff0c;尽量不要中文路径&#xff0c;容易报…
阅读更多...
flex 布局

flex 布局

设为 Flex 布局以后&#xff0c;子元素的float、clear和vertical-align属性将失效。 flex 和 inline-flexflex&#xff1a; 将对象作为弹性伸缩盒显示inline-flex&#xff1a;将对象作为内联块级弹性伸缩盒显示<style>.main {background-color: #0f0;display: flex; /*父…
阅读更多...
【VictoriaMetrics】VictoriaMetrics启停脚本

【VictoriaMetrics】VictoriaMetrics启停脚本

先看结果,启动VictoriaMetrics UI界面可访问
阅读更多...
有趣的Hack-A-Sat黑掉卫星挑战赛——定位卫星Jackson

有趣的Hack-A-Sat黑掉卫星挑战赛——定位卫星Jackson

国家太空安全是国家安全在空间领域的表现。随着太空技术在政治、经济、军事、文化等各个领域的应用不断增加&#xff0c;太空已经成为国家赖以生存与发展的命脉之一&#xff0c;凝聚着巨大的国家利益&#xff0c;太空安全的重要性日益凸显[1]。而在信息化时代&#xff0c;太空安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023