JavaScript에서 여러 케이스 전환

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 여러 케이스 전환
Nithin Krishnan 2023년10월12일
JavaScript
  1. Fall Through 모델을 사용하는 Javascript의 여러 케이스가 있는 Switch
  2. JavaScript에서 수학 표현식을 사용하여 Switch에서 여러 케이스 처리
  3. Javascript에서 문자열 표현식을 사용하여 Switch에서 여러 케이스 처리
  4. Javascript에서 논리식을 사용하여 Switch에서 여러 케이스 처리
JavaScript에서 여러 케이스 전환

스위치 케이스는 if-else 사다리보다 성능이 훨씬 뛰어납니다. 그들은 switch(variable) 블록의 변수에서 case: value 블록의 해당 값으로의 값의 직접적인 맵을 가지고 있습니다. 단일 값 맵의 일반적인 switch-case 사용법에 익숙하지만 여러 경우를 지원할 수 있습니까? 자바스크립트에서 switch-case 블록에 여러 케이스를 가질 수 있는 몇 가지 방법을 살펴보겠습니다.

Fall Through 모델을 사용하는 Javascript의 여러 케이스가 있는 Switch

‘폴스루’ 모델은 자바스크립트에서 2개 이상의 ‘케이스’ 블록으로 ‘스위치’를 지원하는 첫 번째 단계입니다. 여기에서 여러 경우를 통해 전환된 변수의 여러 값을 캡처합니다. 유효한 케이스 세트에 ‘break’ 키워드를 적용합니다. 예를 들어, 지난 달에 따라 연도의 분기 이름을 기록하려는 경우 분기를 기준으로 월 인덱스를 구성합니다. 다음 코드를 참조하십시오.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

출력:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

findQuarter() 함수는 yyyy-mm-dd 형식의 날짜 문자열을 허용합니다. 그런 다음 먼저 자바스크립트 날짜 객체로 변환한 다음 날짜 객체에서 월 인덱스를 가져와 dateString 인수에서 월 인덱스를 추출합니다. getMonth()는 Date 객체에 적용되고 0부터 시작하는 월 인덱스를 반환하는 자바스크립트 함수입니다. 여기에서 여러 사례를 사용하고 출력에 대한 여러 값을 캡처하기 위해 하나를 다른 케이스 아래에 쌓습니다.

예를 들어, 1월부터 3월까지의 달에 대해 해당 월 인덱스의 범위는 getMonth() 함수에서 반환된 출력을 기반으로 0에서 2 사이입니다. break 키워드 없이 0에서 2까지 모든 케이스를 스택합니다. 따라서, 그들은 비틀거리고 First Quarter 값을 기록하는 case 2: 행에 있는 break를 만나면 switch-case를 분리합니다. 이 코드 세트는 부피가 커 보입니다. 줄 수를 줄이기 위해 다음과 같이 다시 작성할 수 있습니다.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

출력:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

여기서 출력은 동일하게 유지됩니다. 그것은 Fall through switch-case 모델을 작성하는 또 다른 방법입니다. 이제 코드가 더 깔끔해 보이고 공간이 절약됩니다.

JavaScript에서 수학 표현식을 사용하여 Switch에서 여러 케이스 처리

우리는 이전 섹션에서 언급한 예에 따라 월의 숫자 값을 다루고 있습니다. case 블록에서 expressions를 사용할 수 있습니까? 분명하게 예입니다! 기능을 설명하기 전에 다음 코드를 참조하십시오.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-2-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
        case ( (monthIndex < 2) ? monthIndex : -1 ):
            console.log('First Quarter');
          break;
        case ( ((monthIndex > 2) && (monthIndex < 5)) ?  monthIndex : -1):
            console.log('Second Quarter');
          break;
        case ( ((monthIndex > 5) && (monthIndex < 8)) ?  monthIndex : -1):
            console.log('Third Quarter');
          break;
        case ( ((monthIndex > 8) && (monthIndex < 11)) ?  monthIndex : -1):
            console.log('Fourth Quarter');
          break;
        default:
          console.log('Invalid date');
          break;
  }
}

