JavaScript排序 — sort()方法

——解决null、undefined、0之间的排序(混乱)问题

一、普通的数组排序

​ JavaScript中用方法sort()为数组排序。sort()方法有一个可选参数,是用来确定元素顺序的函数。如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序。

  • 数组元素是字符串
//定义新字符串元素数组
var arr = ["a", "b", "A", "B"];
//sort()方法排序
arr.sort();
console.log(arr);//["A", "B", "a", "b"]

备注:因为字母AB的ASCII值分别为6566,而ab的值分别为9798,所以上面输出的结果是 ["A", "B", "a", "b"]

  • 数组元素是数字
//定义新数字元素数组
var arr = [15, 8, 25, 3];
//sort()方法排序
arr.sort();
console.log(arr);//[15, 25, 3, 8]

​ 结果并不是我们想要的顺序(理想顺序:按数字大小排序)!原因如下:

​ sort()方法会对数组的每一项执行toString()方法,然后再对得到的字符串进行排序。所以之所以25比3大,但却排在3之前,是因为比较的是字符串25和字符串3。如果要得到我们理想的数据,则使用比较函数(通俗的说就是sort()方法内的参数)

  • 比较函数的使用
//定义新数字元素数组
var arr = [15, 8, 25, 3];
//sort()方法排序
arr.sort((a,b)=>{
//对数组进行遍历,通过比较a与b的差值大小,来排序
return a-b;
});
console.log(arr);//[3, 8, 15, 25]

二、数组对象排序

​ 其实和上文基本一致,只不过比较对象加了属性值

//定义数组对象
var arr=[{"age":24,name:'zs'},{"age":0,name:'ls'},{"age":7,name:'pl'}]
//sort()方法排序
arr.sort((a,b)=>{
//对数组进行遍历,
//通过对a对象的age属性与b对象的age属性
//进行取差,根据插值大小,进而排序
console.log(a['age']-b['age']);//-14 7 -17 7
return a['age']-b['age'];
});
console.log(arr);//[{age: 0, name: 'ls'},{age: 7, name: 'pl'},{age: 24, name: 'zs'}]

​ 对比较函数进行提取:

//定义数组对象
var arr=[{"age":24,name:'zs'},{"age":0,name:'ls'},{"age":7,name:'pl'}]
//将比较方法进行提取
var compare = function (obj1, obj2) {
var val1 = obj1.age;
var val2 = obj2.age;
return val1 - val2;
}
//[{age: 0, name: 'ls'},{age: 7, name: 'pl'},{age: 24, name: 'zs'}]
console.log(arr.sort(compare));

​ 对比较函数再进行改造,使得参数的输入更加灵活!

var arr=[{"age":24,name:'zs'},{"age":0,name:'ls'},{"age":7,name:'pl'}]
var compare = function (prop) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
return val1 - val2
}
}
//[{age: 0, name: 'ls'},{age: 7, name: 'pl'},{age: 24, name: 'zs'}]
console.log(arr.sort(compare("age")));

重点:如果数组内某一对象为空值,排序是怎样的呢?(显然并不是按年龄顺序排序的,因为存在nullundefined)

var arr=[{"age":24,name:'zs'},{"age":0,name:'ls'},{"age":0,name:'gr'},
{"age":null,name:'yo'},{"age":7,name:'pl'},{"age":undefined,name:'tt'},
{"age":null,name:'jz'},{"age":0,name:'mn'},{"age":undefined,name:'we'}] //[{"age": 0,"name": "ls"},{"age": 0,"name": "gr"},{"age": null,"name": "yo"},
//{"age": null,"name": "jz"},{"age": 0,"name": "mn"},{"age": 7,"name": "pl"},
//{"age": 24,"name": "zs"},{"age":undefined,"name": "tt"},
//{"age":undefined,"name": "we"}]
console.log(arr.sort(compare("age")));

​ 我们可以知道上述比较函数是对比两个值的插值(可以是数字的插值,也可以是ASCII的插值),同时我们又知道:当值为nullundefined0时,这三者任意方式搭配相减,其结果都为0!,并且使用if判断都为false

解决办法:可以制造特殊值之间与特殊值与正常值之间的差足够大!

理解:

  • undefined - 所有值 = -9999 (也就是说undefined与其他值差的最多,排最小)
  • null - 所有值 = -999 (也就是说undefined与其他值差的第二多,排最第二小)
  • undefined - undefined = 0
  • null - null = 0
  • undefined - null = 0
  • 上述说明是等式a - b 那么相反b - a规则也适用;也就是下文第二个if的返回值999 9999
  • -999和-9999、999,9999是用来区别其他差值的,也可根据实际情况进行差值设定
var arr=[{"age":24,name:'zs'},{"age":0,name:'ls'},{"age":0,name:'gr'},
{"age":null,name:'yo'},{"age":7,name:'pl'},{"age":undefined,name:'tt'},
{"age":null,name:'jz'},{"age":0,name:'mn'},{"age":undefined,name:'we'}]
var compare = function (prop) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
if(!val1 && val1 != 0 && val2){
//定义undefined特殊值的差值
if(val1 === undefined) return -9999
//定义null特殊值的差值
return -999
}
if(!val2 && val2!= 0 && val1){
if(val2 === undefined) return 9999
return 999
}
return val1 - val2
}
}
//[{age: undefined, name: 'we'},{age: undefined, name: 'tt'},{age: null, name: 'jz'},
//{age: null, name: 'yo'},{age: 0, name: 'ls'},{age: 0, name: 'gr'},
//{age: 0, name:'mn'},{age: 7, name: 'pl'},{age: 24, name: 'zs'}]
console.log(arr.sort(compare("age")));

