JavaScript에서 Switch 문 여러 사례
JavaScript의 switch 문에 여러 케이스가 필요합니다.
switch (varName)
{
case "afshin", "saeed", "larry":
alert('Hey');
break;
default:
alert('Default case');
break;
}
어떻게 할 수 있습니까? JavaScript에서 이와 같은 작업을 수행 할 방법이 없다면 DRY 개념을 따르는 대체 솔루션을 알고 싶습니다 .
switch
성명 의 폴 스루 기능을 사용하십시오 . 일치하는 케이스는 a break
(또는 switch
문의 끝 )를 찾을 때까지 실행 되므로 다음과 같이 작성할 수 있습니다.
switch (varName)
{
case "afshin":
case "saeed":
case "larry":
alert('Hey');
break;
default:
alert('Default case');
}
이것은 일반 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);
건배.
switch
진술을 완전히 피하는 다른 접근 방식은 다음과 같습니다 .
var cases = {
afshin: function() { alert('hey'); },
_default: function() { alert('default'); }
};
cases.larry = cases.saeed = cases.afshin;
cases[ varName ] ? cases[ varName ]() : cases._default();
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>
링크 를 클릭하는 예를 참조하십시오
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의 목록에 있는지 확인 하는 질문 을 참조하십시오.
Stefano의 대답을 추가하고 명확하게하면 표현식을 사용하여 switch의 조건에 대한 값을 동적으로 설정할 수 있습니다. 예 :
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');
}
많이 건조하지는 않지만 ..
' 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]()
즐기세요, ZEE
노드에서 다음을 수행 할 수있는 것으로 보입니다.
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;
}
이것은 어떤 경우에 훨씬 더 간결한 코드를 만듭니다.
때에 따라 다르지. Switch 는 한 번만 평가합니다. 경기에서 'break'까지 모든 후속 case 문은 사건이 무엇을 말하든 상관없이 실행됩니다.
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>
나는 다음과 같이 사용합니다.
switch (true){
case /Pressure/.test(sensor):{
console.log('Its pressure!');
break;
}
case /Temperature/.test(sensor):{
console.log('Its temperature!');
break;
}
}
여기에 좋은 답변이 많이있는 것을 볼 수 있지만 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'));
위의 접근 방식의 문제점 case
은 switch
. 가있는 함수를 호출 할 때마다 여러 s 를 반복해야한다는 것 입니다. 보다 강력한 솔루션은 지도 또는 사전을 갖는 것 입니다.
여기에 예
// 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')
}
다음과 같이 할 수 있습니다.
alert([
"afshin",
"saeed",
"larry",
"sasha",
"boby",
"jhon",
"anna",
// ...
].includes(varName)? 'Hey' : 'Default case')
또는 한 줄의 코드 :
alert(["afshin", "saeed", "larry",...].includes(varName)? 'Hey' : 'Default case')
ErikE의 답변에서 약간의 개선
가능한 솔루션 중 하나는 다음과 같습니다.
const names = {
afshin: 'afshin',
saeed: 'saeed',
larry: 'larry'
};
switch (varName) {
case names[varName]: {
alert('Hey');
break;
}
default: {
alert('Default case');
break;
}
}
함수 내부에서 switch 문에서 여러 케이스를 수행하는 또 다른 방법
function name(varName){
switch (varName) {
case 'afshin':
case 'saeed':
case 'larry':
return 'Hey';
default:
return 'Default case';
}
}
console.log(name('afshin')); //Hey
다음과 같이 작성할 수 있습니다.
switch (varName)
{
case "afshin":
case "saeed":
case "larry":
alert('Hey');
break;
default:
alert('Default case');
break;
}
<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>
just switch the switch condition aprroach
switch (true) {
case (function(){ return true; })():
alert('true');
break;
case (function(){ return false; })():
alert('false');
break;
default:
alert('default');
}
참고URL : https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript
'Development Tip' 카테고리의 다른 글
공백 문자를 인코딩하는 URL : + 또는 % 20? (0) | 2020.09.30 |
---|---|
HTML의 레이아웃에 테이블을 사용하지 않는 이유는 무엇입니까? (0) | 2020.09.30 |
강제 메이븐 업데이트 (0) | 2020.09.30 |
Git에서 로컬 작업 디렉토리를 지우려면 어떻게해야합니까? (0) | 2020.09.30 |
쿼리 문자열 매개 변수의 Java URL 인코딩 (0) | 2020.09.30 |