文档章节

js数组的sort排序详解

文文1
 文文1
发布于 2016/09/18 14:05
字数 629
阅读 58
收藏 0

代码:

<body>
    <div>
    sort()对数组排序,不开辟新的内存,对原有数组元素进行调换
    </div>
    <div id="showBox">
    1、简单数组简单排序
    <script type="text/javascript">
        var arrSimple=new Array(1,8,7,6);
        arrSimple.sort();
        document.writeln(arrSimple.join());
    </script>
    </div>
    <div>
    2、简单数组自定义排序
    <script type="text/javascript">
        var arrSimple2=new Array(1,8,7,6);
        arrSimple2.sort(function(a,b){
            return b-a});
        document.writeln(arrSimple2.join());
    </script>
    解释:a,b表示数组中的任意两个元素,若return > 0 b前a后;reutrn < 0 a前b后;a=b时存在浏览器兼容
    简化一下:a-b输出从小到大排序,b-a输出从大到小排序。
    </div>
    <div>
    3、简单对象List自定义属性排序
    <script type="text/javascript">
        var objectList = new Array();
        function Persion(name,age){
            this.name=name;
            this.age=age;
            }
        objectList.push(new Persion('jack',20));
        objectList.push(new Persion('tony',25));
        objectList.push(new Persion('stone',26));
        objectList.push(new Persion('mandy',23));
        //按年龄从小到大排序
        objectList.sort(function(a,b){
            return a.age-b.age
        });
        for(var i=0;i<objectList.length;i++){
            document.writeln('<br />age:'+objectList[i].age+' name:'+objectList[i].name);
        }
    </script>
    </div>
    <div>
    4、简单对象List对可编辑属性的排序
    <script type="text/javascript">
        var objectList2 = new Array();
        function WorkMate(name,age){
            this.name=name;
            var _age=age;
            this.age=function(){
                if(!arguments)
                {
                    _age=arguments[0];}
                else
                {
                    return _age;}
                }
                
            }
        objectList2.push(new WorkMate('jack',20));
        objectList2.push(new WorkMate('tony',25));
        objectList2.push(new WorkMate('stone',26));
        objectList2.push(new WorkMate('mandy',23));
        //按年龄从小到大排序
        objectList2.sort(function(a,b){
            return a.age()-b.age();
        });
        for(var i=0;i<objectList2.length;i++){
            document.writeln('<br />age:'+objectList2[i].age()+' name:'+objectList2[i].name);
        }
    </script>
    5.动态的根据数据排序
    var data = [{name:'tom',age:'28'},{name:'cat',age:'29'}];
    function createCompact(field){
        return function(object1,object2){
             var value1 = object1[field];
             var value2 = object2[field];
             if(value1 < value2){
                  return -1;
             }else if(value1 > value2){
                  return 1;
             }else{
                  return 0;
             }
        }
    };
    data.sort(createCompact('name'));
    6.对Object数组排序的其他写法:
    //定义一个比较器 
    function keysrt(key,desc) {
	      return function(a,b){
		     return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
	      }
    }
	//应用场景:
    var ary=[{id:1,name:"b"},{id:2,name:"b"}];
    ary.sort(keysrt('name',true));
    ary.sort(keysrt('name',false));
    ary.sort(keysrt('id',false));
    </div>
</body>

知识点:

1,sort(function(a,b){return a-b;})对传入的一对值进行比较,然后返回的的值为:小于0,大于0,等于0;(大于0交换位置,反之则不)

  * 当小于0时,说明b>a,故b的排序靠后(即不变,以为默认按升序排序).

  * 当大于0时,说明a>b,故a的排序靠后(因为默认按照升序排序,如果a>b,所以a要排在b的后面).

  * 当等于0时,说明a=b,故不改变排序.

如果对数值数组的值进行降序排序。那么只要把返回的值改为b-a!

本文转载自:http://www.cnblogs.com/longze/archive/2012/11/27/2791230.html

文文1
粉丝 25
博文 445
码字总数 140958
作品 0
长沙
程序员
私信 提问
JavaScript数组(一)——排序

JavaScript数组中有一个方法,可用于反转数组,如下代码所示: 但是多数情况下这并不能满足开发的需求,真实的情况往往是降序或升序排列。对数组进行排序很自然地会想到冒泡排序算法,下面我...

Bob2100
03/17
18
0
前端开发:Javascript中的数组,常用方法解析

前端开发:Javascript中的数组,常用方法解析 前言  Array是Javascript构成的一个重要的部分,它可以用来存储字符串、对象、函数、Number,它是非常强大的。因此深入了解Array是前端必修的功...

grootzhang
2016/06/17
0
0
[译] JavaScript 开发者经常忽略或误用的七个基础知识点

JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序。很多新手开发...

_大雁
2013/09/08
934
0
如何获取数组中最大3项的索引值?

一、需求分析 1. 数组最大3项 看到这个,首先就应该想到排序,我们可以先将数组从大到小进行排序,然后再获取排序后的数组前3项即可。 所需函数: 排序: sort() 获取前3项: filter() 2. 获...

璿而不华
2018/07/24
0
0
JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa
2018/06/19
89
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
46分钟前
3
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
2
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部