JS中对象按属性排序（冒泡排序）

女爷i 2022-12-02 01:20 204阅读 0赞

[![返回主页][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]

# 原文地址 [https://www.cnblogs.com/it-Ren/p/10898947.html][https_www.cnblogs.com_it-Ren_p_10898947.html] #

# [一路向北√][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1] #

## 越努力，越幸运。 ##

# [JS中对象按属性排序（冒泡排序）][https_www.cnblogs.com_it-Ren_p_10898947.html] #

# #

### 冒泡排序：它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。 ###

function bubbleSort(arr) \{

var i = arr.length, j;

var tempExchangVal;

while (i > 0) \{

for (j = 0; j < i - 1; j++) \{

if (arr\[j\] > arr\[j + 1\]) \{    // '>' 表示从小到大

tempExchangVal = arr\[j\];  // 把两个中最大的赋值

arr\[j\] = arr\[j + 1\];      // 把小的赋值给前一个

arr\[j + 1\] = tempExchangVal; // 把最大值赋值给后一个

i--;

return arr;

var arr = \[3, 2, 4, 9, 1, 5, 7, 6, 8\];

var arrSorted = bubbleSort(arr);

console.log(arrSorted);

// alert(arrSorted);

冒泡排序二：

function sort(arr) \{

var max;

for(let i=0,len=arr.length; i<len; i++) \{

for(let j=0,len=arr.length; j<len; j++) \{

if(arr\[j\] > arr\[j+1\]) \{

max = arr\[j\]

arr\[j\] = arr\[j+1\]

arr\[j+1\] = max

return arr;

var arr1 = \[3, 2, 4, 9, 1, 5, 7, 6, 8\];

console.log(sort(arr1));

# #

## 排序方法一、 ##

在实际工作经常会出现这样一个问题：后台返回一个数组中有i个json数据，需要我们根据json中某一项进行数组的排序。

例如返回的数据结构大概是这样：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

{
        result:[
          {id:1,name:'中国银行'},
          {id:3,name:'北京银行'},
          {id:2,name:'河北银行'},
          {id:10,name:'保定银行'},
          {id:7,name:'涞水银行'}
        ]
       }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

现在我们根据业务需要，要根据id的大小进行排序，按照id小的json到id大的json顺序重新排列数组的顺序

在js中添加排序的方法：

这里使用JavaScript sort() 方法，首先解释下这个sort的方法

语法：*arrayObject*.sort(*sortby*)          　　*sortby*：可选，规定排序顺序。必须是函数。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

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

下面开始使用sort(*sortby*) 来进行这个排序，并打印到控制台：

1  function sortId(a,b){  
    2        return a.id-b.id  
    3     }
    4     result.sort(sortId);
    5     console.log(result);

然后查看控制台，排序成功：

![format_png][]

如果对比的对象有相同的属性 则添加id属性到新对象上。

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

1 arraySort(){
     2 
     3    function com(oldV,newV){
     4      for(var i=0;i<newV.length;i++){
     5        if(newV.nav_name == oldV.nav_name){
     6        newV[i].id = oldV[i].id
     7      }
     8      }
     9    }
    10     function sortId(a,b){  
    11       return a.id-b.id  
    12     }
    13    console.log(this.urlList);
    14    console.log('○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○');
    15    com(this.compare,this.urlList)
    16    this.urlList.sort(sortId);
    17    this.happyList = this.urlList
    18     }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

需求： 每一个添加的路由按顺序排列。    最终解决办法： 冒泡排序

![format_png 1][]

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

1  threeList:["实时状况","基础数据","GPU实时统计","主机扫描","设备列表","主机列表","模板列表","存储空间列表","价格列表","服务列表","工单列表","创建工单","AI源码列表","发票管理","收入管理","支持管理","系统赠送","用户列表","微信用户列表","推广申请","提现申请","推广信息列表","折扣列表","活动列表","公告列表","角色列表","权限列表","角色管理",
    2       "GPU租用总量总计","GPU利用率统计","GPU使用分时统计","租用量分析","租凭费分析","用户增长统计","用户注册时间分布","用户活跃量统计","用户属性统计","用户排行榜","网站访问统计","省份人数分布","城市人数分布","学校人数分布","用户 GPU 利用率排行榜","使用时长统计","消费类型统计","服务市场购买统计","消费券使用记录","AI源码用户购买列表","用户充值额统计","用户充值渠道统计","收支对比","收入统计","支出统计"]
    3

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

给数据添加序号，不用一个一个的添加 这里使用 array.indexOf

x.ind  =this.threeList.indexOf(this.removeAllSpace(x.nav_name))

//(双重for循环 第一个for控制轮数 第二个for控制次数 比较的轮数为数据个数-1 一轮比较的次数为数据个数-1 总个数为比较轮数*1轮比较次数)

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

for(var i=0; i<=this.urlList.length-2;i++ ){
              for(var j=i+1; j<=this.urlList.length-1;j++){
                if(this.urlList[j].ind <this.urlList[i].ind){
                  var num =this.urlList[j];
                  this.urlList[j] = this.urlList[i]
                  this.urlList[i] = num
                }
              }
            }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

（固定写法）

## 排序方法二、 ##

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

## 三、数组排序 ##

从小到大排序

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

const minSort = (arr)  => {
               let newArr =  arr.sort((a,b)=>{
                    return a - b
                })
                return newArr
            }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

从大到小排序

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

const maxSort = (arr)  => {
               let newArr =  arr.sort((a,b)=>{
                    return b - a
                })
                return newArr
            }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

##  四 根据对象的value值排序 ##

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg
[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]: https://www.cnblogs.com/it-Ren/
[https_www.cnblogs.com_it-Ren_p_10898947.html]: https://www.cnblogs.com/it-Ren/p/10898947.html
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20221123/4e7395acbd784cebb0b7983df355eee0.png
[format_png]: /images/20221123/1b76a9c4667340989bbd887297ab8d4d.png
[format_png 1]: /images/20221123/d3b344e5179646379ab74fee75326428.png