Detaillierte Einführung in die Verwendung von Datenobjekten in js (mit Code)

Dieser Artikel bietet Ihnen eine detaillierte Einführung in die Verwendung von Datenobjekten in js (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Einführung

Der Umgang mit Datumsangaben in JavaScript kann für Entwickler unabhängig von ihren Fähigkeiten kompliziert und oft schmerzhaft sein.

JavaScript stellt uns Datumsverarbeitungsfunktionen über ein leistungsstarkes Date-Objekt zur Verfügung.

DATE-Objekt

Date Objektinstanz stellt einen einzelnen Zeitpunkt dar

Obwohl es Date heißt, wird es auch zur Verarbeitung der Zeit verwendet.

Datumsobjekt initialisieren

Wir initialisieren ein Datumsobjekt mit dem folgenden Code:

new Date()

Der obige Code erstellt ein Datumsobjekt, das den aktuellen Moment darstellt.

Intern stellt das Datum die Anzahl der Millisekunden seit dem 1. Januar 1970 (UTC) dar. Diese Zeit ist wichtig, da der Computer zu diesem Zeitpunkt gestartet ist.

Vielleicht kennen Sie UNIX-Zeitstempel: Diese stellen die Anzahl der Sekunden dar, die seit diesem berühmten Datum vergangen sind.

Beachten Sie, dass UNIX-Zeitstempel in Sekunden und JavaScript-Daten in Millisekunden angegeben sind

Wenn wir einen UNIX-Zeitstempel haben, können wir ein JavaScript-Datumsobjekt initialisieren über:

const timestamp = 1530826365
new Date(timestamp * 1000)

Wenn ja Wenn Sie 0 eingeben, erhalten wir das Datum, das den 1. Januar 1970 (UTC) darstellt.

new Date(0)

Wenn wir eine Zeichenfolge anstelle eines Werts übergeben, verwendet das Date-Objekt die Methode parse, um zu bestimmen, welches Datum Sie übergeben haben, wie zum Beispiel:

new Date('2018-07-22')
new Date('2018-07') //July 1st 2018, 00:00:00
new Date('2018') //Jan 1st 2018, 00:00:00
new Date('07/22/2018')
new Date('2018/07/22')
new Date('2018/7/22')
new Date('July 22, 2018')
new Date('July 22, 2018 07:22:13')
new Date('2018-07-22 07:22:13')
new Date('2018-07-22T07:22:13')
new Date('25 March 2018')
new Date('25 Mar 2018')
new Date('25 March, 2018')
new Date('March 25, 2018')
new Date('March 25 2018')
new Date('March 2018') //Mar 1st 2018, 00:00:00
new Date('2018 March') //Mar 1st 2018, 00:00:00
new Date('2018 MARCH') //Mar 1st 2018, 00:00:00
new Date('2018 march') //Mar 1st 2018, 00:00:00

Davon gibt es eine Menge Flexibilität hier. Sie können führende Nullen innerhalb von Monaten oder Tagen hinzufügen oder weglassen.

Sie müssen auf die Position von Monat/Tag achten, da der Monat sonst möglicherweise als Datum geparst wird.

Mit Date.parse können auch Zeichenfolgen verarbeitet werden:

Date.parse('2018-07-22')
Date.parse('2018-07') //July 1st 2018, 00:00:00
Date.parse('2018') //Jan 1st 2018, 00:00:00
Date.parse('07/22/2018')
Date.parse('2018/07/22')
Date.parse('2018/7/22')
Date.parse('July 22, 2018')
Date.parse('July 22, 2018 07:22:13')
Date.parse('2018-07-22 07:22:13')
Date.parse('2018-07-22T07:22:13')

Date.parse gibt einen in Millisekunden ausgedrückten Zeitstempel anstelle eines Datumsobjekts zurück

Sie können ihn auch nacheinander übergeben Geben Sie einen Wert ein, um jeden Teil des Datums darzustellen. Die Reihenfolge der Parameter ist wie folgt: Jahr, Monat (beginnend bei 0), Datum, Stunde, Minute, Sekunde, Millisekunde.

new Date(2018, 6, 22, 7, 22, 13, 0)
new Date(2018, 6, 22)

erfordert mindestens drei Parameter übergeben werden, aber die meisten JavaScript-Engines können auch Fälle mit weniger als drei Parametern analysieren

new Date(2018, 6) //Sun Jul 01 2018 00:00:00 GMT+0200 (Central European Summer Time)
new Date(2018) //Thu Jan 01 1970 01:00:02 GMT+0100 (Central European Standard Time)

Das Endergebnis des obigen Codes ist ein relativer Wert, der von der Zeitzone Ihres Computers abhängt. Dies bedeutet, dass die Übergabe derselben Parameter auf verschiedenen Computern zu unterschiedlichen Ergebnissen führen kann.

JavaScript behandelt das Datum ohne Informationen zur Zeitzone als UTC und das Ergebnis wird automatisch für die aktuelle Computerzeitzone konvertiert.

Zusammenfassend gibt es vier Methoden, mit denen Sie ein neues Datumsobjekt erstellen können:

• Wenn keine Parameter übergeben werden, wird ein Datumsobjekt basierend auf erstellt aktuelle Zeit;

• Übergeben Sie einen Wert, der die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00 GMT darstellt;

• Übergeben Sie einen String, der darstellt das Datum;

• Übergeben Sie eine Reihe von Parametern, die jedes Element darstellen

Zeitzone

Beim Initialisieren des Datums, Sie können auch die Zeitzone übergeben. An diesem Punkt wird nicht davon ausgegangen, dass das Datum UTC ist, sondern es wird dann in die lokale Zeitzone konvertiert.

Die Zeitzone kann im +HPURS-Format oder durch Hinzufügen des Zeitzonennamens übergeben werden.

new Date('July 22, 2018 07:22:13 +0700')
new Date('July 22, 2018 07:22:13 (CET)')

Wenn beim Parsen ein falscher Zeitzonenname übergeben wird, verwendet JavaScript standardmäßig UTC und meldet keinen Fehler.

Wenn ein Wert mit einem falschen Format übergeben wird, meldet JavaScript einen Invaild Date-Fehler.

Datumskonvertierung und -formatierung

Für ein bestimmtes Datumsobjekt gibt es viele Methoden, um eine Zeichenfolge basierend auf dem Datum zu erzeugen

const date = new Date('July 22, 2018 07:22:13')

date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"
date.toDateString() //"Sun Jul 22 2018"
date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"22/07/2018, 07:22:13"
date.toLocaleTimeString()    //"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

GETTER-Methode des Datumsobjekts

Datumsobjekte bieten verschiedene Methoden zum Überprüfen ihrer Werte. Die Ergebnisse dieser Methoden hängen alle von der aktuellen Zeitzone des Computers ab.

const date = new Date('July 22, 2018 07:22:13')

date.getDate() //22
date.getDay() //0 (0 means sunday, 1 means monday..)
date.getFullYear() //2018
date.getMonth() //6 (starts from 0)
date.getHours() //7
date.getMinutes() //22
date.getSeconds() //13
date.getMilliseconds() //0 (not specified)
date.getTime() //1532236933000
date.getTimezoneOffset() //-120 (will vary depending on where you are and when you check - this is CET during the summer). Returns the timezone difference expressed in minutes

Die oben genannten Methoden haben entsprechende Versionen zum Erhalten der UTC-Zeit:

date.getUTCDate() //22
date.getUTCDay() //0 (0 means sunday, 1 means monday..)
date.getUTCFullYear() //2018
date.getUTCMonth() //6 (starts from 0)
date.getUTCHours() //5 (not 7 like above)
date.getUTCMinutes() //22
date.getUTCSeconds() //13
date.getUTCMilliseconds() //0 (not specified)

Datumsobjekt bearbeiten

Datum Das Objekt bietet mehrere Methoden zum Bearbeiten des Datumswerts:

const date = new Date('July 22, 2018 07:22:13')

date.setDate(newValue)
date.setDay(newValue)
date.setFullYear(newValue) //note: avoid setYear(), it's deprecated
date.setMonth(newValue)
date.setHours(newValue)
date.setMinutes(newValue)
date.setSeconds(newValue)
date.setMilliseconds(newValue)
date.setTime(newValue)
date.setTimezoneOffset(newValue)

setDay und setMonth. Beide beginnen mit der Verarbeitung ab dem Wert 0. März sollte beispielsweise der Wert 2 sein.

Hier ein paar Kleinigkeiten: Diese Methoden werden „überlappen“. Wenn Sie also beispielsweise date.setHours (48) verwenden, wirkt sich das Ergebnis auf den Himmel aus.

Es gibt noch eine weitere wichtige Tatsache: Sie können mehrere Parameter an die Methode setHours() übergeben, um Minuten, Sekunden und Millisekunden festzulegen. Ähnliche Situationen gibt es in setHours(0, 0, 0, 0), setMinutes und setSeconds.

Ähnlich den vielen Methoden zum Abrufen des Datums gibt es auch Methoden zum Festlegen des Datums für die UTC-Version:

const date = new Date('July 22, 2018 07:22:13')

date.setUTCDate(newalue)
date.setUTCDay(newValue)
date.setUTCFullYear(newValue)
date.setUTCMonth(newValue)
date.setUTCHours(newValue)
date.setUTCMinutes(newValue)
date.setUTCSeconds(newValue)
date.setUTCMilliseconds(newValue)

Holen Sie sich den aktuellen Zeitstempel

Wenn Sie möchten Holen Sie sich die Millisekunden. Den aktuellen Zeitstempel in Einheiten. Es wird empfohlen, die folgende Methode zu verwenden:

Date.now()

anstelle von

new Date().getTime()

JavaScript versucht immer, die genauesten Ergebnisse zu erhalten

As Wie oben erwähnt, wirkt sich die Anzahl der verstrichenen Tage auf das Gesamtdatum aus. Dadurch wird kein Fehler gemeldet und der Monat wird direkt aktualisiert.

new Date(2018, 6, 40) //Thu Aug 09 2018 00:00:00 GMT+0200 (Central European Summer Time)

Das obige Phänomen wirkt sich auch auf Datum, Stunde, Minute, Sekunde usw. aus Millisekunde

依据本地情况格式化日期

Internationalization API 在现代浏览器中有很好的支持(除了 UC浏览器)，允许你转换日期。

本地化方法通过，通过 Int1 对象暴露，这个对象还可以用来帮助本地化数值，字符串以及货币。

这里我们用到的是 Intl.DateTimeFormat()

我们可以通过下述方法来依据电脑的本地情况格式化一个日期：

const date = new Date('July 22, 2018 07:22:13')
new Intl.DateTimeFormat().format(date) //"22/07/2018" in my locale

也可以依据不同的时区格式化日期：

new Intl.DateTimeFormat('en-US').format(date) //"7/22/2018"

Intl.DateTimeFormat 方法还接收一个可选的参数用以自定义输出格式，可以用来展示 小时，分钟和秒

const options = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
}

new Intl.DateTimeFormat('en-US', options).format(date) //"7/22/2018, 7:22:13 AM"
new Intl.DateTimeFormat('it-IT', options2).format(date) //"22/7/2018, 07:22:13"

点击这个链接可以查看所有可以用到的属性

两个日期的对比

可以通过 Date.getTime() 获取两个日期之间的差别

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 22, 2018 07:22:13')
const diff = date2.getTime() - date1.getTime() //difference in milliseconds

同样也可以通过这个方法检测两个日期是否相同：

const date2 = new Date('July 10, 2018 07:22:13')
if (date2.getTime() === date1.getTime()) {
  //dates are equal
}

需要注意的是，getTime() 方法比较的是毫秒，所以 July 10, 2018 07:22:13 和 July 10, 2018 并不相等。不过你可以通过 setHours(0, 0, 0, 0) 来重置时间。

相关推荐：

js data日期初始化的5种方法_javascript技巧

javascript-问：php使用post方式提交data，进行js加密，然后显示出来

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von Datenobjekten in js (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!