Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2018-08-13 11:46:39
original
6317 Les gens l'ont consulté

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.

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

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()
Copier après la connexion

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)
Copier après la connexion

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

new Date(0)
Copier après la connexion

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
Copier après la connexion

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')
Copier après la connexion

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)
Copier après la connexion

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)
Copier après la connexion

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)')
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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)
Copier après la connexion

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)
Copier après la connexion
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)
Copier après la connexion

Obtenir l'horodatage actuel

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

Date.now()
Copier après la connexion

au lieu de

new Date().getTime()
Copier après la connexion

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)
Copier après la connexion

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
Copier après la connexion

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

new Intl.DateTimeFormat('en-US').format(date) //"7/22/2018"
Copier après la connexion

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"
Copier après la connexion

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

两个日期的对比

可以通过 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
Copier après la connexion

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

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

需要注意的是,getTime() 方法比较的是毫秒,所以 July 10, 2018 07:22:13July 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal