js中数组的sort方法

sort()方法会改变原始数组

sort()方法不传参数时,默认是对数组的元素作为字符串进行升序排序。
  • 数组元素是字母字符串时,正常按升序排列

    const arr = ["Banana", "Orange", "Apple", "Mango"]
    arr.sort()
    console.log(arr)
    
    //输出结果
    ["Apple", "Banana", "Mango", "Orange"]
    
  • 数组元素是数字排序时,比如 3 会大于 12,因为 3 大于 1

    const arr1 = ['3', '12', '23', '6']
    const arr2 = [3, 12, 23, 6]
    arr1.sort()
    arr2.sort()
    console.log(arr1)
    console.log(arr2)
    
    /*输出结果
    ['12', '23', '3', '6']
    [12, 23, 3, 6]
    */
    

    明显是错误的排序
    可以传入比较函数来定义排序顺序

    语法:sort(conmpareFunction)

    该函数比较两个值的大小,然后返回一个用于说明这两个值的相对顺序的数字。
    当返回值大于0时,a放在b的后面;
    当返回值小于0时,a放在b的前面
    当返回值等于0时,ab位置不改变

    const arr = [3, 12, 23, 6]
    
    arr.sort(fn1)
    console.log(arr)
    arr.sort(fn2)
    console.log(arr)
    
    
    function fn1(a, b) {
      return a-b  // 升序
    }
    function fn2(a, b) {
      return b-a  // 降序
    }
    
    /*输出结果
    [3, 6, 12, 23]
    [23, 12, 6, 3]
    */
    

    那么为什么上面返回a-b就是升序,返回b-a就是降序呢?这其实是一种理解后的简便写法
    举个例子:

    当 a>b 时,
    a - b > 0 ,排序结果 ===> b,a (升序)
    b - a < 0 ,排序结果 ===> a,b (降序)

    当 b>a 时,
    a - b < 0 ,排序结果 ===> a,b (升序)
    b - a > 0 ,排序结果 ===> b,a (降序)

    当 a=b 时,
    a - b = b - a =0 , 排序结果 ===> 保持不变

    由此可以看出
    无论a>b还是b>areturn a-b时总是升序,return b-a时总是降序
    效果相当于:

    const arr = [3, 12, 23, 6]
    
    arr.sort(fn1)
    console.log(arr)
    
    function fn1(a, b) {  //升序
      if (a>b) return 1
      else if (a<b) return -1
      else return 0
    }
    
    /*输出结果
    [3, 6, 12, 23]
    */
    
  • 数组元素是汉字时,在不考虑多音字的前提下,实现按拼音首字母进行升序排序

    const arr = ['张三','李四','王五','麻六']
    
    arr.sort(fn1)
    console.log(arr)
    
    function fn1(a, b) {  //升序
      return a.localeCompare(b, 'zh')
    }
    
    /*输出结果
    ['李四', '麻六', '王五', '张三']
    */
    

    其中localeCompare(target, locales)方法的作用是用javascript本地特定的顺序来比较两个字符串

    两个参数
    target: 进行比较的字符串
    locales: 指定语言地区

posted @   蜘蛛流  阅读(498)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示