原生JS之sort排序方法详解

news2025/1/20 0:57:54

在JavaScript中排序主要用到的api就是sort了,但是使用sort有几个坑需要注意,让我们一起来看看

排序原理-不使用参数时

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。

默认排序顺序为按字典升序。

在不使用参数时,sort使用的是字典排序

如果数组中元素都是字符串,这点很好理解,比如:

var arr= new Array(); //创建一个空数组
arr= ['sun','xu','ma','he','wang','zhang'];
arr.sort(); //调用sort方法 

输出结果为:

he
ma
sun
wang
xu
zhang 

但是如果是数字呢?让我们来看看:

var a = new Array();
a = [1,10,100,5,25,99];
a.sort(); 

输出结果为:

1
10
100
25
5
99 

令人费解。。。但其实如果知道其原理就很容易理解,sort默认是按照字典顺序排序的;

字典序

字典序(dictionary order),又称 字母序(alphabetical order),原意是表示英文单词在字典中的先后顺序,在计算机领域中扩展成两个任意字符串的大小关系。

英文中的 字母表(Alphabet) 按照如下的顺序排列:

ABCDEFG HIJKLMN OPQRST UVWXYZ

abcdefg hijklmn opqrst uvwxyz

在字典中,单词是按照首字母在字母表中的顺序进行排列的,比如 alpha 在 beta 之前。而第一个字母相同时,会去比较两个单词的第二个字母在字母表中的顺序,比如 account 在 advanced 之前,以此类推。下列单词就是按照字典序进行排列的:

as

aster

astrolabe

astronomy

at

ataman

attack

baa

在计算机领域中,这个字典序就不仅仅用来比较英文单词了,而是比较任意字符串。对于两个字符串,大小关系取决于两个字符串从左到右第一个不同字符的 ASCII 值的大小关系。比如ah1x小于ahb,Z5小于a3,10小于101等

排序原理-使用参数

在大多数情况下,我们需要将数组中的数字按大小排序,就必须使用一个函数

使用数字排序,你必须通过一个函数作为参数来调用;函数指定数字是按照升序还是降序排列

// 数组排序 sort

let arr=[1,8,2,6,9,12,64,86,3,5,4,9,4]
console.log('-------------------------这是升序--------------------');
console.log(arr.sort(sort_s));
console.log('-------------------------这是降序--------------------');
console.log(arr.sort(sort_j));

// 升序
function sort_s(a,b){return a-b;
}

// 降序
function sort_j(a,b){return b-a;
} 

输出结果为:

注意事项

这种方法会改变原始数组! 这种方法会改变原始数组!这种方法会改变原始数组!重要的事情说三遍,排完后会直接影响原数组,并且元素不会进行复制,也就是说,sort()的返回值为原数组的引用,例如:

let arr=new Array()
arr=[2,4,1,8,5,3]
let arrt=arr.sort((a,b)=>a-b)
console.log(arr===arrt)//true 

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

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

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

相关文章

CSS 如何实现羽化效果?

最近碰到这样一个问题,在一张封面上直接显示书名,可能会存在书名看不太清楚的情况(容易受到背景干扰),如下 为了解决这个问题,设计师提了一个“究极”方案,将书名背后的图片模糊一下&#xff0c…

【OpenCV-Python】教程:6-1 相机标定

OpenCV Python 相机标定 【目标】 摄像机引起的失真类型如何找到相机的内参和外参如何基于这些特性校正这些图像 【理论】 一些针孔相机会导致图像发生严重失真,主要有两种,一是径向畸变,一是切向畸变。 径向畸变使直线看起来弯曲。距离…

Spring MVC学习 | 报文信息转换

文章目录一、HttpMessageConverter二、获取请求报文信息2.1 使用原生servletAPI2.2 使用RequestBody注解获取请求体信息2.3 使用RequestEntity对象获取请求报文信息三、设置响应报文信息3.1 使用原生的servletAPI3.2 使用ResponseBody注解设置响应体信息3.3 ResponseEntity类的…

Docker 镜像构建可以分享的快乐

通过上一篇 Dockerfile 语法与指令的学习,本节就开始使用Dockerfile 来制作自己的 Docker 镜像啦。 Docker 镜像构建 新建 app.py 文件 from flask import Flaskapp Flask(__name__)app.route(/) def hello():return Hello World! Hogwarts.本代码主要功能是当我…

二十八—— 四十三

二十八、JavaScript——if-else语句 if-else语句- 语法: if(条件表达式) { 语句 }else{ 语句。。。 } - 执行流程 if-else执行时,先对条件表达式进行判断 如果结果为true,则执行if后得而语句 如果结果为false,则执行else后的语句 if-else if-…

公众号名称排名优化

HTML 实例解释 <p> 元素&#xff1a; <p>This is my first paragraph.</p> 这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 <p>&#xff0c;以及一个结束标签 </p>。 元素内容是&#xff1a;This is my firs…

生产环境LVM卷ext4文件系统故障修复处理

