我的业务是根据距离的远近经行一个排序；

第一种方法：冒泡排序

排序前的数据是这样子的：

排序后是这样子的：

代码可以直接复制使用的：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title></title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

</head>

<body>

<script type="text/javascript">

    $(function(){

    var _arrayList=new Array();

    var _newArrayList=new Array();

    _arrayList[0]={"id":1,"name":"张三","distance":100};

    _arrayList[1]={"id":2,"name":"李四","distance":120};

    _arrayList[2]={"id":3,"name":"王武","distance":80};

    _arrayList[3]={"id":4,"name":"二狗","distance":40};

    _arrayList[4]={"id":5,"name":"屎蛋","distance":160};

    for(var i=0;i<_arrayList.length;i++)

    {

        for(var u=i+1;u<_arrayList.length;u++)

        {

            if(parseFloat(_arrayList[i]["distance"])>parseFloat(_arrayList[u]["distance"]))

            {

                    var num=[];

                    num=_arrayList[i];

                    _arrayList[i]=_arrayList[u];

                    _arrayList[u]=num;

            }

        }

    }

    console.log(_arrayList);

    });

</script>

</body>

</html>

第二种方法：JavaScript sort()

经过网友的介绍知道了这个set方式，太好用了！

直接上代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

</head>

<body>

    <div>

        <table>

            <thead>

                <tr>

                    <td>Id</td>

                    <td>姓名</td>

                    <td>距离（米）</td>

                </tr>

            </thead>

            <tbody id="arrayDiv">

                <tr><td></td><td></td><td></td></tr>

            </tbody>

        </table>

    </div>

    <script>

        $(function () {

            var result = [

           { "id": 1, "name": "张三", "distance": 100 },

           { "id": 2, "name": "李四", "distance": 120 },

           { "id": 3, "name": "王武", "distance": 80 },

           { "id": 4, "name": "二狗", "distance": 40 },

           { "id": 5, "name": "屎蛋", "distance": 160 }

            ];

            function sortId(a, b) {

                return a.distance - b.distance;//由低到高

                //return b.distance - a.distance;//由高到低

            }

            result.sort(sortId);

            console.log(result);

            var _html = "";

            for (var i = 0; i < result.length; i++) {

                _html += "<tr><td>" + result[i].id + "</td><td>" + result[i].name + "</td><td>" + result[i].distance + "</td></tr>";

            }

            $("#arrayDiv").html(_html);

        });

    </script>

</body>

</html>

这是运行效果

JS 对Array集合排序的方法的更多相关文章

  1. Collections -集合排序compareTo方法重写，shuffle，addall

    package cn.learn.collection.Collections; /* 排序的对象的类,实现comparable借口,重写compareto方法 若要打印必须重写toString方法, ...

  2. List集合排序的方法

    1.list集合中的对象实现Comparable接口 public class User implements Comparable<User>{ private Integer id; ...

  3. 关于自定义 List集合排序的方法！

    大致流程: 排序是用到排序的接口Comparator<T>你要先建一个类实现比较器Comparator //大致流程public class StuComp implements Comp ...

  4. 数组Array.sort()排序的方法

    数组sort排序 sort比较次数,sort用法,sort常用 描述 方法sort()将在原数组上对数组元素进行排序,即排序时不创建新的数组副本.如果调用方法sort()时没有使用参数,将按字母顺序( ...

  5. Chrome谷歌浏览器中js代码Array.sort排序的bug乱序解决办法

    [现象] 代码如下: var list = [{ n: "a", v: 1 }, { n: "b", v: 1 }, { n: "c", v ...

  6. Java中List集合排序的方法 比较器的使用 根据学生对象数学 语文 英语成绩总和进行sort排序

    package com.swift; import java.util.ArrayList; import java.util.Collections; import java.util.Compar ...

  7. js实现汉字中文排序的方法 例如：省市列表的排序

    localeCompare() 1.数组内的元素是中文字符串的简单排序 var arr = ['南京', '北京', '上海', '杭州', '深圳']; function sortChinese ( ...

  8. Js获取后台集合List的值和下标的方法

    Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...

  9. JS对Array进行自定制排序

    JS对Array进行自定制排序,简单的做一个记录,代码如下所示: //Test function function myFunction(){ var myArr = new Array(); var ...

随机推荐

  1. 【学习总结】GirlsInAI ML-diary day-14-function函数

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day14 认识函数function 函数相当于一个固定的公式,一个映射.有输入,有输出. 1-python内置函数 max ...

  2. windows服务器nginx+php启动开源ecshop

    1,下载php,nginx,ECShop源码 2,解压php到指定目录(如:C:\php-7.2.6) 2.1,找到指定目录下文件php.ini-development复制重命名为php.ini 2. ...

  3. springcloud

    基本术语 1.服务器 服务器:是提供计算服务的设备.由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力.服务器的构成:包括处理器.硬盘.内存.系统总线等,和通用 ...

  4. Vue.js指令实例

    v-if  v-else  v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...

  5. ExcelTools使用

    using NPOI.SS.Formula.Functions; using NPOI.SS.UserModel; using System; using System.Collections.Gen ...

  6. 【Spring】手写Spring MVC

    Spring MVC原理 Spring的MVC框架主要由DispatcherServlet.处理器映射.处理器(控制器).视图解析器.视图组成. 完整的Spring MVC处理 流程如下: Sprin ...

  7. php+mysql+nginx+liunx 服务搭建

    安装php7相应的yum源   CentOS 7.x:   # rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7 ...

  8. 值得推荐的C/C++框架和库 (真的很强大) c

    http://m.blog.csdn.net/mfcing/article/details/49001887 值得推荐的C/C++框架和库 (真的很强大) 发表于2015/10/9 21:13:14 ...

  9. Numpy 系列（十一）- genfromtxt函数

    定义输入 genfromtxt的唯一强制参数是数据的源.它可以是字符串,字符串列表或生成器.如果提供了单个字符串,则假定它是本地或远程文件或具有read方法的打开的类文件对象的名称,例如文件或Stri ...

  10. 工厂方法模式-Factory Method(Java实现)

    工厂方法模式-Factory Method 工厂方法模式定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法让实例化的具体内容交给子类工厂来进行. 本文中的例子是这样的. 生产一个身份证, ...