【JavaScript排序】 sort()方法(解决null、undefined、0之间的排序(混乱)问题)的更多相关文章

  1. JavaScript 使用 sort() 方法从数值上对数组进行排序

    使用 sort() 方法从数值上对数组进行排序. <html> <body> <script type="text/javascript"> f ...

  2. 深入了解javascript的sort方法

    在javascript中,数组对象有一个有趣的方法 sort,它接收一个类型为函数的参数作为排序的依据.这意味着开发者只需要关注如何比较两个值的大小,而不用管“排序”这件事内部是如何实现的.不过了解一 ...

  3. JavaScript:sort() 方法

    ylbtech-JavaScript:sort() 方法 JavaScript sort() 方法 1. 定义和用法返回顶部 sort() 方法用于对数组的元素进行排序. 语法 arrayObject ...

  4. 简写代码:当变量为false时['',false,null,undefined,0,NaN]时,返回默认值

    当变量为'',false,null,undefined,0,NaN时,返回默认值 var a='' a || 'hello world'   "hello world" var a ...

  5. Excel VBA解读(54):排序——Sort方法

    Excel VBA解读(54):排序——Sort方法 看看下面的Excel界面截图,“排序”和“筛选”往往在一起,这大概是很多数据需要先排序后筛选吧  首先以“性别”作为排序字段,升序排列,并且第一行 ...

  6. JavaScript中sort方法的一个坑(leetcode 179. Largest Number)

    在做 Largest Number 这道题之前,我对 sort 方法的用法是非常自信的.我很清楚不传比较因子的排序会根据元素字典序(字符串的UNICODE码位点)来排,如果要根据大小排序,需要传入一个 ...

  7. ArrayList 排序Sort()方法扩展

    1.sort() sort可以直接对默认继承 IComparable接口的类进行排序,如:int.string.... ArrayList arrayList = new ArrayList(); , ...

  8. sort() 方法用于对数组的元素进行排序

    语法 arrayObject.sort(sortby) 参数 描述 sortby 可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意,数组在原数组上进行排序,不生成副本. 说明 如果调用该 ...

  9. js中 null, undefined, 0,空字符串,false,不全等比较

    null == undefined // true null == ''  // false null == 0 // false null == false // false undefined = ...

随机推荐

  1. SpringBoot整合RabbitMQ实现六种工作模式

    RabbitMQ主要有六种种工作模式,本文整合SpringBoot分别介绍工作模式的实现. 前提概念 生产者 消息生产者或者发送者,使用P表示: 队列 消息从生产端发送到消费端,一定要通过队列转发,使 ...

  2. Windows环境中Hadoop配置

    我们之前已经在Windows中安装好了Hadoop,并且配置了环境变量.如果要在本地上运行的,还需要这两个文件,可以去找一下,放到Hadoop的bin目录下面.这样我们写好的mr程序就可以直接在Win ...

  3. Odoo14 一些用的熟手的函数

    # Odoo14 一些用的熟手的函数 # from odoo.tools import config # 这是直接访问配置文件,也就是当你执行./odoo-bin -c odoo.cfg的时候 # c ...

  4. Normal3类定义

    法线的相关操作都在图中,实现部分还是大家自己练习,照着图写代码就行了. 类声明: class Normal3 { public: Normal3(); ~Normal3(); Normal3(ldou ...

  5. java学习第一天.day05

    jvm的内存 栈:类方法使用后自动销毁,销毁的好处是释放内存 java方法执行时,在栈区执行 堆: 线程共享的一块内存区域      所有的对象实例以及 数组 都要在堆上分配      每次使用new ...

  6. GitHub Pages 站点建设

    1.简介 GitHub Pages 是通过 GitHub 托管和发布的公共网页,将纯文本转换为静态博客网站. 您可以使用 GitHub Pages 来展示一些开源项目.博客甚或分享您的简历,有内存限制 ...

  7. CF1167F Scalar Queries (线段树/树状数组)

    题意 题解 对于[l,r]中的一个数,不论[l,r]有多大,只有比它小的数可以影响到它的排名,那么就可以把ai从小到大排序,一个一个加入线段树中,线段树中下表为 i 的是ai(原来的位置,不是排序后的 ...

  8. C#基础_利用Stopwatch计时器可暂停计时,继续计时

    最近程序上用到了计时功能,对某个模块进行计时,暂停的时候模块也需要暂停,启动的时候计时继续 用到了Stopwatch Stopwatch的命名空间是using System.Diagnostics; ...

  9. FFT快速傅立叶变换:解析wav波频图、Time Domain、Frequency Domain

    您好,此教程将教大家使用scipy.fft分析wav文件的波频图.Time Domain.Frequency Domain. 实际案例:声音降噪,去除高频. 结果: 波频图: Time Domain:

  10. 大家都能看得懂的源码 - 那些关于DOM的常见Hook封装(一)

    本文是深入浅出 ahooks 源码系列文章的第十四篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用 ...