js의 데이터 객체 사용법에 대한 자세한 소개(코드 포함)-JS 튜토리얼-php.cn

이 글은 js에서 데이터 객체의 사용법을 자세히 소개합니다.(코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

소개

JavaScript에서 날짜를 처리하는 것은 개발자의 숙련도에 관계없이 복잡하고 종종 고통스러울 수 있습니다.

js의 데이터 객체 사용법에 대한 자세한 소개(코드 포함)

JavaScript는 강력한 Date 객체를 통해 날짜 처리 기능을 제공합니다. Date对象对我们提供了日期处理功能。

DATE 对象

Date 对象实例表示单个时间点.

尽管名为 Date, 它同样被用来处理时间。

初始化 Date 对象

我们通过下述代码初始化一个 Date 对象：

new Date()

로그인 후 복사

上述代码创建了一个表征当前时刻的日期对象。

在内部, 日期表示自 1970年1月1日 (UTC) 起到现在的毫秒数。这个时间很重要, 因为就计算机而言, 这是其起始之时。

您可能熟悉 UNIX 时间戳: 这表示自该著名日期以来过去的秒数。

注意 UNIX 时间戳以秒为单位，JavaScript 日期以毫秒为单位

如果我们有一个 UNIX 时间戳，我们可以通过下述方法初始化一个 JavaScript 日期对象：

const timestamp = 1530826365
new Date(timestamp * 1000)

로그인 후 복사

如果我们传入的是0，我们将会获得表示 Jan 1st 1970 (UTC) 这个时间点的日期。

new Date(0)

로그인 후 복사

如果我们传入的是一个字符串而非一个数值，那么 Date 对象会使用 parse 方法来判明你传入的究竟是哪个日期，如：

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

로그인 후 복사

这里很灵活。您可以在月份或天数内添加或省略前导零.

需要注意月/日的位置，否则可能会把月份解析为日期。

使用 Date.parse 也可以处理字符串：

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 会返回毫秒表示的时间戳而非一个 Date 对象

你还可以按照顺序传入值来表示日期的每一部分，参数顺序如下：年份，月份（从0开始），日期，小时，分钟，秒，毫秒

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

로그인 후 복사

最少需要传入三个参数，不过大多 JavaScript 引擎也可以解析少于三个参数的情况

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)

로그인 후 복사

上述代码的最终结果是依赖于你的电脑的时区的相对值。这意味着传入相同的参数在不同电脑上可能会有不同的结果。

JavaScript 在没有任何有关时区的信息的情况下, 会将日期视为 UTC, 结果会自动针对当前的计算机时区进行转换。

总结一下，有四种方法可以让你创建一个新的 Date 对象：

不传参数，会基于当前时间创建 Date 对象；
传入代表自 1 Jan 1970 00:00 GMT 过去的毫秒数的数值；
传入代表日期的字符串；
传入一系列分别代表各项的参数；

时区

初始化日期时, 您也可以传入时区, 此时日期不假定为 UTC, 然后转换为本地时区。

可以通过 +HPURS 格式或者添加时区名称的方式传入时区。

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

로그인 후 복사

如果在解析时传入了错误的时区名称，JavaScript 会默认使用 UTC 并不会报错。

如果传入了错误格式的数值，JavaScript会报 Invaild 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

로그인 후 복사

Date 对象的 GETTER 方法

Date 对象提供了几种检查其值的方法。这些方法的结果都都取决于计算机的当前时区

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

로그인 후 복사

上述方法存在对应的获取 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)

로그인 후 복사

编辑 Date 对象

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 和 setMonth 都从数值 0 开始处理，比如三月应该为数值 2

这里有一个冷知识: 这些方法会 “重叠”, 所以比如说如果你使用了 date.setHours (48), 结果会影响到天。

还有一个冷知识，你可以为 setHours() 方法传入多个参数，用以设置分钟，秒，毫秒，如setHours(0, 0, 0, 0), setMinutes 和 setSeconds

DATE 객체

Date 객체 인스턴스는 단일 시점을 나타냅니다.

이름은

Date는 시간을 처리하는데도 사용됩니다. <p></p>Date 객체 초기화 <p></p>다음 코드를 통해 Date 객체를 초기화합니다. <h2><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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)</pre><div class="contentsignin">로그인 후 복사</div></div></h2>위 코드는 현재 순간을 나타내는 날짜 객체를 생성합니다. . <p></p> 내부적으로 날짜는 1970년 1월 1일(UTC) 이후의 밀리초 수를 나타냅니다. 이 시간은 컴퓨터에 관한 한 시작되는 시간이기 때문에 중요합니다. <p></p>UNIX 타임스탬프에 대해 잘 알고 계실 것입니다. 이는 유명한 날짜 이후 경과된 초 수를 나타냅니다. #🎜🎜#<blockquote>UNIX 타임스탬프는 초 단위이고 JavaScript 날짜는 밀리초 단위입니다.</blockquote>#🎜🎜#UNIX 타임스탬프가 있는 경우 다음과 같이 JavaScript 날짜 개체를 초기화할 수 있습니다. #🎜🎜#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Date.now()</pre><div class="contentsignin">로그인 후 복사</div></div> #🎜🎜#0을 전달하면 1970년 1월 1일(UTC)을 나타내는 날짜를 가져옵니다. #🎜🎜#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date().getTime()</pre><div class="contentsignin">로그인 후 복사</div></div>#🎜🎜#값 대신 문자열을 전달하면 Date 개체는 <code>parse

