Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptの日付オブジェクト：日付を比較する方法

コーディングの問題を解決するときにできることの1つは、Dateオブジェクトを使用して日付と時刻を比較し、コード内の特定のロジックを条件付きでレンダリングすることです。この記事では、Dateオブジェクトを使用して2つの日付を比較し、どちらが遅い（または早い）日付であるかを確認する方法について説明します。

セットアップ

JavaScriptには、タイムスタンプに基づいてロジックを実行するのに役立つメソッドにアクセスするために使用できる組み込みの日付オブジェクトがあります。これを設定するには、次のようにコーディングして新しい日付をインスタンス化します。 

const date = new Date("09-20-2020"); //2020-09-20T07:00:00.000Z

console.log(date)を入力する場合 、時間（Tの後の部分文字列）は、デフォルトで住んでいる場所によって異なります。 UTC時刻を使用する場合は、Zを削除し、+HH:MMを追加します。 または-HH:MM 代わりは。

次のセクションで比較機能を使用する場合は、これを設定する方法を知ることが重要です。

次に、Dateコンストラクターを使用するときに提供されるメソッドを見てみましょう。そのようなメソッドの1つは、getTime()です。 。このメソッドを使用して、日付オブジェクトを数値に変更し、簡単に比較できるようにします。

この特定のメソッドは、日付をエポックが開始されてからのミリ秒数に変換します（エポックは1970年1月1日に開始されました）。 getTimeメソッドは次のとおりです。 

const date = new Date("09-20-2020")
   date.getTime(); //1600585200000

日付は新しい日付オブジェクトとしてインスタンス化されるため、ドット表記を使用してgetTime関数にアクセスできます。

ロジックのDateオブジェクトで使用できるさまざまなタイプのメソッドすべてのドキュメントを確認することをお勧めします。これで、プロンプトに取り組む準備ができました。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

プロンプト

2つの文字列と比較演算子を指定すると、指定した演算子に応じて最小または最大の日付を返します。渡された2つの文字列をDateオブジェクトに変換できることが保証されています。

解決する手順

  1. 2つの文字列を新しい日付オブジェクトに変更します。日付コンストラクターにパラメーターを渡す方法を調べることを忘れないでください！
  2. getTime()を使用します 1970年1月1日から経過したミリ秒数を作成する方法。
  3. 条件付きステートメントまたは3進数を使用して、渡された比較演算子によって示される必要な日付を計算します。
  4. ミリ秒を読み取り可能な日付文字列に変換して返します。

解決策を参照する前に、自分で解決してみてください。 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    body {
      font-family: 'Roboto', Courier, monospace
    }
  </style>
</head>
<body>
  <h1>Date Comparison</h1>
    <label for="comparison">Comparison (Choose One)</label>
    <div id="comparison" value="more.value">
      <input name="compare" type="radio" id="less" value=""/>
          <label for="less"> &lt; </label>
      <input name="compare" type="radio" id="more" checked value=""/>
          <label for="more"> &gt;= </label>
    </div>
 <br/>
    <label for="date-1">Date 1:</label>
    <input id="date-1" value="" type="date" name="date1" />
    <label for="date-2">Date 2:</label>
    <input id="date-2" value="" type="date" name="date2" />
    <input id="submit-button" type="submit" />
    <div id="demo"></div>
    <script>
        const handleSubmit = (date1, date2, compare) => {
        //to compare : getTime of each date
        date1Arr = date1.split("-");
        date2Arr = date2.split("-");
              //year, month (month is zero-based), day
        let d1 = new Date(date1Arr[0], date1Arr[1] - 1, date1Arr[2]).getTime();
        let d2 = new Date(date2Arr[0], date2Arr[1] - 1, date2Arr[2]).getTime();
        // getTime gets the number of milliseconds since Jan 1 1970. So the higher the number, the later the date.
        //use conditional or ternary to return Comparison
        let timeDisplay;
        if(compare === ">=") {
              timeDisplay = d1 >= d2 ? d1 : d2;
        } else {
              timeDisplay = d1 < d2 ? d1 : d2;
        }
        let timetoDisplay = new Date(timeDisplay);  
        document.getElementById("demo").innerHTML = timetoDisplay.toDateString();
    }
    let date_1 = document.getElementById("date-1");
    let date_2 = document.getElementById("date-2");
    document.getElementById("submit-button").addEventListener("click", (e) => handleSubmit(date_1.value, date_2.value, more.checked ? '>=' : '<'))
    </script>
  </body>
</html>

JavaScriptの日付は最初は混乱する可能性がありますが、少し練習すればすぐにわかります。ここでは、JavaScriptで新しい日付を設定し、そのコンストラクターのメソッドにアクセスする方法について説明しました。また、2つの日付を比較して、関数に渡された演算子に応じて、どちらが最大か最小かを確認する方法も確認しました。

これを理解したら、アイテムの配列を、配列に追加された日付（昇順または降順）で並べ替える方法を確認することをお勧めします。楽しんで、それを続けてください！


  1. JavaScriptでオブジェクトをフリーズする方法は？

    リアルタイムの世界では、JavaScriptには他の言語で見られるような従来のクラスはありません。オブジェクトとコンストラクターがあります。Object.freeze（） は、オブジェクトをフリーズするのに役立つ多くのコンストラクタメソッドの1つです。 オブジェクトをフリーズすると、新しいプロパティをオブジェクトに追加できなくなり、オブジェクトが独自のプロパティを変更することもできなくなります。 Object.freeze（） オブジェクトの列挙可能性、構成可能性、書き込み可能性、およびプロトタイプを常に保持しようとします。フリーズされたコピーは作成されません。 アプリケーション 1）

  2. JavaScriptでDateオブジェクトを作成するにはどうすればよいですか？

    以下は、JavaScriptで日付オブジェクトを作成するためのコードです- 例 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> &