javascript - 如何根据属性对对象数组进行排序

Question

我需要根据 freezeEdge 属性对对象数组进行排序。如果属性值是开始，我们应该将项目移动到顶部，而属性值是结束，我们必须将项目移动到底部。没有字段属性的项目是无效的，所以位置应该保持不变，例如在下面的数组中，第一个项目是无效的，所以我们不应该重新排序。

我尝试了一个在 Firefox 中工作但在 chrome 中失败的示例程序我正在寻找一个可以在 chrome、safari 和 firefox 中工作的解决方案

实际数组

[{
  "style": "width: 10px; text-align: center",
  "className": "oj-sm-only-hide table",
  "headerClassName": "Sample"
}, {
  "headerText": "Fee Description",
  "field": "Description"
}, {
  "headerText": "Amount",
  "field": "FeeAmount",
  "frozenEdge": "start"
}, {
  "headerText": "Currency",
  "field": "CurrencyCode",
  "frozenEdge": "start"
}, {
  "headerText": "Status",
  "field": "FeeStatus",
}, {
  "headerText": "Department",
  "field": "DepartmentDescription"
}, {
  "headerText": "Assessed Date",
  "field": "AssessedDate",
  "frozenEdge": "end"
}, {
  "headerText": "Payment Date",
  "field": "PaymentDate"
}, {
  "headerText": "Paid By",
  "field": "PaidBy",
  "frozenEdge": "end"
}, {
  "headerText": "Invoice",
  "field": "Invoice"
}, {
  "headerClassName": "table-header table-row-botton",
  "className": "table-row-botton"
}]

预期产出

[{
  "style": "width: 10px; text-align: center",
  "className": "oj-sm-only-hide table",
  "headerClassName": "Sample"
}, {
  "headerText": "Amount",
  "field": "FeeAmount",
  "frozenEdge": "start"
}, {
  "headerText": "Currency",
  "field": "CurrencyCode",
  "frozenEdge": "start"
}, {
  "headerText": "Fee Description",
  "field": "Description"
}, {
  "headerText": "Status",
  "field": "FeeStatus",
}, {
  "headerText": "Department",
  "field": "DepartmentDescription"
}, {
  "headerText": "Payment Date",
  "field": "PaymentDate"
}, {
  "headerText": "Invoice",
  "field": "Invoice"
}, {
  "headerText": "Assessed Date",
  "field": "AssessedDate",
  "frozenEdge": "end"
}, {
  "headerText": "Paid By",
  "field": "PaidBy",
  "frozenEdge": "end"
}, {
  "headerClassName": "table-header table-row-botton",
  "className": "table-row-botton"
}]

Firefox 的工作代码：

function isValidColumn(column, ignoreFR) {
  var retVal = true;
  if (!column.hasOwnProperty('field')) {
    return false;
  }
  return retVal;
}

var array = [{
  "style": "width: 10px; text-align: center",
  "className": "oj-sm-only-hide table",
  "headerClassName": "Sample"
}, {
  "headerText": "Fee Description",
  "field": "Description"
}, {
  "headerText": "Amount",
  "field": "FeeAmount",
  "frozenEdge": "start"
}, {
  "headerText": "Currency",
  "field": "CurrencyCode",
  "frozenEdge": "start"
}, {
  "headerText": "Status",
  "field": "FeeStatus",
}, {
  "headerText": "Department",
  "field": "DepartmentDescription"
}, {
  "headerText": "Assessed Date",
  "field": "AssessedDate",
  "frozenEdge": "end"
}, {
  "headerText": "Payment Date",
  "field": "PaymentDate"
}, {
  "headerText": "Paid By",
  "field": "PaidBy",
  "frozenEdge": "end"
}, {
  "headerText": "Invoice",
  "field": "Invoice"
}, {
  "headerClassName": "table-header table-row-botton",
  "className": "table-row-botton"
}];

array.sort(
  function(col1, col2) {
    if (isValidColumn(col1, true) && isValidColumn(col2, true)) {

      if (col2.hasOwnProperty('frozenEdge') &&
        col2.frozenEdge == 'start') {
        return (col2.frozenEdge === 'start' && col1.frozenEdge !== 'start') ? 1 :
          (col1.frozenEdge === 'start') ? -1 : 0;
      } else if (col1.hasOwnProperty('frozenEdge') &&
        col1.frozenEdge == 'end') {
        return (col1.frozenEdge == 'end' && col2.frozenEdge !== 'end') ? 1 :
          (col1.frozenEdge === 'end') ? -1 : 0;
      } else {
        return 0;
      }
    } else {
      return 0;
    }
  }
);

console.log(array);

.as-console-wrapper { top: 0; max-height: 100% !important; }

标签： javascriptarrays

Answer 1

您可以按照想要的顺序取一个对象并先检查field。

const
    order = { start: -1, default: 0, end: 1 },
    data = [{ style: "width: 10px; text-align: center", className: "oj-sm-only-hide table", headerClassName: "Sample" }, { headerText: "Fee Description", field: "Description" }, { headerText: "Amount", field: "FeeAmount", frozenEdge: "start" }, { headerText: "Currency", field: "CurrencyCode", frozenEdge: "start" }, { headerText: "Status", field: "FeeStatus" }, { headerText: "Department", field: "DepartmentDescription" }, { headerText: "Assessed Date", field: "AssessedDate", frozenEdge: "end" }, { headerText: "Payment Date", field: "PaymentDate" }, { headerText: "Paid By", field: "PaidBy", frozenEdge: "end" }, { headerText: "Invoice", field: "Invoice" }, { headerClassName: "table-header table-row-botton", className: "table-row-botton" }];

data.sort((a, b) => 
    a.field && b.field &&
    (order[a.frozenEdge] || order.default) - (order[b.frozenEdge] || order.default)
);

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }