JavaScript로 여러 사례 전환


767

JavaScript의 switch 문에 여러 경우가 필요합니다.

switch (varName)
{
   case "afshin", "saeed", "larry": 
       alert('Hey');
       break;

   default: 
       alert('Default case');
       break;
}

어떻게해야합니까? JavaScript에서 이와 같은 것을 할 수있는 방법이 없다면 DRY concept을 따르는 대안 솔루션을 알고 싶습니다 .


5
이 질문을 닫기 위해 투표 한 사람에게. 그것은 5 세 이상이며 적절한 대답을 가지고 있습니다-왜 가까운 투표입니까?
surfmuggle

더 많은 답변을 추가 할 필요가 없기 때문에 @surfmuggle.
Afshin Mehrabani

7
@AfshinMehrabani 어쩌면 닫히지 않고 보호 할 수 있습니까?
evolutionxbox

답변:


1506

switch명세서 의 대체 기능을 사용하십시오 . 일치하는 케이스는 break(또는 switch명령문 의 끝 )이 발견 될 때까지 실행 되므로 다음과 같이 작성할 수 있습니다.

switch (varName)
{
   case "afshin":
   case "saeed":
   case "larry": 
       alert('Hey');
       break;

   default: 
       alert('Default case');
}


2
어쨌든 그것은 자바 스크립트 콘솔에서 Chrome에서 나를 위해 작동합니다 : switch('10') { case 1, '10': console.log('ok') }printsok
nafg

8
@nafg : 사용해보십시오 switch(1). 여기서 레이블은 쉼표 표현식입니다.
kennytm

4
@Barney 아니오, 휴식없이 다음 사건으로 넘어갈 수 있습니다.
Seiyria

1
@Seiyira 정의에 따르면 마지막 이후에는 다음 사례가 없습니다. 게다가, 그것은 기본값입니다.
바니

101

이것은 일반적인 JavaScript에서 작동합니다

function theTest(val) {
  var answer = "";
  switch( val ) {
    case 1: case 2: case 3:
      answer = "Low";
      break;
    case 4: case 5: case 6:
      answer = "Mid";
      break;
    case 7: case 8: case 9:
      answer = "High";
      break;
    default:
      answer = "Massive or Tiny?";
  } 
  return answer;  
}

theTest(9);

건배.


13
@believesInSanta 그것은 문자 그대로 이상한 서식 (줄 바꿈 대신 공백)으로
일반적으로 타락합니다

42

switch진술을 완전히 피하는 다른 접근법이 있습니다 .

var cases = {
  afshin: function() { alert('hey'); },
  _default: function() { alert('default'); }
};
cases.larry = cases.saeed = cases.afshin;

cases[ varName ] ? cases[ varName ]() : cases._default();

5
나는 분명히이 버전을 선호한다. 넘어짐은의 버그가 발생하기 쉬운 기능입니다 switch ... case. break진술 을 잊어 버리기가 너무 쉽고 , 의도적으로 넘어 가면 잊어 버린 break진술을 찾기 가 매우 어려울 수 있습니다. 이 방법 조회 버전에는 switch ... case동적 확장 성 또는 모드 전환을 위해 객체를 완전히 대체하는 기능과 같이 부족한 많은 훌륭한 기능이 있습니다. 깔끔하게 정리하는 것이 더 쉬우 며 유지 보수가 쉬운 코드로 이어질 수 있습니다. ericleads.com/2012/12/switch-case-considered-harmful
Eric Elliott

31
나는 의도적으로를 생략 할 때마다 항상 주석 //fallthrough을 추가 break합니다 break. 실수와 의도가 언제인지 식별하는 데 도움이됩니다.
Mnebuerquo

18
직관적 인 접근. 그러나 가독성을 위해 기본 switch 문을 사용하는 것이 좋습니다.
contactmatt