一、问题描述 某项目因存储视频流泪数据,数据量较大,生产环境当时已达158TB,采用LVM+Ext4存储,在某次LVM在线扩容过程中,扩容失败,报错:inode_counter 溢出,从字面看就i节点数量超过最大限制了,被lvresize命令忽略,报出警告:Invalid argument While checking for on…

Ac-GA-K(Ac)-AMC,577969-56-3

Ac- gak (Ac)-AMC&#xff0c;在蛋白酶偶联试验中测量组蛋白去乙酰化酶I类(HDAC 1、2、3和8)和II类(HDAC 6和10)活性的荧光底物。hdac催化Lys脱乙酰生成Ac-GAK-AM。 Ac-GAK(Ac)-AMC, fluorogenic substrate for measuring histone deacetylase class I (HDAC 1, 2, 3, and 8) a…

朴素二进制表示法

思路方案 在安全领域的研究中我们发现&#xff0c;很多数据预处理的步骤&#xff0c;在不同的场景下中都可以相互 借鉴&#xff0c;甚至可以进行直接复用。例如&#xff0c;对于加密流量相关的数据&#xff0c;当算法工程师 获取到一批加密流量的 pcap 包之后&#xff0c;不论他…

「Docker学习系列教程」基础篇小总结及高级篇预告

通过前面十来篇的学习&#xff0c;我们已经把docker基础篇学习完了。这篇文章&#xff0c;咱们就来小总结下基础篇学习的东西以及介绍接下来高级篇中&#xff0c;将会学习到哪些知识点。 基础篇总结&#xff1a; 第一篇&#xff0c; 凯哥就介绍了怎么在Centos系统中安装D…

【微服务之分布式全局Id】分布式全局ID生成

分布式全局ID解决方案 1、UUID 最容易想到的就是 UUID (Universally Unique Identifier) 了&#xff0c; UUID 的标准型式包含 32 个 16 进制数字&#xff0c;以连字号分为五段&#xff0c;形式为 8-4-4-4-12 的 36 个字符&#xff0c;这个是 Java 自带的&#xff0c;用着也简…

DBCO-PEG-Silane|DBCO-PEG-SIL|二苯并环辛炔-聚乙二醇-硅烷

DBCO-PEG-Silane&#xff0c;DBCO 试剂是一类点击化学标记试剂&#xff0c;含有非常活泼的 DBCO&#xff08;&#xff08;二苯并环辛炔&#xff09;基团&#xff0c;DBCO 试剂可以通过无铜点击化学与叠氮化物标记的分子或生物分子发生反应。DBCO 点击化学可以在水性缓冲液中运行…

用噪点滤镜回忆童年电视机的雪花屏

介绍 相信很多人80,90后的同学对童年里电视机的突然出现刺啦刺啦的雪花屏记忆犹新&#xff0c;本期将用 pixi.js 来完成一个电视机播放动漫然后突然出现雪花屏的动画&#xff0c;里面主要讲解了如何使用pixi.js播放帧动画和如何用噪点滤镜制造雪花屏。 演示 正文 初始化渲染…

web前端网页设计期末课程大作业:关于城市旅游的HTML网页设计 ——北京

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…

微服务框架 SpringCloud微服务架构 多级缓存 48 多级缓存 48.2 OpenResty 快速入门

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 多级缓存 文章目录微服务框架多级缓存48 多级缓存48.2 OpenResty 快速入门48.2.1 直接开干48 多级缓存 48.2 OpenResty 快速入门 48.2.1 直…

Linux(三) makefile与gdb调试

makefile mkefile文件中定义了一系列的规则来指定&#xff0c;哪些文件需要线编译&#xff0c;哪些后编译&#xff0c;哪些需要重新编译&#xff0c;甚至进行更复杂的功能操作&#xff0c;因为makefile就像一个Shell脚本一样&#xff0c;其中也可以执行操作系统的命令。 mkef…

java计算机毕业设计基于安卓Android的教学考勤系统APP

项目介绍 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设…

4个表格1个工具,解决客户的分类及管理

1897年&#xff0c;意大利经济学者帕累托发现&#xff1a;“社会上20%的人占有80%的社会财富”。 后来这一法则被发现可以适用到很多领域&#xff0c;包括客户管理。具体解释为“一家企业80%的收益来源于20%的客户”&#xff0c;即20%客户创造了企业80%的收益。 由于20%的客户…

分布式事务处理方案大 PK

[toc] 说好了写 TienChin 项目的&#xff0c;最近这个分布式事务算是一个支线任务吧&#xff0c;今天是再来一个短篇和小伙伴们总结一下分布式事务。 首先先说一个大原则&#xff1a;分布式事务能不用就不要用&#xff0c;毕竟这个用起来还是有一些麻烦的。当然&#xff0c;不…

B/S端界面控件DevExtreme内置的图标库介绍

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#xff0c;Knockout等&#xff09;构建交互式的Web应用程序&#xff0c;该套件附带功能齐…