首页 > 编程语言 >JavaScript排序 — sort()方法(解决null、undefined、0之间的排序(混乱)问题)

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

时间:2022-09-30 00:11:17浏览次数:55  
标签:sort arr null undefined age 排序 name

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")));

标签:sort,arr,null,undefined,age,排序,name
From: https://www.cnblogs.com/gby-web/p/16743564.html

相关文章

  • 归并排序(merge sort):细节,注意事项
    如果在某一个程序中要多次使用归并排序,最好将在排序中要使用的tmp数组定义在排序函数之外,将tmp作为归并排序方法的一个参数,而不是在归并排序中每次新定义一个tmp数组,因......
  • Redis:HGETALL的排序问题
    HGETALL介绍Returnsallfieldsandvaluesofthehashstoredatkey.Inthereturnedvalue,everyfieldnameisfollowedbyitsvalue,sothelengthofthere......
  • Arrays类、冒泡排序、稀疏数组
    Arrays类数组的工具类java.util.Arrays由于数组对象本身并没有什么方法可以供我们调用,但API中提供了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本的操作......
  • python冒泡排序例子
    #冒泡排序nums=[1,3,9,4,2,6,8,7,0]length=len(nums)foriinrange(length):forjinrange(length-1-i):ifnums[j]>nums[j+1]:nums[......
  • Golang Redis有序集合(sorted set)
    Redis有序集合(sortedset)和集合一样也是string类型元素的集合,且不允许重复的成员,不同的是每个元素都会关联一个double类型的分数,这个分数主要用于集合元素排序。引用git......
  • 归并排序
    归并排序时间复杂度为O(nlog(n)),稳定排序,需要额外空间O(n),原地归并没看归并排序的两种方式自顶向下先向下分治成规模为2的子问题,然后向上进行merge;自底向上在底部先......
  • 荷兰国旗问题与快速排序算法
    荷兰国旗问题与快速排序算法作者:Grey原文地址:博客园:荷兰国旗问题与快速排序算法CSDN:荷兰国旗问题与快速排序算法荷兰国旗问题问题描述给定一个整数数组,给定一个值K......
  • React Developer插件报错Cannot read properties of undefined (reading ‘forEach‘)
    安装了3.6的版本ReactDeveloper启用插件后报错解决  https://www.crx4chrome.com/crx/3068/下载  下载好后,直接拖入扩展程序中 ......
  • sort和wc和uniq命令
    ####sort命令用于给文件排序使用#例:#sort/etc/passwd默认ASCll码顺序排列#sort-nr/etc/passwd#-n以数字去排序,字母和特殊符号会任务是0,会排在最前面#-r反序排......
  • 16 -- 排序算法之插入排序
    算法介绍:插入排序属于内部排序法,时对于待排序的元素以插入的方式找到改元素的适当位置,以达到排序的目的。【类似于生活中的斗地主游戏,每抓起一张牌按照便把改张牌按照指定......