39
하나는 항상 목 뒤를 통해 오른손을 통과하는 왼쪽 귀를 긁을 수 있습니다 ... (내 영어로 유감스럽게도, "언제나 가능한 한 많은 것을 복잡하게 할 수 있습니다 ... 이 복잡한 솔루션에 찬성하여 옳은 일이 아닌 것 같습니다 ...)
클린트 이스트우드

25
나는 이것이 어떻게 34 표를 얻었는지 정말 놀랐습니다. 가독성과 유지 관리 성 측면에서 이것은 매우 끔찍합니다. 어떤 조건이 어떤 조건을 유발하는지 확인하려면 레이블을 보면 대단한 설명이 쉽고 간단합니다. 반면, 버전은 누군가가 한 줄마다 거의 모든 것을 읽고 어디에서 할당했는지 확인해야합니다. 더 많은 경우를 일치시키려는 경우에도 더욱 악화됩니다.
michael

21

스위치에서 여러 사례를 할당하려면 Javascript에서 다음 different case without break inbetween과 같이 정의해야 합니다.

   <script>
      function checkHere(varName){
        switch (varName)
           {
           case "saeed":
           case "larry":
           case "afshin":
                alert('Hey');
                break;
          case "ss":
               alert('ss');
               break;
         default:
               alert('Default case');
               break;
       }
      }
     </script>

링크 클릭 예를 참조하십시오


5
그것은 언어의 pletora에서 일반적인 기술이다, JS에 얽매이지
drAlberT

13

ES6를 사용하는 경우 다음을 수행 할 수 있습니다.

if (['afshin', 'saeed', 'larry'].includes(varName)) {
   alert('Hey');
} else {
   alert('Default case');
}

또는 이전 버전의 JavaScript의 경우 다음을 수행 할 수 있습니다.

if (['afshin', 'saeed', 'larry'].indexOf(varName) !== -1) {
   alert('Hey');
} else {
   alert('Default case');
}

이전 IE 브라우저에서는 작동하지 않지만 상당히 쉽게 패치 할 수 있습니다. 자세한 내용은 javascript에서 문자열이 목록에 있는지 확인 하는 질문 을 참조하십시오.


스위치보다 이것의 장점은 무엇입니까?
브라이스 스나이더

@BryceSnyder 식과 문장의 차이점은 무엇입니까? 타이핑이 적습니까? 더 적은 수직선이 소비 되었습니까? 간결함과 표현 밀도를 통해 표현력이 향상됩니까? includes단어를 통해 더 나은 의미론 ? 골라보세요.
ErikE

7

노드에서 다음을 수행 할 수있는 것으로 보입니다.

data = "10";
switch(data){
case "1": case "2": case "3": //put multiple cases on the same line to save vertical space.
   console.log("small"); break;
case "10": case "11": case "12":
   console.log("large"); break;
default:
   console.log("strange");
   break;
}

이것은 어떤 경우에는 훨씬 더 작은 코드를 만듭니다.


1
구문이 다른 JS 환경과 동일하다고 생각합니다.
Afshin Mehrabani

1
@AfshinMehrabani 아마도 nodejs 컨텍스트에서만 테스트했습니다.
Automatico

예. 나는 수직 공간을 절약하는 것을 좋아합니다!
채널

7

Stefano의 답변을 추가하고 명확히하기 위해 표현식을 사용하여 스위치의 조건 값을 동적으로 설정할 수 있습니다.

var i = 3
switch (i) {
    case ((i>=0 && i<=5)?i:-1): console.log('0-5'); break;
    case 6: console.log('6');
}

따라서 문제에서 다음과 같이 할 수 있습니다.

var varName = "afshin"
switch (varName) {
    case (["afshin", "saeed", "larry"].indexOf(varName)+1 && varName):
      console.log("hey");
      break;

    default:
      console.log('Default case');
}

너무 건조하지는 않지만 ..


아직 테스트되지는 않았지만 varNamecase 표현식 내에서 수정하는 것이 흥미로울 것입니다. varName이 캐시 될 것으로 기대하십시오.
Valen

5

' in '연산자를 사용할 수 있습니다 ...
객체 / 해시 호출에 의존합니다 ...
그래서 자바 스크립트가 가능한 한 빠릅니다 ...

// assuming you have defined functions f(), g(a) and h(a,b) 
// somewhere in your code
// you can define them inside the object but... 
// the code becomes hard to read, I prefer this way

o = { f1:f, f2:g, f3:h };

// if you use "STATIC" code can do:
o['f3']( p1, p2 )

// if your code is someway "DYNAMIC", to prevent false invocations
// m brings the function/method to be invoked (f1, f2, f3)
// and you can rely on arguments[] to solve any parameter problems
if ( m in o ) o[m]()

즐기세요, 지


이것이 스위치와 어떤 관련이 있습니까? 당신은 그것을 명확히 할 수 있습니까?
Z. 쿨라

왜 코드를 "읽기 힘들게"만들고 싶습니까? 프로그래머로서 내가 처음으로 말한 것은 코드를 읽는 다음 사람이 도끼 휘두르는 연쇄 살인범이며 코드를 이해할 수 없다는 것을 싫어하는 사고 방식으로 코드를 작성하는 것이 었습니다.
MattE

안녕하세요 매트 ... 여기에 개념 증명으로 제시하고 있습니다 ... 어쨌든이 양식은 더 많은 기능과 유연성을 제공합니다 ... 원하는 경우에만 사용하십시오 ... 일반적인 형태의 일 ... ir를 프로그래머 툴박스에서 하나의 도구로 생각하십시오 ...
ZEE

5

나는 이렇게 사용한다 :

switch (true){
     case /Pressure/.test(sensor):{
        console.log('Its pressure!');
        break;
     }
     case /Temperature/.test(sensor):{
        console.log('Its temperature!');
        break;
     }
}

g정규식을 한 번만 사용하고 버려서 플래그 를 사용할 필요가 없습니다 . 실제로 함수 외부에서 유지하면 g플래그는 후속 .test(s의 0이 아닌 인덱스와 일치하려고하면 해를 끼칩니다 . 또한 스위치 케이스가 sensor가변적이며 true부울 식 일치를 위해 일정 하지 않은 오타를 수정했습니다 . 편집 내용을 참조하십시오.
Mihail Malostanidis

이 형식을 사용하여 파일 형식을 테스트했습니다. 예 :case /officedocument/.test(type) && /presentation/.test(type): iconClass = "far fa-file-powerpoint red"; break;
tbone849

4

때에 따라 다르지. 스위치 는 한 번만 평가합니다. 경기가 진행되면 사건에 관계없이 '중단'까지 모든 후속 사건 진술이 발생합니다.

var onlyMen = true;
var onlyWomen = false;
var onlyAdults = false;
 
 (function(){
   switch (true){
     case onlyMen:
       console.log ('onlymen');
     case onlyWomen:
       console.log ('onlyWomen');
     case onlyAdults:
       console.log ('onlyAdults');
       break;
     default:
       console.log('default');
   }
})(); // returns onlymen onlywomen onlyadults
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>


3

명확성과 DRY 구문이 마음에 듭니다.

varName = "larry";

switch (true)
{
    case ["afshin", "saeed", "larry"].includes(varName) :
       alert('Hey');
       break;

    default: 
       alert('Default case');

}

2

여기에 좋은 답변이 많이 있음을 알 수 있지만 10 개가 넘는 사례를 확인해야하는 경우 어떻게됩니까? 내 접근 방식은 다음과 같습니다.

 function isAccessible(varName){
     let accessDenied = ['Liam','Noah','William','James','Logan','Benjamin',
                        'Mason','Elijah','Oliver','Jacob','Daniel','Lucas'];
      switch (varName) {
         case (accessDenied.includes(varName)?varName:null): 
             return 'Access Denied!';
         default:
           return 'Access Allowed.';
       }
    }

    console.log(isAccessible('Liam'));

1
이것은 switch 문을 남용하는 것입니다. 그냥 if (accessDenied.includes(varName)) return 'Access Denied!'; return 'Access Allowed.'더 충분하다.
Mihail Malostanidis

2

위의 접근 방식의 문제점은을 가진 case함수를 호출 할 때마다 여러 개를 반복해야한다는 것 switch입니다. 보다 강력한 해결책은 지도사전을 갖는 것 입니다.

여기 예

// the Map, divided by concepts
var dictionary = {
  timePeriod: {
    'month': [1, 'monthly', 'mensal', 'mês'],
    'twoMonths': [2, 'two months', '2 motnhs', 'bimestral', 'bimestre'],
    'trimester': [3, 'trimesterly', 'quarterly', 'trimestral'],
    'semester': [4, 'semesterly', 'semestral', 'halfyearly'],
    'year': [5, 'yearly', 'anual', 'ano']
  },
  distance: {
    'km': [1, 'kms', 'kilometre', 'kilometers', 'kilometres'],
    'mile': [2, 'mi', 'miles'],
    'nordicMile': [3, 'nordic mile', 'mil(10km)', 'scandinavian mile']
  },
  fuelAmount: {
    'ltr': [1, 'l', 'litre', 'Litre', 'liter', 'Liter'],
    'gal(imp)': [2, 'imp gallon', 'imperial gal', 'gal(UK)'],
    'gal(US)': [3, 'US gallon', 'US gal'],
    'kWh': [4, 'KWH']
  }
};

//this function maps every input to a certain defined value
function mapUnit (concept, value) {
  for (var key in dictionary[concept]) {
    if (key === value || 
      dictionary[concept][key].indexOf(value) !== -1) {
      return key
    }
  }
  throw Error('Uknown "'+value+'" for "'+concept+'"')
}

//you would use it simply like this
mapUnit("fuelAmount", "ltr") // => ltr
mapUnit("fuelAmount", "US gal") // => gal(US)
mapUnit("fuelAmount", 3) // => gal(US)
mapUnit("distance", "kilometre") // => km
  
//now you can use the switch statement safely without the need 
//to repeat the combinations every time you call the switch
var foo = 'monthly'
switch (mapUnit ('timePeriod', foo)) {
  case 'month': 
    console.log('month')
    break
  case 'twoMonths': 
    console.log('twoMonths')
    break
  case 'trimester': 
    console.log('trimester')
    break
  case 'semester': 
    console.log('semester')
    break
  case 'year': 
    console.log('year')
    break
  default:
    throw Error('error')
}


1

당신은 이것을 할 수 있습니다 :

alert([
  "afshin", 
  "saeed", 
  "larry",
  "sasha",
  "boby",
  "jhon",
  "anna",
  // ...
].includes(varName)? 'Hey' : 'Default case')

또는 한 줄의 코드 :

alert(["afshin", "saeed", "larry",...].includes(varName)? 'Hey' : 'Default case')

ErikE의 답변에서 약간의 개선


1

몇 주 동안 코딩과 소진 후에 겪었던 비슷한 문제로 여기에 오는 사람에게는 내 상황이 비슷했습니다.

switch (text) {
  case SOME_CONSTANT || ANOTHER_CONSTANT:
    console.log('Case 1 entered');

  break;

  case THIRD_CONSTANT || FINAL_CONSTANT:
    console.log('Case 2 entered');

  break;

  default:
    console.log('Default entered');
}

항상 default 사건이 입력되었습니다. 비슷한 다중 사례 스위치 문 문제가 발생하면 찾고있는 것은 다음과 같습니다.

switch (text) {
  case SOME_CONSTANT:
  case ANOTHER_CONSTANT:
    console.log('Case 1 entered');

  break;

  case THIRD_CONSTANT:
  case FINAL_CONSTANT:
    console.log('Case 2 entered');

  break;

  default:
    console.log('Default entered');
}

이것이 누군가에게 도움이되기를 바랍니다. 나는 스위치 케이스를 내 redux 감속기에서 사용하는 것과 같은 방식으로 사용하기를 기억하기 전에 머리카락을 날려 버렸습니다.


0

가능한 해결책 중 하나는 다음과 같습니다.

const names = {
afshin: 'afshin',
saeed: 'saeed',
larry: 'larry'
};

switch (varName) {
   case names[varName]: {
       alert('Hey');
       break;
   }

   default: {
       alert('Default case');
       break;
   }
}

Q pls #ecma는 무엇입니까?
BG Bruno

안녕. 이것은 ES6입니다
Jackkobec

0

나에게 이것은 가장 간단한 방법입니다.

switch (["afshin","saeed","larry"].includes(varName) ? 1 : 2) {
   case 1: 
       alert('Hey');
       break;

   default: 
       alert('Default case');
       break;
}

-1

함수 내부에있을 때 switch 문에서 여러 사례를 수행하는 다른 방법

function name(varName){
  switch (varName) {
     case 'afshin':
     case 'saeed':
     case 'larry':
       return 'Hey';
     default:
       return 'Default case';
   }
}
        
console.log(name('afshin')); //Hey


-2

다음과 같이 작성할 수 있습니다.

switch (varName)
{
   case "afshin": 
   case "saeed": 
   case "larry": 
       alert('Hey');
       break;

   default: 
       alert('Default case');
       break;
}         

6
이것은 다른 모든 사람들과 같은 대답입니다. "잊어 버린 것을 고치 겠지만 이것을 삭제하는 것에 대해 생각하십시오.
Gaunt

-3
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example1</title>
    <link rel="stylesheet" href="css/style.css" >
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script>
        function display_case(){
            var num =   document.getElementById('number').value;

                switch(num){

                    case (num = "1"):
                    document.getElementById("result").innerHTML = "You select day Sunday";
                    break;

                    case (num = "2"):
                    document.getElementById("result").innerHTML = "You select day  Monday";
                    break;

                    case (num = "3"):
                    document.getElementById("result").innerHTML = "You select day  Tuesday";
                    break;

                    case (num = "4"):
                    document.getElementById("result").innerHTML = "You select day  Wednesday";
                    break;

                    case (num = "5"):
                    document.getElementById("result").innerHTML = "You select day  Thusday";
                    break;

                    case (num = "6"):
                    document.getElementById("result").innerHTML = "You select day  Friday";
                    break;

                    case (num = "7"):
                    document.getElementById("result").innerHTML = "You select day  Saturday";
                    break;

                    default:
                    document.getElementById("result").innerHTML = "You select day  Invalid Weekday";
                    break
                }

        }
    </script>
</head>
<body>
    <center>
        <div id="error"></div>
        <center>
            <h2> Switch Case Example </h2>
            <p>Enter a Number Between 1 to 7</p>
            <input type="text" id="number" />
            <button onclick="display_case();">Check</button><br />
            <div id="result"><b></b></div>
        </center>
    </center>
</body>

3
클래식 jquery 포함 :)
ptim

4
이것은 switch진술이 작동 하는 방식이 아닙니다 . 단지 case "1":아닙니다 case (num = "1"):.
user4642212

케이스 내부와 document.getElementById("result").innerHTML = ....스위치 외부에 일 값을 입력하고 일 값 결과를 끝에 추가 하지 않는 이유는 무엇 입니까?
Steffo Dimfelt

@ Xufox 나는 그가 문자 그대로 덮어 쓰는 방법을 좋아 num하지만 switch이미 평가되었고 과제가 가치를 산출 하기 때문에 여전히 작동 합니다. 이것은 최고의 돌연변이 / 기계 학습에 의한 프로그래밍입니다.
Mihail Malostanidis

-3

그냥 스위치 상태를 전환하십시오

switch (true) {
    case (function(){ return true; })():
        alert('true');
        break;
    case (function(){ return false; })():
        alert('false');
        break;
    default:
        alert('default');
}

2
스위치 식으로 true를 설정하면 "case"문에서 부울을 반환하는 경우 원하는 것을 평가할 수 있습니다.
Stefano Favero

1
그가 의미하는 바는 함수 내부에 표현식을 넣을 수 있고, 케이스에 대한 동적 값을 평가하고 반환하여 모든 종류의 복잡한 조건을 허용
한다는 것입니다.

이 @StefanoFavero 참고 사항에 대해서는 실제로 (expression)괄호 안에 함수가 필요하지 않으며 반환 값은 입력이어야합니다. 내 답변보기
Z. Khullah

왜 당신이 그것을 빼? 이 솔루션은 복잡한 조건에 유연성을 제공하기 때문에이 솔루션을 옹호합니다. funcs를 조건으로 좋아하지 않더라도 다음과 같은 여러 조건으로 대체 할 수 있습니다.switch(true) { case (var1 === 0 && var2 === true): {} }
AlexNikonov
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.