JavaScript的数组排序

news2025/1/9 16:39:32

天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


羡君无纷喧,高枕碧霞里。


文章目录

  • 数组的排序
    • 1. 举例
    • 2. 举例结果打印
    • 3. sort()函数
    • 4. 数组排序的实现
      • 4.1 比较器的定义
      • 4.2 排序示例代码
      • 4.3 控制台结果打印
    • 4. 示例代码下载


JS系列篇:
JS(JavaScript)入门学习指南
JS(JavaScript)学习专栏


数组的排序

排序调用sort()方法,但一下几种情况的结果好像和我们想象的结果不太一样

1. 举例

排序举例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匿名函数-举例-比较器</title>
    <script>

        //举例
        var list = [1,2,3,22,33,11,9,5];
        console.log("排序前:",list);
        console.log("排序后:",list.sort());
        var strList = ["libai","baijuyi","menghaoran","ouyangxiu","lishangyin"];
        console.log("排序前:",strList);
        console.log("排序后:",strList.sort());
    </script>
</head>
<body>
    
</body>
</html>

2. 举例结果打印

浏览器打印结果
在这里插入图片描述
结果显示:
数值的数组排序是按照数值的首位从0-9排序,首位相同则根据第二位进行排序。
字符串的排序是按照第一个字符根据字母排序来进行排的,首位相同则根据第二位进行排序。

3. sort()函数

默认的sort()函数,排序的规则是根据每个元素的第一个字符开始按照字母和数字的顺序排序,第一个字符相同,则根据第二个字符进行排序
想要根据数值大小进行排序则需要自定义比较器

4. 数组排序的实现

4.1 比较器的定义

升序
第一个参数比第二个参数大则返回正数,第一个参数比第二个参数小则返回负数,相等则返回0

        function compare(a,b){
            return a-b;
        }

降序
第一个参数比第二个参数大则返回负数,第一个参数比第二个参数小则返回正数,相等则返回0

        function compare(a,b){
            return b-a;
        }

4.2 排序示例代码

数组排序示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匿名函数-举例-比较器</title>


    <script>

        //举例
        var list = [1,2,3,22,33,11,9,5];
        // list.forEach(function(value,index){
        //     console.log(index);
        //     console.log(value);
        // });

        console.log("排序前:",list);
        console.log("排序后:",list.sort());
        var strList = ["libai","baijuyi","menghaoran","ouyangxiu","lishangyin"];
        console.log("排序前:",strList);
        console.log("排序后:",strList.sort());

        console.log("--------------------------------------------------------------------");

        //定义比较器
        //升序,第一个参数比第二个参数大则返回正数,第一个参数比第二个参数小则返回负数,相等则返回0
        function compare(a,b){
            return a-b;
        }

        console.log("排序前:",list);
        //定义的比较规则函数作为参数闯入,进行排序
        console.log("排序后:",list.sort(compare));

        console.log("--------------------------------------------------------------------");

        //降序,第一个参数比第二个参数大则返回负数,第一个参数比第二个参数小则返回正数,相等则返回0
        function compare2(a,b){
            return b-a;
        }
        console.log("排序前:",list);
        //定义的比较规则函数作为参数闯入,进行排序
        console.log("排序后:",list.sort(compare2));

        // function fn(value,index){
        //     console.log(index,value);
        // }

        // list.forEach(fn);

    </script>

</head>
<body>
    
</body>
</html>

4.3 控制台结果打印

浏览器结果输出
在这里插入图片描述

4. 示例代码下载

示例代码已上传至CSDN资源库
下载地址:JavaScript 数组排序 比较器 示例代码


感谢阅读,祝君暴富!

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

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

相关文章

css设置滚动条样式;滚动条设置透明

