根據對象數組中的一個或多個屬性給數組排序

這篇文章主要介紹了如何按照一個或多個屬性給一個對象數組排序。

需求

后台返回的數據需要按照一定的順序展示，可以根據其中一個屬性或多個屬性。

解決辦法

• 單屬性排序

  // 創建動態排序函數，根據傳遞的值對對象進行排序：
  function dynamicSort(property) {
      var sortOrder = 1;
      if(property[0] === "-") {
          sortOrder = -1;
          property = property.substr(1)
      }
      return function (a,b) {
          // 下面一行代碼對字符串和數字均有效
          // 你可以根據自己的需求定制它
          var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0
          return result * sortOrder
      }
  }
  
  // 待處理數據
  var data = [
      {name: 'tom4', mdate: '202012'},
      {name:'tom2', mdate:'202001'},
      {name: 'tom1', mdate: '202008'},
      {name: 'tom3', mdate: '202005'}
  ]
  
  // 使用：按照屬性 mdate 給data排序
  let sortedArr = data.sort(dynamicSort("mdate"))
  
  

• 多屬性排序

  function dynamicSortMultiple() {
      /*
       * 保存arguments對象，因為它將被覆蓋
       * 注意arguments對象是一個類似數組的對象
       * 由要排序的屬性的名稱組成
       */
      var props = arguments
      return function (obj1, obj2) {
          var i = 0, result = 0, numberOfProperties = props.length
          // 從0開始獲取不同的結果，因為有多個屬性需要比較
          while(result === 0 && i < numberOfProperties) {
              result = dynamicSort(props[i])(obj1, obj2)
              i++
          }
          return result
      }
  }
  
  // 使用：按照屬性 name 和 mdate 給data排序
  let sortedArr = People.sort(dynamicSortMultiple("name", "mdate"));
  

• 也可以使用ES6，它允許擴展原生對象

  class MyArray extends Array {
      sortBy(...args) {
          return this.sort(dynamicSortMultiple.apply(null, args))
      }
  }
  
  // 使用：按照屬性 mdate 給data排序
  let sortedArr = MyArray.from(data).sortBy("mdate")
  

備注

• 注意多屬性排序中有一行代碼 dynamicSort(props[i])(obj1, obj2)，因為dynamicSort函數返回一個函數，要執行這個函數所以使用了兩個括號。
• f() 執行f函數，返回子函數。
• f()() 執行子函數，返回孫函數。
• 括號越多越往里面執行