Introduction détaillée à l'utilisation des objets de données en js (avec code)

Ce que cet article vous apporte est une introduction détaillée à l'utilisation des objets de données en js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Introduction

La gestion des dates en JavaScript peut être compliquée et souvent pénible pour les développeurs quelles que soient leurs compétences.

JavaScript nous fournit des fonctions de traitement de date via un puissant objet Date.

L'instance d'objet DATE

Date représente un moment unique

Bien que nommé Date, il est également utilisé pour gérer le temps.

Initialiser l'objet Date

Nous initialisons un objet Date via le code suivant :

new Date()

Le code ci-dessus crée un objet date qui représente le moment actuel.

En interne, la date représente le nombre de millisecondes depuis le 1er janvier 1970 (UTC). Ce temps est important car pour l'ordinateur, c'est à ce moment-là qu'il a démarré.

Vous connaissez peut-être les horodatages UNIX : ils représentent le nombre de secondes qui se sont écoulées depuis cette fameuse date.

Notez que les horodatages UNIX sont en secondes et les dates JavaScript sont en millisecondes.

Si nous avons un horodatage UNIX, nous pouvons initialiser un objet date JavaScript via :

const timestamp = 1530826365
new Date(timestamp * 1000)

Si on passe 0, on obtiendra la date représentant le 1er janvier 1970 (UTC).

new Date(0)

Si nous transmettons une chaîne au lieu d'une valeur, l'objet Date utilisera la méthode parse pour déterminer la date que vous transmettez, par exemple :

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

C'est très flexible ici. Vous pouvez ajouter ou omettre des zéros non significatifs en quelques mois ou jours

Vous devez faire attention à la position du mois/jour, sinon le mois peut être analysé comme une date.

L'utilisation de Date.parse peut également traiter des chaînes :

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 renverra un horodatage exprimé en millisecondes au lieu d'un objet Date

Vous pouvez également suivre Pass en valeurs de manière séquentielle pour représenter chaque partie de la date. L'ordre des paramètres est le suivant : année, mois (à partir de 0), date, heure, minute, seconde, milliseconde

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

Au moins trois. les paramètres doivent être transmis. Cependant, la plupart des moteurs JavaScript peuvent également analyser moins de trois paramètres

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)

Le résultat final du code ci-dessus est une valeur relative qui dépend du fuseau horaire de votre ordinateur. Cela signifie que la transmission des mêmes paramètres peut produire des résultats différents sur différents ordinateurs.

JavaScript, sans aucune information sur le fuseau horaire, traite la date comme UTC et le résultat est automatiquement converti pour le fuseau horaire actuel de l'ordinateur.

Pour résumer, il existe quatre méthodes qui permettent de créer un nouvel objet Date :

• Si aucun paramètre n'est passé, un objet Date sera créé en fonction du heure actuelle ;

• Passez une valeur représentant le nombre de millisecondes depuis le 1er janvier 1970 00h00 GMT

• Passez une chaîne représentant la date;

• Passer une série de paramètres représentant chaque élément

Fuseau horaire

Lors de l'initialisation de la date, vous pouvez également transmettre le fuseau horaire. À ce stade, la date n'est pas supposée être UTC et est ensuite convertie dans le fuseau horaire local.

Le fuseau horaire peut être transmis au format +HPURS ou en ajoutant un nom de fuseau horaire.

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

Si un nom de fuseau horaire incorrect est transmis lors de l'analyse, JavaScript utilisera UTC par défaut et ne signalera pas d'erreur.

Si une valeur avec un format incorrect est transmise, JavaScript signalera une Invaild Date erreur.

Conversion et formatage de date

Pour un objet date donné, il existe de nombreuses méthodes pour produire une chaîne basée sur la date

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

Méthode GETTER de l'objet Date

Les objets Date fournissent plusieurs méthodes pour vérifier leurs valeurs. Les résultats de ces méthodes dépendent tous du fuseau horaire actuel de l'ordinateur

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

Les méthodes ci-dessus ont des versions correspondantes pour obtenir l'heure UTC :

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)

Modifier l'objet Date

L'objet Date fournit plusieurs méthodes pour modifier les valeurs de date

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 et setMonth commencent tous deux le traitement à partir de la valeur 0. Par exemple, mars devrait être la valeur 2

.

Voici une anecdote : ces méthodes se "chevaucheront", donc si vous utilisez date.setHours (48) par exemple, le résultat sera affecté.

Il existe un autre fait trivial. Vous pouvez transmettre plusieurs paramètres à la méthode setHours() pour définir les minutes, les secondes et les millisecondes. Des situations similaires existent dans setHours(0, 0, 0, 0), setMinutes et setSeconds .

Semblables aux nombreuses méthodes permettant d'obtenir la date, il existe également des méthodes permettant de définir la date pour la version UTC :

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)

Obtenir l'horodatage actuel

Si vous souhaitez obtenir L'horodatage actuel en millisecondes, il est recommandé d'utiliser :

Date.now()

au lieu de

new Date().getTime()

JavaScript essaie toujours d'obtenir le résultat le plus précis

ci-dessus Comme mentionné précédemment, le nombre de jours que vous passez affectera la date totale. Cela ne signalera pas d'erreur et mettra directement à jour le mois

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

Le phénomène ci-dessus prend également effet sur la date, l'heure, minute, seconde et milliseconde

依据本地情况格式化日期

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加密，然后显示出来

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!