滚动条透明代码 .resizable-div {resize: both;/* 允许水平和垂直调整大小 */overflow: auto;/* 确保内容超出边界时出现滚动条 */ } /* 滚动条整体样式 */ .resizable-div::-webkit-scrollbar {width: 4px; /* 竖直滚动条宽度 */height: 4px; /* 水平滚动条高度 */ }/* 滚动条…

使用uniapp设置tabbar的角标和移除tabbar的角标

使用场景描述 在一进入到小程序的时候就要将用户在购物车中添加的商品总数&#xff0c;要以角标的形式显示在tababr中。 代码实现 //index.vue<script setup> import { onLoad } from dcloudio/uni-apponLoad(()>{uni.setTabBarBadge({index: 1,text: 5 //为了实现…

VBA实现关闭Excel自动计算,关闭屏幕刷新

Excel代码提速神器 涉及到提取表格大量数据操作&#xff0c;复制粘贴多个单元格时&#xff0c;尽量避免一个个单元格提取&#xff0c;或者一行行一列列提取数值&#xff0c;设计大量IO流操作非常浪费时间。尽量找出数据之间的规律&#xff0c;批量选中复制粘贴&#xff0c;找到…

【大数据】Spark使用大全:下载安装、RDD操作、JAVA编程、SQL

目录 前言 1.下载安装 2.RDD操作 3.JAVA编程示例 4.Spark SQL 前言 本文是作者大数据系列中的一文&#xff0c;专栏地址&#xff1a; https://blog.csdn.net/joker_zjn/category_12631789.html?spm1001.2014.3001.5482 该系列会成体系的聊一聊整个大数据的技术栈&…

P3388 【模板】割点(割顶)

题目背景 割点 题目描述 给出一个 n 个点&#xff0c;m 条边的无向图&#xff0c;求图的割点。 输入格式 第一行输入两个正整数 n,m。 下面 m 行每行输入两个正整数 x,y 表示 x 到 y 有一条边。 输出格式 第一行输出割点个数。 第二行按照节点编号从小到大输出节点&am…

实验五 网络中的树

文章目录 5.1 网络中的树第一关 认识树相关知识编程要求代码文件 第2关 根节点的二阶邻居求解方法相关知识编程要求代码文件 第3关 根节点的n阶邻居求解方法相关知识 5.2 权值矩阵与环&#xff08;无向网络&#xff09;第1关 无向网络的权值矩阵相关知识编程要求代码文件 第2关…

CrossOver 2024软件下载-CrossOver 2024详细安装教程

Crossover软件是一款可以在Mac、Linux和Chromebook上运行Windows程序的软件。 它是一款商业软件&#xff0c;由CodeWeavers公司开发&#xff0c;Crossover不是一个虚拟机或模拟器&#xff0c;它使用Wine技术来将Windows程序直接转换成可以在其他操作系统上运行的程序&#xff0…

基于SpringBoot3+Vue3宠物小程序宠物医院小程序的设计与实现

大家好&#xff0c;我是程序员小孟。 最近开发了一个宠物的小程序&#xff0c;含有详细的文档、源码、项目非常的不错&#xff01; 一&#xff0c;系统的技术栈 二&#xff0c;项目的部署教程 前端部署包&#xff1a;npm i 启动程序&#xff1a;npm run dev 注意事项&…

HSP_07章 排序和查找

P96_ 冒泡排序 排序的基本介绍 冒泡排序介绍 冒泡排序思路分析 代码 # 说明,如果只是完成排序功能,我们可以直接使用list的方法sort # 排序的列表 num_list[24,69,80,57,13,0,900,-1] print("排序前".center(32,"-")) print(f"num_list: {num_list}…

Ceph入门到精通-Bucket 生命周期的作用,新手该如何设置?

存储桶(Bucket)生命周期策略的作用主要是帮助存储管理员高效地管理对象的存储周期,包括对象的转换、存档和删除。以下是关于桶生命周期的作用和配置的概述: 一、桶生命周期的作用: 存储优化:通过将对象转换到更经济的存储类别,降低存储成本。 数据管理:自动删除不再需…

交换机简介

一、 集线器的替代品—交换机 使用集线器的缺点&#xff0c;因此就设计出了交换机来代替集线器&#xff0c;交换机常见端口数量一般有4、8、16、24、32等数量。 华为交换机&#xff1a;S5720-HI系列 仅从实物图上来看&#xff0c;交换机和集线器非常的像&#xff0c;但是它们的…

Python第二语言(十一、Python面向对象(下))

目录 1. 封装 1.1 私有成员&#xff1a;__成员、__成员方法 2. 继承&#xff1a;单继承、多继承 2.1 继承的基础语法 2.2 复写 & 子类使用父类成员 3. 变量的类型注解&#xff1a;给变量标识变量类型 3.1 为什么需要类型注解 3.2 类型注解 3.3 类型注解的语法 3.…

visio添加表格

插入Excel表格&#xff1a; 打开Microsoft Visio&#xff0c;新建一个空白画布。点击菜单栏中的“插入”。在插入中点击“图表”。在弹出的插入对象设置页面中选择“Microsoft Excel工作表”。点击确定按钮&#xff0c;然后在表格中输入内容。将鼠标点击到画布的空白处&#x…

大数据在商业中的应用——Kompas.ai如何助力企业决策

引言 在现代商业中&#xff0c;大数据逐渐成为企业决策的重要工具。通过对海量数据的分析和处理&#xff0c;企业可以获得重要的市场信息和决策支持。本文将探讨大数据在商业中的应用&#xff0c;并介绍Kompas.ai如何通过AI技术助力企业决策。 大数据的发展及其重要性 大数据…

迅狐跨境商城系统|全平台兼容|前端采用uni-app跨端框架,后端采用ThinkPHP5框架

高效实现全平台兼容的迅狐跨境商城系统 迅狐跨境商城系统是一款专为跨境电商企业设计的全平台兼容系统。其前端采用uni-app跨端框架&#xff0c;后端采用ThinkPHP5框架&#xff0c;旨在实现高效的开发和运营管理。 1. 全平台兼容的前端设计 迅狐跨境商城系统的前端采用uni-a…

MathType7.6永久免费功能强大的数学公式编辑器

亲爱的科技博主们&#xff0c;今天我要给大家种草一个神奇的工具——MathType 7.6&#xff01;&#x1f9ee;✨ 作为一名科技博主&#xff0c;我经常需要处理各种复杂的数学公式和符号。以前我总是为这个问题烦恼不已&#xff0c;但是自从我发现了MathType 7.6&#xff0c;一切…

语义分割和目标检测的关系

目录 1.语义分割的目标 2.目标检测的目标 3.两种任务的异同之处 从大方向的任务特点上来说 &#xff08;1&#xff09;物体的位置 &#xff08;2&#xff09;物体的分类 从数据格式来说 (1&#xff09;语义分割的数据格式 (2&#xff09;目标检测的数据格式 1.语义分…

AVR晶体管测试仪开源项目编译

AVR晶体管测试仪开源项目编译 &#x1f4cd;原项目地址&#xff1a;https://github.com/Mikrocontroller-net/transistortester/tree/master&#x1f33f; https://github.com/svn2github/transistortester&#x1f33f; https://github.com/wagiminator/ATmega-Transistor-Tes…

python 只有ListNode类的情况下,创建链表和遍历链表

class ListNode:def __init__(self, val0, nextNone):self.val valself.next nextif __name__ __main__: linklist dummy ListNode() for x in ([2,4,3]): linklist .next ListNode(x) linklist linklist .nextwhile dummy:print(dummy.val)dummy dummy.next 这里的…

互联网应用主流框架整合之SpringMVC基础组件开发

多种传参方式 在前一篇文章互联网应用主流框架整合之SpringMVC初始化及各组件工作原理中讨论了最简单的参数传递&#xff0c;而实际情况要复杂的多&#xff0c;比如REST风格&#xff0c;它往往会将参数写入请求路径中&#xff0c;而不是以HTTP请求参数传递&#xff1b;比如查询…