使用parsedate-fns時排序不正確-有解無憂

我有 4 個具有以下資料的日期，但是當我對它們進行排序時，資料出現錯誤。

日期：


2h, 2m, 13s
5d, 3h, 49m, 42s
2h, 0m, 13s
12h, 32m, 13s

我正在嘗試使用此公式使用 Date-fns parse 將它們轉換為日期

     convertStringToDate(value) {
        if (value.match('M')) {
            return dateFns.parse(value, "M'M', dd'd', HH'h', mm'm', ss's'", new Date())
        }
        else if (value.match('d')) {
             return dateFns.parse(value, "dd'd', HH'h', mm'm', ss's'", new Date())
        }
        else if (value.match('h')) {
             return dateFns.parse(value, "HH'h', mm'm', ss's'", new Date())
        }
        else if (value.match('m')) {
             return dateFns.parse(value, "mm'm', ss's'", new Date())
        }
        else if (value.match('s')) {
             return dateFns.parse(value, "ss's'", new Date())
        }
    }

然后排序

$.fn.dataTableExt.oSort["customDuration-desc"] = (a, b) => {
                        a = this.convertStringToDate(a);
                        b = this.convertStringToDate(b);
                        return new Date(a) - new Date(b);
                    };

結果出錯了。它顯示為

5d, 3h, 49m, 42s
2h, 2m, 13s
2h, 0m, 13s
12h, 32m, 13s

代替

5d, 3h, 49m, 42s
12h, 32m, 13s
2h, 2m, 13s
2h, 0m, 13s

uj5u.com熱心網友回復：

您可以簡單地決議您的持續時間字串并將每個單位轉換為秒，這里使用由您的單位縮寫索引的物件來保存轉換方法。（我洗掉了月份，因為沒有以秒為單位的標準月份長度）

function durationToSeconds(value) {
  const unitMap = {
    d: (d) =>  d * 24 * 60 * 60,
    h: (h) =>  h * 60 * 60,
    m: (m) =>  m * 60,
    s: (s) =>  s,
  }

  return value
    .split(',')
    .reduce((a, u) => {
      const { v, k } = u.match(/(?<v>\d )(?<k>\w)/).groups
      return a   unitMap[k]?.(v) ?? 0;
    }, 0);
}

const input = [
  "2h, 2m, 13s",
  "5d, 3h, 49m, 42s",
  "2h, 0m, 13s",
  "12h, 32m, 13s"
];

const result = input.sort((a, b) => {
  a = durationToSeconds(a);
  b = durationToSeconds(b);

  return b - a;
});

console.log(result);

或者你可以做類似下面的事情，它從你的字串值創建一個持續時間物件，然后用來date-fns.add()將每個持續時間添加到一個預先指定的日期（這里保存在一個閉包中）。注意：在計算中引入日期會帶來更多的復雜性，具體取決于您如何處理它們，時區/本地與 utc/夏令時。

顯示代碼片段

<script type='module'>
import { add } from 'https://esm.run/date-fns';

function addDuration(date) {
  const unitMap = {
    d: 'days',
    h: 'hours',
    m: 'minutes',
    s: 'seconds',
  }

  return (value) => {
    const duration = Object.assign(
      {
        years: 0,
        months: 0,
        weeks: 0,
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      },
      Object.fromEntries(value.split(',').map(u => {
        const { v, k } = u.match(/(?<v>\d )(?<k>\w)/).groups
        return [unitMap[k], v];
      }))
    );

    return add(date, duration)
  }
}

const addDurationToDate = addDuration(new Date());

const result = [
  "2h, 2m, 13s",
  "5d, 3h, 49m, 42s",
  "2h, 0m, 13s",
  "12h, 32m, 13s"
].sort((a, b) => {
  a = addDurationToDate(a);
  b = addDurationToDate(b);

  return b - a;
});

console.log(result);

</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/534006.html

標籤：javascript查询解析日期-fns

上一篇：何時在Boost精神中使用x3::lit

下一篇：React決議localStorage問題（Uncaught(inpromise)SyntaxError:Unexpectedtoken'u',"functionst&q