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

第一种方法：冒泡排序

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

排序后是这样子的：

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

<!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. SQL的一些基础查询语法

     基础.限定.模糊查询     关键字都是大写. 使用 BETWEENN AND 的时候小的数字或者日期放到  AND(并且)  的面前,大的一个放到AND 后面.   数据操纵语言SQL分类(DML ...

  2. python 判断网络通断同时检测网络的状态

    思路:通过http判断网络通断,通过ping获取网络的状态 注意:不同平台下,调用的系统命令返回格式可能不同,跨平台使用的时候,注意调整字符串截取的值 主程序:network_testing_v0.3 ...

  3. 通过sort()方法实现升序和降序排列

    数组 升序:Arrays.sort(arr); 降序: 方法一:Arrays.sort(arr,Collections.reverseOrder()); 方法二: package com.yh.sor ...

  4. Java语法----Java中equals和==的区别

    [正文] 平时在学Android和Java语言的时候,总是碰到“equals”和“==”这两个字符,老感觉差不多:其实还是有一些区别的,今天干脆把它们彻底弄清楚. 一.java当中的数据类型和“==” ...

  5. 第二部分之AOF持久化(第十一章)

    AOF持久化是通过保存Redis服务器所执行的写命令来记录数据库状态的.被写入AOF文件的所有命令都是以Redis的命令请求协议格式(纯文本)保存的. 一,AOF持久化的实现 1.命令追加 当AOF持 ...

  6. vue报错Error in render: "TypeError: Cannot read property '0' of undefined"

    通常有两种情况: 1.在模板的html标签上使用length报错 vue 中使用 length判断的时候,有时会报错,如下: <div class="item_list" v ...

  7. Shell命令-文件及目录操作之file、md5sum

    文件及目录操作 - file.md5sum 1. file:显示文件的类型 file命令的功能说明 用于辨识文件类型.通过 file 指令,我们得以辨识该文件的类型. file命令的语法格式 file ...

  8. Linux--前后端分离部署

    项目部署 (vue + nginx + uwsgi + django + mysql + redis) 一 . 前端部署 1. 下载vue代码,解压缩 wget https://files.cnblo ...

  9. Flask 模型操作

    ORM 简称 ORM, O/RM, O/R Mapping 持久化模型 特征 数据表和编程类的映射 数据类型映射 字段属性映射类的属性和数据类型 关系映射 表于表之间的关系对应到 编程类的关系上 优点 ...

  10. 小程序运行报错：errMsg: "request:fail url not in domain list"

    错误原因: 报错提示说请求的url不在域名列表里,应该是还没有配置服务器域名 解决方法: 可点击开发者工具右上角 详情-项目设置-不校验合法域名.web-view(业务域名).TLS 版本以及 HTT ...