코딩 문제를 해결할 때 할 수 있는 한 가지는 날짜 개체를 사용하여 날짜와 시간을 비교하여 코드의 특정 논리를 조건부로 렌더링하는 것입니다. 이 기사에서는 날짜 개체를 사용하여 두 날짜를 비교하여 어느 날짜가 이후(또는 이전) 날짜인지 확인하는 방법을 살펴봅니다.
설정
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 생성자를 사용할 때 제공되는 메소드를 살펴보십시오. 그러한 방법 중 하나는 getTime()입니다. . 이 메서드를 사용하여 Date 개체를 쉽게 비교할 수 있도록 숫자로 변경합니다.
이 특정 방법은 날짜를 epoch가 시작된 이후의 밀리초 수로 변환합니다(epoch는 1970년 1월 1일에 시작됨). getTime 메소드는 다음과 같습니다.
const date = new Date("09-20-2020")
date.getTime(); //1600585200000
날짜가 새 날짜 개체로 인스턴스화되기 때문에 점 표기법을 사용하여 getTime 함수에 액세스할 수 있습니다.
나는 당신의 논리에 대한 날짜 개체에 사용할 수 있는 모든 다양한 유형의 방법에 대한 문서를 확인하는 것이 좋습니다. 이제 프롬프트를 처리할 준비가 되었습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
프롬프트
두 개의 문자열과 비교 연산자가 주어지면 주어진 연산자에 따라 가장 작거나 큰 날짜를 반환합니다. 전달된 두 문자열이 날짜 개체로 변환될 수 있음이 보장됩니다.
해결 단계
- 두 문자열을 새 날짜 개체로 변경합니다. Date 생성자에 매개변수를 전달하는 방법을 조사하는 것을 잊지 마십시오!
getTime()사용 1970년 1월 1일 이후 경과된 밀리초 수를 생성하는 메소드입니다.- 조건문 또는 삼항을 사용하여 전달된 비교 연산자가 나타내는 날짜를 파악합니다.
- 밀리초를 읽을 수 있는 날짜 문자열로 변환하고 반환합니다.
솔루션을 언급하기 전에 스스로 해결해 보세요!
<!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"> < </label>
<input name="compare" type="radio" id="more" checked value=""/>
<label for="more"> >= </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에서 새 날짜를 설정하고 해당 생성자의 메서드에 액세스하는 방법을 살펴보았습니다. 또한 함수에 전달된 연산자에 따라 가장 큰 날짜와 가장 작은 날짜를 확인하기 위해 두 날짜를 비교하는 방법을 살펴보았습니다.
이에 대한 처리가 완료되면 항목이 배열에 추가된 날짜(오름차순 또는 내림차순)를 기준으로 항목 배열을 정렬하는 방법을 살펴보는 것이 좋습니다. 재미를 가지고 계속!