출력:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

스위치 케이스에 표현식을 사용하는 경우 숫자 값을 반환해야 합니다. 그렇지 않으면 -1입니다. 위의 코드 조각에서 실제 값 대신 case 블록에 숫자 표현식을 추가했습니다. 이러한 표현식은 해당 월의 해당 분기를 평가하고 분기 이름을 기록합니다. 여기에서 Invalid date를 처리하기 위해 switch case에 default 절을 포함했습니다. 자바스크립트의 getMonth() 메소드는 date의 month가 유효하면 값(0과 11 사이)을 반환합니다(1에서 12 범위 내). 그렇지 않으면 NaN. default 블록은 이러한 잘못된 날짜 시나리오를 포착합니다.

Javascript에서 문자열 표현식을 사용하여 Switch에서 여러 케이스 처리

case 블록 내에서 문자열 표현식을 사용할 수도 있습니다. 이러한 표현식은 case 절을 실행하여 런타임에 평가됩니다. 월 예에서는 월 이름을 전환해 보겠습니다. 이를 위해 날짜 객체에 toLocaleDateString() 함수를 적용합니다. 함수의 옵션 매개변수에서 { 월: 'long' }을 제공합니다. toLocaleDateString('en-US', { month: 'long' })의 출력은 이제 월 이름, 전체 월 이름이 됩니다. 그런 다음 toLocaleDateString('en-US', { month: 'long' }) 함수에서 전체 월 이름 출력을 전환합니다.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case['January', 'February', 'March'].includes(monthName):
      console.log('First Quarter');
      break;
    case['April', 'May', 'June'].includes(monthName):
      console.log('Second Quarter');
      break;
    case['July', 'August', 'September'].includes(monthName):
      console.log('Third Quarter');
      break;
    case['October', 'November', 'December'].includes(monthName):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

출력:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

위의 코드에서는 switch(true) 문을 사용했습니다. case 절에는 문자열 비교가 있습니다. 우리는 각 분기에 대한 임시 월 배열을 만들어 각 케이스에 추가했습니다. 그런 다음 분기 배열에서 monthName을 사용할 수 있는지 확인합니다. 발견되면 분기 이름을 기록합니다. 날짜가 잘못된 경우 toLocaleDateString('en-US', { 월: 'long' }) 함수는 잘못된 날짜를 출력합니다. 이 시나리오는 Invalid Date 문자열이 분기의 월 이름을 포함하는 사전 정의된 배열과 일치하지 않기 때문에 default 블록에 의해 포착됩니다. 따라서 여기서는 유효하지 않은 날짜 시나리오를 원활하게 처리합니다.

메모
.includes() 또는 find() 함수 대신 .indexOf()를 사용하여 여러 브라우저를 지원할 수도 있습니다. .includes() 및 find() 기능은 Internet Explorer에서 지원되지 않습니다.

Javascript에서 논리식을 사용하여 Switch에서 여러 케이스 처리

수학 및 문자열 표현식에서 보았듯이 switch-case 블록의 multiple case에서도 논리 연산자를 사용할 수 있습니다. 월 예에서는 논리적 OR 연산자 ||를 사용합니다. 월 이름이 특정 분기에 속하는지 여부를 결정합니다. 다음 코드를 참고하자.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case (
        monthName === 'January' || monthName === 'February' ||
        monthName === 'March'):
      console.log('First Quarter');
      break;
    case (monthName === 'April' || monthName === 'May' || monthName === 'June'):
      console.log('Second Quarter');
      break;
    case (
        monthName === 'July' || monthName === 'August' ||
        monthName === 'September'):
      console.log('Third Quarter');
      break;
    case (
        monthName === 'October' || monthName === 'November' ||
        monthName === 'December'):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

출력:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

코드에서 monthName 값이 분기의 월과 같은지 확인합니다. 따라서 분기 이름을 위로합니다. 여기에서도 case 절에 코딩된 조건을 충족하지 않고 default 블록에 들어가 Invalid date를 브라우저 콘솔에 인쇄하므로 유효하지 않은 날짜의 경우를 처리합니다.