vue給數組中對象排序 sort函數的用法

Posted on by

vue給數組中對象排序 sort函數

開發穿梭框的時候，需要將左側選中的數據排序後添加到右側

先看代碼吧,後面解釋

originalData為左側選擇的數據:

var originalData =[{name: 'Tom'},{name: 'Andy'},{name: 'Marry'},{name: 'Tina'}];

先給每個對象添加一個排序order:

for (let i = 0; i < originalData.length; i++) {
     this.originalData[i]['order'] = i
}

添加後為：

var originalData =[{name: 'Tom',order: 1},{name: 'Andy',order: 2},{name: 'Marry',order: 3},{name: 'Tina',order: 4}];

寫一個排序函數:

arraySort(property) {
            return function (a, b) {
                var value1 = a[property]
                var value2 = b[property]
                return value1 - value2
            }
        }

在進行添加的時候排序：originalData.sort(arraySort('order'))

sort函數要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。

比較函數應該具有兩個參數 a 和 b，其返回值如下：

  • 若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
  • 若 a 等於 b，則返回 0。
  • 若 a 大於 b，則返回一個大於 0 的值。

舉例：

var originalData =[{name: 'mingxin',order: 6},{name: 'wanglin',order: 1},{name: 'jiangxia',order:8},{name: 'liufang',order: 4},{name: 'wangha',order: 1},{name: 'liming',order: 7}];
function arraySort(property){
    return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        if(value1 - value2>0){
            console.log(value1+"大於"+value2+"調換位置")
        }else if(value1 - value2<0){
            console.log(value1+"小於"+value2+"位置不變")
        }else{
            console.log(value1+"等於"+value2+"位置不變")
        }
        return value1 - value2
    }
};
originalData.sort(arraySort('order'))

運行結果如下：

vue小技巧：簡單排序和對象排序

對於數組裡面全是number

computed部分：

computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
 }

methods部分

function sortNumber(a,b){
            return a-b
  }

對於一個對象 有多種類型

data部分

students:[
  {name:'jspang',age:32},
  {name:'Panda',age:30},
  {name:'PanPaN',age:21},
  {name:'King',age:45}
]

methods部分

function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}

view部分

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

computed部分

sortStudent:function(){
     return sortByKey(this.students,'age');
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：