메서드를 사용하여 다음과 같이 전달하는 날짜를 결정합니다. #🎜🎜#

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

로그인 후 복사

#🎜🎜#여기는 매우 유연합니다. 월 또는 일 내에 앞에 오는 0을 추가하거나 생략할 수 있습니다.#🎜🎜##🎜🎜#월/일 위치에 주의해야 합니다. 그렇지 않으면 해당 월이 날짜로 해석될 수 있습니다. #🎜🎜##🎜🎜#Date.parse를 사용하면 문자열도 처리할 수 있습니다. #🎜🎜#

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

로그인 후 복사

#🎜🎜#Date.parse는 시간을 밀리초 단위로 반환합니다. Date 객체 대신#🎜🎜##🎜🎜#날짜의 각 부분을 나타내기 위해 값을 전달할 수도 있습니다. 매개변수 순서는 연도, 월(0부터 시작), 날짜, 시간입니다. , 분, 초, 밀리초#🎜🎜#

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

로그인 후 복사

#🎜🎜#최소 3개의 매개변수를 전달해야 하지만 대부분의 JavaScript 엔진은 3개 미만의 매개변수도 구문 분석할 수 있습니다.#🎜🎜#

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"

로그인 후 복사

#🎜🎜#최종 결과는 위 코드는 사용자에 따라 다릅니다. 컴퓨터 시간대의 상대적인 값입니다. 이는 동일한 매개변수를 전달해도 컴퓨터마다 다른 결과가 나타날 수 있음을 의미합니다. #🎜🎜##🎜🎜#JavaScript는 시간대에 대한 정보 없이 날짜를 UTC로 처리하고 결과는 현재 컴퓨터 시간대로 자동 변환됩니다. #🎜🎜##🎜🎜#요약하자면, 새로운 Date 객체를 생성할 수 있는 네 가지 메소드가 있습니다: #🎜🎜#

#🎜🎜#통과되지 않음 매개변수인 Date 객체는 현재 시간을 기준으로 생성됩니다. #🎜🎜#
#🎜🎜# 1970년 1월 1일 00:00 GMT 이후의 밀리초 수를 나타내는 값을 전달합니다. #
#🎜🎜# 날짜를 나타내는 문자열을 전달합니다. #🎜🎜#
#🎜🎜# 각 항목을 나타내는 일련의 매개변수를 전달합니다. /li>

#🎜🎜#Timezone#🎜🎜##🎜🎜#날짜를 초기화할 때 시간대도 전달할 수 있는데, 이 경우 날짜는 UTC로 간주되지 않고 다음으로 변환됩니다. 현지 시간대. #🎜🎜##🎜🎜#시간대는 +HPURS 형식으로 전달하거나 시간대 이름을 추가하여 전달할 수 있습니다. #🎜🎜#

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

로그인 후 복사

#🎜🎜#파싱 중에 잘못된 시간대 이름이 전달되면 JavaScript는 기본적으로 UTC를 사용하고 오류를 보고하지 않습니다. #🎜🎜##🎜🎜#잘못된 형식의 값이 전달되면 JavaScript는 잘못된 날짜 오류를 보고합니다. #🎜🎜##🎜🎜#날짜 변환 및 서식 지정#🎜🎜##🎜🎜#주어진 날짜 개체에 대해 날짜를 기반으로 문자열을 생성하는 방법은 여러 가지가 있습니다. #🎜🎜#

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

로그인 후 복사

#🎜🎜#Date 개체 GETTER 메소드 #🎜🎜##🎜🎜#Date 객체는 값을 확인하는 여러 가지 메소드를 제공합니다. 이러한 메서드의 결과는 모두 컴퓨터의 현재 시간대에 따라 달라집니다. 🎜#Date 개체는 날짜 값#🎜🎜#rrreee

setDay 및 setMonth를 편집하는 여러 메서드를 제공합니다. code> 둘 다 값 0부터 처리를 시작합니다. 예를 들어 March는 값 2여야 합니다.

#🎜🎜#여기에 약간의 상식이 있습니다. 이 메서드는 "중첩"됩니다. 예를 들어 date를 사용하는 경우입니다. setHours (48), 결과는 날짜에 영향을 미칩니다. #🎜🎜##🎜🎜#또 다른 상식이 있습니다. setHours()와 같이 여러 매개변수를 <code>setHours() 메서드에 전달하여 분, 초, 밀리초를 설정할 수 있습니다. 0 , 0, 0, 0), setMinutes 및 setSeconds는 상황이 비슷합니다. #🎜🎜##🎜🎜#날짜를 가져오는 다양한 방법과 유사하게 UTC 버전에도 날짜를 설정하는 방법이 있습니다. #🎜🎜#rrreee#🎜🎜#현재 타임스탬프 가져오기#🎜🎜##🎜 🎜# 현재 타임스탬프를 밀리초 단위로 가져오려면 다음 방법을 사용하는 것이 좋습니다. #🎜🎜#rrreee#🎜🎜# 대신 #🎜🎜#rrreee#🎜🎜#JavaScript 항상 가장 정확한 값을 얻으려고 노력하세요. 결과#🎜🎜 ##🎜🎜#위에서 언급한 대로, 전달한 일수가 총 날짜에 영향을 미칩니다. 이는 오류를 보고하지 않으며 #🎜🎜#rrreee#🎜🎜#위 내용입니다. 날짜, 시, 분, 초, 밀리초에도 현상이 발생합니다#🎜🎜#

依据本地情况格式化日期

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) 来重置时间。