百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

JavaScript数组的简单排序(js实现数组的排序)

myzbx 2025-07-02 23:17 11 浏览

JavaScript数组的简单排序

前面的博客分两章分别讲解了数组对象的基本属性和方法,以及数组迭代方法的使用。今天我们再来讲一讲数组的排序问题。

1.数组的sort()方法

说到数组的排序,大家可能第一反应是前面学过一个数组排序的方法sort(),但是使用这个方法时要注意,sort()本身时可以传参数的,如果不传参数,那我们对数组项进行排序时就会按照ASCII字符顺序排序(也可以理解为字典的排序方式)。比如:

var arr=["a","A",10,1,20,2];
    console.log(arr.sort());//[1,10,2,20,"A","a"]

看到上面的代码时,可能和大家想的不太一样,但是对照下图ASCII码表不难发现,在表中能看到数字排在大写字母前面,大写字母又排在小写字母前面。所以打印的结果会是代码所示。

补充一下:其实,sort()方法会调用每个数组项的toString()方法,得到字符串,然后再对字符串进行排序。

2.数组的sort()方法添加参数

上面的操作中我们虽说也对数组进行了排序,但是并没有得到我们想要的结果。这个时候sort()的参数就起到作用了。当然这个参数是一个函数,我们可以称之为比较函数。

比较函数可以接收两个参数,如果第一参数小于第二个参数,则返回一个负数,相等则返回0,如果第一个参数大于第二个参数则返回正数:

var arr3 = [10, 20, 1, 15, 2, 33, 4];
    function shengxu(a, b) {
        if (a < b) {
            return -1
        } else if (a > b) {
            return 1
        } else {
            return 0
        }
    }
    console.log(arr3.sort(shengxu));//[1, 2, 4, 10, 15, 20, 33]

使用上面的方法便可以得到我們想要的升序的排序方式。

如果想要降序排列,只需要修改比较的条件即可:

    var arr3 = [10, 20, 1, 15, 2, 33, 4];
    function jiangxu(a, b) {
        if (a > b) {
            return -1
        } else if (a < b) {
            return 1
        } else {
            return 0
        }
    }
    console.log(arr3.sort(jiangxu));// [33, 20, 15, 10, 4, 2, 1]

此时,可以将数组项进行降序排列。

3.比较函数的简化

上面的两个比较函数可以进行简化,如下:

    var arr3 = [10, 20, 1, 15, 2, 33, 4];
    // 升序
    function shengxu2(a, b) {
        return a - b;
    }
    // 降序
    function jiangxu2(a, b) {
        return b - a;
    }
    console.log(arr3.sort(shengxu2));//[1, 2, 4, 10, 15, 20, 33]
    console.log(arr3.sort(jiangxu2));// [33, 20, 15, 10, 4, 2, 1]

注意:使用sort()方法传入参数比较函数之后也只是可以对数字进行排序,当数组项中出现字符时,会将字符转化为数字进行比较,字符不能转化为数字,所以数字和字符还是会按照ASCII排序进行比较。但是此时大写字母会排在小写字母之后。

    var arr = ["a","A",10, 20, 1, 15, 2, 33, 4];
    function shengxu(a, b) {
        return a - b;
    }
    console.log(arr.sort(shengxu));//["a", "A", 1, 2, 4, 10, 15, 20, 33]


相关推荐

掌握JavaScript中的Call和Apply,让你的代码更强大、更灵活

在学习JavaScript时,你可能会遇到call和apply这两个方法。它们的作用其实很相似,都是用来调用函数并设置函数内部的this值,但它们的使用方式稍有不同。想象一下,你和朋友们一起拍照。ca...

性能调优方面,经常要优化跑的最慢的代码,教你一种快速的方法

在我们遇到性能问题的时候,很多时候需要去查看性能的瓶颈在哪里,本篇文章就是提供了多种常用的方案来监控函数的运行时间。1.time首先说明,time模块很多是系统相关的,在不同的OS中可能会有一些精度差...

call和apply的实现方式_call和apply用法

call和apply的实现方式1、函数Function.call()的实现//第一步简单是实现call()varfoo={value:”1”,bar:function(){conso...

线上问题排查:接口超时_接口超时时间设置多少合适

最近就看到了一个非常厉害的关于“接口超时”问题排查的帖子,从应用排查到内核级别。虽然看到后面的时候我已经有点跟不上了,但是对于整个问题排查的过程还是比较清晰的。(细节不重要,排查思路,方向值得学习)问...

javascript中的call方法的另一种实现方式-更接近原方法

上集我们说到对应的我们自己实现的call方法还是有一点纰漏,这里我们就解决它//一、预备知识(简单介绍)//1、Function.prototype.call()//语法:function....

链接器是如何一步步发明出来的?_如何使用连接器

在计算机编程的早期年代,你面临一个挥之不去的的噩梦。。。你找了一个刚刚运行成功的程序仔细看了看:; main.asm - 主程序start:  &nb...

Day59:回调(callback)函数_回调 callback

定义Acallbackisafunctionthatispassedasanargumenttoanotherfunctionandisexecutedafteri...

大促数据库压力激增,如何一眼定位 SQL 执行来源?

作者:京东科技王奕龙你是否曾经遇到过这样的情况:在大促活动期间,用户访问量骤增,数据库的压力陡然加大,导致响应变慢甚至服务中断?更让人头疼的是,当你试图快速定位问题所在时,却发现难以确定究竟是哪个业...

一键追欠料!WPS表格实战MRP欠料计算-7

昨天第6章内容主要聚焦于本报表的核心欠料运算。通过子件库存的引用以及累计需求的计算,计算出了子件的累计欠料。累计欠料的显示方式是按日期进行逐日累加,并不能清晰的看到每张订单欠料多少?所以在今日第7章的...

Python教程(二十五):装饰器–函数的高级用法

今天您将学习什么什么是装饰器以及如何创建装饰器函数装饰器和类装饰器带参数的装饰器装饰器的实际应用真实世界示例:日志记录、性能监控、缓存、权限验证什么是装饰器?装饰器是Python中的一种...

在 Excel 日历制作中,尤其是动态日历方案,会用到的多个函数详解

在Excel日历制作中,尤其是动态日历方案,会用到多个核心函数。下面我将详细解析这些函数的作用、参数和使用技巧:核心日期函数1.DATE(year,month,day)作用:创建指定日期参...

java高级用法之:在JNA中将本地方法映射到JAVA代码中

简介不管是JNI还是JNA,最终调用的都是native的方法,但是对于JAVA程序来说,一定需要一个调用native方法的入口,也就是说我们需要在JAVA方法中定义需要调用的native方法。对于JN...

14.4 查找与引用函数综合应用 - 下

一、使返回错误值以简化公式例提取一二三级科目名称在下图所示的科目代码表中,A列为科目代码,B列为对应科目名称。A列科目代码中长度为4的为一级代码,长度为6的为二级代码,长度为8的为三级代码。要求根据...

记一次酣畅淋漓的JavaScript逆向_js逆向webpack

背景介绍今天在写爬虫的练习题时遇到了这样一个难题:目标资源是一个图片的url,但是不同于以往的情况,我在http响应记录里搜索这个图片的url,发现并不能搜到。从逻辑上来讲,这个url被展示到浏览器上...

「Postman」测试(Tests)脚本编写和断言详解

测试确认您的API按预期工作,服务之间的集成运行可靠,并且新开发没有破坏任何现有功能。您可以使用JavaScript为PostmanAPI请求编写测试脚本。当您的API项目出现问题时...