vue根據(jù)數(shù)組中某一項(xiàng)的值進(jìn)行排序的方法

vue中數(shù)組和對(duì)象的排序

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),平頂山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:平頂山等地區(qū)。平頂山做網(wǎng)站價(jià)格咨詢:13518219792

1數(shù)組排序

  

   
{{a}}
  
 
  

2對(duì)象排序

   

    
{{stu}}
   
  
  

一、前言

我在vue項(xiàng)目中遇到了一個(gè)表格排序的需求，根據(jù)某一項(xiàng)的值的大小從大到小調(diào)整數(shù)組順序。

二、代碼

表格大概是這個(gè)樣子，樣式和圖片在代碼中簡(jiǎn)化了。

 

  
股票
  
入選價(jià)
  
最新價(jià)
  
模擬漲跌幅
 
 

  

   
{{item.name}}
   
{{item.bn}}
  
  
{{item.in_price}}
  
{{item.now_price}}
  
{{item.increase}}%
 

1. 排序方法

這里用到的是數(shù)組的sort方法，這個(gè)方法有一個(gè)需要注意的地方，就是不傳參數(shù)的話，將按字母順序?qū)?shù)組中的元素進(jìn)行排序，說(shuō)得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序。這并不是我們想要的排序方法，所以必須要傳參。

sort方法的參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)提供了一個(gè)比較方法，要比較兩個(gè)值，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對(duì)順序的數(shù)字。

1. 若 a 小于 b，在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前，則返回一個(gè)小于 0 的值。
2. 若 a 等于 b，則返回 0。
3. 若 a 大于 b，則返回一個(gè)大于 0 的值。

compare(key) {
 return function(a,b){
  var val1 = a[key];
  var val2 = b[key];
  return val2 - val1;
 }
}

在代碼中，compare函數(shù)中的匿名函數(shù)就是這樣一個(gè)函數(shù)，但這個(gè)函數(shù)外面又嵌套了一層，這是因?yàn)樾枰鶕?jù)數(shù)組中的某一項(xiàng)來(lái)排序，所以需要把這一項(xiàng)的key值傳進(jìn)來(lái)。

2. 調(diào)用排序方法

sort(type) {
 this.sortType = type;
 this.recommendlist.sort(this.compare(type));
 // switch(type){
  // case 'in_price':
  //  this.sortType = 'in_price';
  //  this.recommendlist.sort(this.compare('in_price'));
  //  break;
  // case 'now_price':
  //  this.sortType = 'now_price';
  //  this.recommendlist.sort(this.compare('now_price'));
  //  break;
  // case 'increase':
  //  this.sortType = 'increase';
  //  this.recommendlist.sort(this.compare('increase'));
  //  break;
 // }
}

一開(kāi)始我按照注釋的部分寫(xiě)的，和我一樣抽象能力不是特別好的人首先會(huì)想到要這樣寫(xiě)，但是寫(xiě)出來(lái)之后發(fā)現(xiàn)三種情況不過(guò)是重復(fù)的代碼，這時(shí)我就直接用最上面兩行代碼來(lái)代替，寫(xiě)完以后感覺(jué)內(nèi)心一片平和。這種復(fù)用率高的代碼簡(jiǎn)直讓人太舒服了。

三、結(jié)語(yǔ)

雖然是一個(gè)簡(jiǎn)單的功能，但是非常值得歸納總結(jié)一下。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。