js中.sort()函数的常见用法与高级操作

 更新时间:2023年05月13日 09:25:03   作者:Living-v  
JavaScript中的sort函数可以用来对数组进行排序,默认情况下sort函数将数组中的元素转换为字符串,并按照Unicode码点的顺序进行排序,下面这篇文章主要给大家介绍了关于js中.sort()函数的常见用法与高级操作的相关资料,需要的朋友可以参考下

这是.sort()函数最常见的用法

//没有函数参数,按字符编码格式排序
var arr = [3,2,3,34,12,23,234,84,9];
arr.sort();

// 结果: 12,2,23,234,3,3,34,84,9
// 需要升序或者降序则需要传入一个函数参数
var arr = [3,2,3,34,12,23,234,84,9];
arr.sort(function (a, b) {
    return a - b;
});
// 结果:2,3,3,9,12,23,34,84,234

// 降序
var arr = [3,2,3,34,12,23,234,84,9];
arr.sort(function (a, b) {
    return b - a;
});

但或许你还对其为什么要这么操作存有一些疑惑

我们要先搞懂往.sort()里传入的函数的参数a,b是什么

sort()要排序就要遍历数组,以上面的数组为例子

其中遍历第一步的a=3、b=2,

第二步时候a=2、b=3,

第三步的时候a=3,b=34

。。。。。。。

就像你写的冒泡排序一样,每一个元素都会被对比到

如何排序呢?这是w3c对其的解释:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于b,则返回一个大于 0 的值。

也就是说,在传入的函数里如果你想a排在b前,就return一个小于0的数

如果你想a排在b后,就return一个大于0的数

这样,就能完成对数组元素的排序了。

清楚了原理,那么我们就可以想到一些高级的骚操作了

关于对象数组的排序:

// 按age升序排列
var users =[
        { "name": "has",   "age": 17, "height": 165 },
        { "name": "saf",   "age": 20, "height": 172 },
        { "name": "gngh",  "age": 45, "height": 182 },
        { "name": "yjerw", "age": 42, "height": 156 },
        { "name": "cvb",   "age": 22, "height": 176 },
        { "name": "wetty", "age": 32, "height": 178 },
        { "name": "aDNY",  "age": 34, "height": 175 }
     ]
users.sort(function (a, b) {
    return a.age - b.age;
});
// 结果(升序):
/*
name:has age:17 height:165
name:saf age:20 height:172
name:cvb age:22 height:176
name:wetty age:32 height:178
name:aDNY age:34 height:175
name:yjerw age:42 height:156
name:gngh age:45 height:182
*/
// 按name排列
var users =[
        { "name": "has",   "age": 17, "height": 165 },
        { "name": "saf",   "age": 20, "height": 172 },
        { "name": "gngh",  "age": 45, "height": 182 },
        { "name": "yjerw", "age": 42, "height": 156 },
        { "name": "cvb",   "age": 22, "height": 176 },
        { "name": "wetty", "age": 32, "height": 178 },
        { "name": "aDNY",  "age": 34, "height": 175 }
     ]
var users.sort(function (a, b) {
    return a.name - b.name;
});
// 结果:
/*
name:aDNY age:34 height:175
name:cvb age:22 height:176
name:gngh age:45 height:182
name:has age:17 height:165
name:saf age:20 height:172
name:wetty age:32 height:178
name:yjerw age:42 height:156
*/
// 按布尔值排列
var users=[
        { "name": "has",   "age": 17, "height": 165, "state": true},
        { "name": "saf",   "age": 20, "height": 172, "state": false},
        { "name": "gngh",  "age": 45, "height": 182, "state": false },
        { "name": "yjerw", "age": 42, "height": 156, "state": true },
        { "name": "cvb",   "age": 22, "height": 176, "state": false },
        { "name": "wetty", "age": 32, "height": 178, "state": true },
        { "name": "aDNY",  "age": 34, "height": 175, "state": false }
     ]
users.sort(function (a, b) {
    return b.state- a.state;
});
//众所周知,true - false = 1 
//结果
/*
[
  { name: 'has', age: 17, height: 165, state: true },
  { name: 'yjerw', age: 42, height: 156, state: true },
  { name: 'wetty', age: 32, height: 178, state: true },
  { name: 'saf', age: 20, height: 172, state: false },
  { name: 'gngh', age: 45, height: 182, state: false },
  { name: 'cvb', age: 22, height: 176, state: false },
  { name: 'aDNY', age: 34, height: 175, state: false }
]
*/

总结

到此这篇关于js中.sort()函数的常见用法与高级操作的文章就介绍到这了,更多相关js中.sort()函数用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • uniapp高频面试题及答案合集

    uniapp高频面试题及答案合集

    uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台,下面这篇文章主要给大家介绍了关于uniapp高频面试题及答案的相关资料,需要的朋友可以参考下
    2023-02-02
  • easyUI实现(alert)提示框自动关闭的实例代码

    easyUI实现(alert)提示框自动关闭的实例代码

    下面小编就为大家带来一篇easyUI实现(alert)提示框自动关闭的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • echarts 3D地图为区域自定义颜色的解决方法

    echarts 3D地图为区域自定义颜色的解决方法

    在Echarts中,我们很多时候是需要给自己想要的几个区域的地图进行颜色高亮,这篇文章主要给大家介绍了关于echarts 3D地图为区域自定义颜色的相关资料,需要的朋友可以参考下
    2021-08-08
  • 浅谈javascript中return语句

    浅谈javascript中return语句

    这篇文章主要给大家简单介绍了javascript中return语句,有需要的小伙伴可以参考下。
    2015-07-07
  • JS判断移动端访问设备并加载对应CSS样式

    JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案,本例是加载不同的css样式
    2014-06-06
  • 详解JavaScript节流函数中的Throttle

    详解JavaScript节流函数中的Throttle

    函数节流,就是对会频繁触发的函数事件做一些限制,让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发。一般我们会给他起一个名字throttle。也就是节流的意思。一般这样的函数有 resize事件、ontouchmove事件等。
    2016-07-07
  • JS 获取鼠标左右键的键值方法

    JS 获取鼠标左右键的键值方法

    这篇文章主要介绍了JS 获取鼠标左右键的键值方法,很简单,但很实用,特别是在做与用户交互相关的东西
    2014-10-10
  • JavaScript对象之深度克隆介绍

    JavaScript对象之深度克隆介绍

    这篇文章主要介绍了JavaScript对象之深度克隆介绍,本文详细的讲解了什么是对象深度克隆,并给出了示例代码,需要的朋友可以参考下
    2014-12-12
  • 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    百度空间的弹出窗口和拖拽效果(也就是popup.js),代码精简,效果也很好,我们可以在很多大型网站上见到这种效果,在我的项目中也使用了该js。
    2010-04-04
  • javascript算法学习(直接插入排序)

    javascript算法学习(直接插入排序)

    假设待排序的记录存放在数组R[1..n]中。初始时,R[1]自成1个有序区,无序区为R[2..n]。从i=2起直至i=n为止,依次将R[i]插入当前的有序区R[1..i-1]中,生成含n个记录的有序区。
    2011-04-04

最新评论